JavaScript SEO: Araç Sayfalarında İlk HTML ve Render Kontrolü

JavaScript SEO'da araç sayfasında önce neye bakılır?

Araç sayfasında JavaScript SEO kontrolü iki çıktıyı karşılaştırır: sunucunun gönderdiği ilk HTML ile JavaScript çalıştıktan sonraki DOM. Başlık, cevap metni, bağlantılar ve canonical ilk HTML’de bulunmalı; yalnız araç arayüzü JavaScript ile gelebilir. Google’ın JavaScript belgesi süreci üç aşamada anlatır: tarama, işleme (render) ve dizinleme; Googlebot HTTP 200 dönen tüm sayfaları işlenmek üzere kuyruğa alır ve JavaScript’i güncel bir Chromium ile çalıştırır.

Öğe	İlk HTML’de olmalı mı?	Gerekçe
title, meta açıklama, canonical, robots etiketi	Evet	Google, canonical’ı JavaScript ile eklemeyi önermez; robots etiketini de ilk HTML’de vermek daha sağlamdır
H1, H2 başlıkları ve cevap metni	Evet	Sayfanın anlamı ve alıntılanabilir cevap metin olarak gelir
Bağlantılar	Evet, href’li a öğesi olarak	Google bağlantıları yalnızca href’li a öğeleri olarak keşfeder
JSON-LD yapısal veri	Tercihen evet	Google JSON-LD’nin JavaScript ile eklenebildiğini söyler; ilk HTML’de olması daha sağlamdır
Araç arayüzü (form öğeleri)	Hayır, JavaScript ile gelebilir	Arayüz kullanıcı içindir; sayfanın cevabı ayrıca metin olarak yazılmalı
İçindekiler listesi	Hayır, JavaScript ile gelebilir	Yardımcı gezintidir; başlıklar zaten ilk HTML’de

Belge ayrıca işleme aşamasının sınırlarını sayar: Google robots.txt ile engellenmiş dosyalardaki ya da sayfalardaki JavaScript’i çalıştırmaz, durumu sayfa yüklemeleri arasında saklamaz (yerel depolama ve çerezler her yüklemede silinir) ve kullanıcı izni isteyen işlemleri reddeder. Sunucu tarafı ya da önceden işlenmiş HTML’in kullanıcıyı ve tarayıcıları hızlandırdığı için hâlâ iyi bir fikir olduğunu da yazar. Genel teknik kontrol listesindeki JavaScript maddesi için teknik SEO rehberine bakın.

Araç sayfasının ilk HTML'inde ne var?

Araç sayfasının ilk HTML’inde aracın yalnızca kabuğu vardır: başlık, “Ücretsiz araç” etiketi ve içinde tek bir noscript uyarısı olan boş bir gövde. yademreklam.com’da kısa kodu sunucuda şu HTML’e dönüşüyor (/reklam-filmi-maliyet-hesaplama/, 18.10.2026 03:42, JavaScript çalıştırılmadan alınan yanıt; WhatsApp numarası bu sayfada kısaltıldı):

<section class="yd-tool" data-arac="maliyet" data-wa="…" aria-label="Video maliyet hesaplayıcı"><div class="yd-tool__head"><span class="yd-eyebrow">Ücretsiz araç</span><h2>Video maliyet hesaplayıcı</h2></div><div class="yd-tool__body"><noscript>Bu aracı kullanmak için JavaScript gerekir.</noscript></div></section>

İçindekiler listesi de ilk HTML’de boştur:

<aside class="yd-toc" aria-label="İçindekiler"><b>Bu sayfada</b><ol></ol></aside>

Bu iki parça, JavaScript’in dolduracağı yerlerdir. Beş araç sayfasının hepsinde ilk HTML’de araç gövdesindeki form öğesi sayısı 0, içindekiler bağlantısı 0 ve kimlik (id) taşıyan H2 sayısı 0; başlıklar ve açıklama metinleri ise ilk HTML’de bulunuyor. Sayfanın dizinlenecek cevabı bu yüzden render’a bağlı değildir.

JavaScript çalışınca ne değişiyor? (canlı render)

JavaScript çalışınca değişen tek şey içindekiler listesi ve H2 kimlikleridir; araç arayüzü beş sayfanın hiçbirinde oluşmaz. Beş sayfa, Chrome 155.0.8059.80 ile (Playwright, başsız, 18.10.2026 03:42; ilk ölçüm 17.10.2026 23:49, aynı sonuç) açıldı, ağ boşta kalana kadar beklendi ve 2,5 saniye daha beklenip DOM okundu. Sonuçlar:

Araç sayfası	İlk HTML: form / içindekiler / id’li H2	Canlı render: form / içindekiler / id’li H2	Konsol
/reklam-filmi-maliyet-hesaplama/	0 / 0 / 0 (H2: 12)	0 / 12 / 12	Unexpected identifier ‘ta’
/llms-txt-nedir/	0 / 0 / 0 (H2: 8)	0 / 8 / 8	Unexpected identifier ‘ta’
/geo-gorunurluk-testi/	0 / 0 / 0 (H2: 8)	0 / 8 / 8	Unexpected identifier ‘ta’
/reels-kanca-ornekleri/	0 / 0 / 0 (H2: 9)	0 / 9 / 9	Unexpected identifier ‘ta’
/sosyal-medya-video-boyutlari/	0 / 0 / 0 (H2: 7)	0 / 7 / 7	Unexpected identifier ‘ta’

İçindekiler, 7 ile 12 arasında bağlantıyla doldu ve her H2’ye kimlik atandı; bu işi tema betiği (site.js) yapıyor. Araç gövdesi ise render sonrasında da yalnız noscript uyarısını taşıyor, yani form öğesi sayısı 0 kaldı ve beş sayfada da tarayıcı konsolu aynı hatayı yazdı: Unexpected identifier 'ta'. Bu iletiyi Google’ın araçları da görür: belge, URL Denetleme aracı ve Zengin Sonuçlar Testi ile yüklenen kaynakları, JavaScript konsol çıktısını, istisnaları ve işlenmiş DOM’u görebileceğinizi yazar.

Araç arayüzü neden oluşmadı?

Araç arayüzü, araclar.js dosyasının 98. satırındaki bir sözdizimi hatası yüzünden oluşmadı: tek tırnakla yazılmış bir dize, içindeki kesme işaretinde (“Tools’ta”) bitiyor ve dosyanın geri kalanı ayrıştırılamıyor. JavaScript’te bir sözdizimi hatası yalnız o satırı değil, dosyanın tamamını çalışmaz hale getirir; bu yüzden beş aracın beşi de aynı anda açılmadı. Hata, Node’un node --check komutuyla da yakalanıyor (çıkış kodu 1, iletisi “Unexpected identifier ‘ta’”).

Hatanın kapsamı da ölçülebilir: aynı sitede ayrı bir dosyayla (videoobject.js) çalışan VideoObject schema oluşturucu bu hatadan etkilenmedi. 18.10.2026 03:44 ölçümünde bu sayfanın ilk HTML’inde araç gövdesindeki form öğesi 0, render sonrasında 21’di; konsolda hata yoktu ve videoobject.js node --check denetiminden geçti (çıkış kodu 0). Araçları ayrı dosyalara bölmek, tek bir hatanın bütün araçları birlikte durdurmasını önler.

// araclar.js, satır 98 (tek tırnaklı dize içinde kesme işareti):
'Önemli sayfalar Google Search Console ve Bing Webmaster Tools'ta dizinde (site haritası gönderilmiş).',

// Düzeltme: kesme işaretini kaçışlayın
'Önemli sayfalar Google Search Console ve Bing Webmaster Tools\'ta dizinde (site haritası gönderilmiş).',

Düzeltmeyi canlı siteye uygulamadan sınadık: aynı tarayıcıda araclar.js isteğini yerel olarak düzeltilmiş kopyayla yanıtlayıp beş sayfayı yeniden işledik. Düzeltilmiş dosya node --check komutundan geçti, konsol hatası kalmadı ve her aracın arayüzü oluştu:

Araç	Düzeltilmiş betikle (yerel sınama)	Sınama
Maliyet hesaplayıcı	4 form öğesi, konsol hatası yok	Varsayılan 30 sn video: 1.800 TL; intro seçilince: 900 TL
llms.txt oluşturucu	8 form öğesi, konsol hatası yok	Ad alanına yazılınca çıktının ilk satırı: # Deneme Ltd
GEO görünürlük testi	14 form öğesi, konsol hatası yok	18 soru, 10 kontrol maddesi
Reels kanca üretici	10 form öğesi, konsol hatası yok	10 kanca, 6 stil düğmesi
Video boyutu seçici	8 form öğesi, konsol hatası yok	8 platform düğmesi, ilk oran 9:16

Hesaplayıcının varsayılan çıktısı, sitenin yayımlanmış fiyat listesiyle uyuşuyor: 30 saniyelik video 1.800 TL, 15 saniyelik intro 900 TL (fiyat listesi). Araç sayfalarının hangi sorgulara cevap verdiği için maliyet hesaplayıcı, GEO görünürlük testi ve llms.txt sayfalarına bakın.

Googlebot bu sayfayı nasıl görür?

Googlebot araç sayfasını, ilk HTML’deki tüm metinle görür ve araç arayüzünün eksikliği sayfanın dizinlenecek metnini değiştirmez. İki betik dosyası da Googlebot’a açık ve 200 dönüyor; bu önemlidir, çünkü Google robots.txt ile engellenmiş dosyalardaki JavaScript’i çalıştırmaz.

Kaynak	HTTP	robots.txt (Googlebot)	Not
araclar.js	200	İzinli	text/javascript, 18093 bayt, defer ile yükleniyor
site.js	200	İzinli	text/javascript, 10693 bayt

Üç sonuç çıkıyor. Birincisi, sayfanın metni (cevap, tablolar, SSS) ilk HTML’de olduğu için render hatası dizinlenecek içeriği bozmaz; hatanın bedeli kullanıcıya ödettiği deneyimdir ve “ücretsiz araç” vaadinin boş kalmasıdır. İkincisi, hesaplayıcının sonucu bir kullanıcı seçimiyle oluşur ve Google’ın belgeleri işleme servisinin bu tür seçimleri yaptığını söylemez; bu yüzden aracın ne yaptığını ve sonucun nasıl yorumlanacağını metinde yazmak güvenlidir (bu sayfalarda yazılı). Üçüncüsü, JavaScript hataları kullanıcı ve tarayıcı tarafında sessizdir; yalnız konsola yazılır ve ancak render’ı kendiniz denediğinizde görürsünüz. robots.txt tarafı için robots.txt ve noindex farkı sayfasına bakın.

Kendi araç sayfanızda render hatası nasıl yakalanır?

Render hatasını yakalamak için betiği node --check ile denetler, sayfayı gerçek bir tarayıcıda açıp form öğelerini sayar ve konsol hatalarını toplarsınız. Aşağıdaki iki adım bu sayfadaki denetimin özetidir; ikinci adımın çıktısı 18.10.2026 03:42 tarihli gerçek sonuçtur.

# 1) Betiğin sözdizimini denetle (hata varsa satır numarasını verir)
node --check araclar.js

# 2) Sayfayı gerçek tarayıcıda aç, form öğelerini say, konsol hatalarını topla
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    tarayici = p.chromium.launch(channel="chrome", headless=True)
    sayfa = tarayici.new_page()
    hatalar = []
    sayfa.on("pageerror", lambda e: hatalar.append(str(e)))
    sayfa.goto("https://yademreklam.com/reklam-filmi-maliyet-hesaplama/", wait_until="networkidle")
    sayfa.wait_for_timeout(2500)
    print("form öğesi:", sayfa.locator(".yd-tool__body input, .yd-tool__body select").count())
    print("konsol hataları:", hatalar)
    tarayici.close()

İkinci adımın canlı çıktısı:

form öğesi: 0
konsol hataları: ["Unexpected identifier 'ta'"]

Google tarafında aynı görüntüyü Search Console’daki URL Denetleme aracında “Canlı URL’yi test et” ve “Taranan sayfayı göster” ile alırsınız; işlenmiş HTML, ekran görüntüsü ve konsol iletileri orada görünür. Bu kayıt yademreklam.com için bu denetime dahil değildir. Hesaplayıcı gibi etkileşimli bir bileşenin sonucunu ayrıca metinde de yazmak, hem kullanıcı hem tarayıcı için en güvenli yoldur.

Araç sayfası için JavaScript SEO kontrol listesi

Araç sayfası için JavaScript SEO kontrol listesi sekiz maddedir ve her madde bir komut ya da araçla doğrulanır.

1. Başlık, canonical ve robots etiketi ilk HTML’de mi? curl -s çıktısına bakın.
2. Sayfanın cevabı ve tabloları ilk HTML’de mi? JavaScript’i kapatıp sayfayı açın.
3. Bağlantılar href’li a öğesi mi? İlk HTML’de href’siz düğme ya da yalnız JavaScript olay dinleyicisiyle çalışan bağlantı olmasın.
4. Betik dosyaları 200 dönüyor ve robots.txt’te engelli değil mi?
5. Betiklerin sözdizimi geçerli mi? node --check her dosyada 0 dönmeli.
6. Gerçek tarayıcıda konsol hatası var mı? Başsız tarayıcıyla topladığınız pageerror listesi boş olmalı.
7. Araç arayüzü oluşuyor mu? Form öğesi sayısı sıfırdan büyük olmalı.
8. Araç çıktısının anlamı ayrıca metinde yazılı mı? Hesaplayıcıların fiyat, süre ve sınır bilgisi metinde de bulunmalı.

Hız ve etkileşim ölçümü ayrı bir konudur: JavaScript’in ana iş parçacığına bindirdiği yük WordPress Core Web Vitals sayfasında ölçüldü. Yapısal verinin işlenmesi için schema yapısal veri rehberine, bu denetimin sitenizde yapılması için SEO hizmeti sayfasına bakın.

Sık sorulan sorular