JavaScript SEO Nedir? Google JavaScript Sayfalarını Nasıl İşler ve Dizine Ekler?

JavaScript SEO nedir ve neden ayrı bir çalışma alanıdır?

JavaScript SEO, içeriği ya da bağlantıları JavaScript ile oluşturulan sayfaların taranıp işlenerek dizine eklenmesini sağlayan teknik SEO alt dalıdır. Amaç, tarayıcıda görünen içeriğin arama motoru tarafından da eksiksiz görülmesidir. Teknik SEO çalışmasının bu alt dalı, özellikle sayfanın nasıl üretildiğine odaklanır.

Ayrı bir alan olmasının nedeni basittir: içerik ilk HTML yanıtında yoksa görünürlük render aşamasına bağlıdır. Google Search Central'ın JavaScript SEO temel bilgileri belgesi, JavaScript ile oluşturulan sayfaların taramanın ardından ayrı bir işleme adımından geçtiğini anlatır. Bu adımda yaşanan bir aksaklık, içeriğin dizine hiç girmemesine ya da eksik girmesine yol açabilir.

Sorun en çok tek sayfalı uygulamalarda ve bileşen tabanlı çerçevelerle kurulan sitelerde görülür. Bu yapılarda ilk HTML çoğu zaman boş bir kapsayıcıdan ibarettir. Başlıklar, metinler ve menü bağlantıları tarayıcıda betik çalışınca eklenir.

Bağlantılar da aynı riski taşır. Ziyaretçiye bağlantı gibi görünen bir öğe, href özniteliği olan gerçek bir <a> etiketi değilse tarayıcı için yalnızca bir tıklama alanıdır. Bu yüzden JavaScript SEO, içerik kadar bağlantı yapısını da denetler.

Google JavaScript içeren bir sayfayı nasıl tarar, işler ve dizine ekler?

Google, JavaScript içeren bir sayfayı üç aşamada ele alır: tarama, render (sayfanın çalıştırılıp görüntüye dönüştürülmesi) ve dizine ekleme. Google Search Central'ın JavaScript SEO temel bilgileri belgesine göre sayfa önce taranır, ardından render kuyruğuna girer ve içerik işlendikten sonra dizine eklenir.

Arama motorlarının sayfaları nasıl işlediği genel tarama mantığıyla açıklanır. Burada yalnız JavaScript'e özgü akış ele alınır.

1. URL keşfi ve tarama: Googlebot, bağlantılardan ve site haritalarından bulduğu adresi robots.txt kurallarına uygunsa ister ve ilk HTML yanıtını alır. Bu aşamada yalnız sunucunun gönderdiği ham HTML görülür.
2. Render kuyruğu ve işleme: Sayfa, render kuyruğuna alınır. Google belgesine göre sayfayı Chromium tabanlı bir oluşturucu çalıştırır; JavaScript yürütülür ve sonradan eklenen içerik görünür hâle gelir.
3. Dizine ekleme: Bu aşamadan sonra sayfadaki bağlantılar da aynı çıktıdan okunur ve yeni taramalar için sıraya alınır.

Render her zaman taramanın hemen ardından gerçekleşmeyebilir; kuyrukta beklemek gecikme yaratabilir. Bu yüzden başlık, meta açıklama, rel="canonical" ve noindex gibi sinyallerin ilk HTML'de doğru yer alması önemlidir. Bu sinyaller JavaScript ile sonradan değiştirildiğinde Google'ın ilk ve ikinci görüşü birbirinden ayrışabilir. JavaScript ile sonradan değişen etiketlerin ilk HTML ile uyumunu, SEO çalışmalarımızda render öncesi ve sonrası karşılaştırmalı tarama ile birlikte kontrol ederiz.

SSR, CSR ve statik üretim arasında hangisi SEO için uygundur?

Tek doğru seçim yoktur; karar içeriğin ne sıklıkla değiştiğine bağlıdır. İçeriğin ilk HTML yanıtında yer aldığı yöntemler (sunucu tarafı render ve statik üretim) Google için genellikle daha az risk taşır. İstemci tarafı render ise içeriğin görünmesini JavaScript'in çalışmasına bırakır.

Dinamik render, Google'ın dinamik oluşturma belgesinde geçici bir çözüm olarak anılır; uzun vadeli bir yöntem olarak önerilmez. Sitenin yapısını planlarken web tasarımında SEO ilkelerini baştan düşünmek bu seçimi kolaylaştırır.

Pratikte içerik nadiren değişiyorsa statik üretim, sık değişiyorsa sunucu tarafı render öne çıkar. İstemci tarafı render, dizine eklenmesi beklenmeyen alanlar için daha uygundur.

JavaScript sitelerde en sık hangi SEO sorunları çıkar?

JavaScript sitelerde en sık görülen sorunlar, Google'ın içeriğe ya da bağlantıya ulaşmasını engelleyen teknik tercihlerden doğar. Kaynak dosyaların engellenmesi, taranamayan bağlantılar ve yalnızca istemcide değişen meta bilgileri bunların başında gelir. Google Search Central'ın JavaScript sorunlarını düzeltme belgesi de benzer başlıkları ele alır.

Aşağıdaki liste sorunları görülme sıklığına göre değil, kontrol kolaylığına göre dizer. Bu sorunların bir kısmı yaygın SEO hataları arasında da yer alır, ancak JavaScript ile daha sık ortaya çıkar.

<!-- Uygun: tarayıcı ve Google hedef adresi görür -->
<a href="https://example.com/urunler">Ürünler</a>

<!-- Uygun değil: hedef adres yok, yalnızca olay var -->
<span onclick="location.href='/urunler'">Ürünler</span>

<!-- Uygun değil: href yok ya da boş -->
<a href="#" onclick="git('/urunler')">Ürünler</a>

• Engellenen kaynak dosyalar: robots.txt ile JavaScript ya da CSS dosyalarının engellenmesi, Google'ın sayfayı tam işlemesini zorlaştırabilir.
• Olay tabanlı bağlantılar: Bağlantının a href yerine tıklama olayıyla oluşturulması, tarayıcının bağlantıyı izlemesini güçleştirebilir.
• # parçalı URL'ler: Adresin # sonrasında değişmesi, farklı sayfaların tek adres gibi görülmesine yol açabilir.
• Geç yüklenen içerik: Kullanıcı eylemiyle açılan ya da gecikmeli gelen içerik, işleme sırasında görülmeyebilir.
• Yalnız istemcide değişen meta bilgisi: Başlık, meta açıklama ve canonical etiketinin yalnızca tarayıcıda güncellenmesi, tutarsız sinyaller üretebilir.
• Yumuşak 404 ve hata durumları: Sayfa bulunamadığında 200 durum kodu ile boş ya da hata içerikli bir sayfa dönmesi, dizine girmemesi gereken sayfaların dizinde kalmasına neden olabilir.

Bağlantı sorunu en kolay doğrulanan maddedir. MDN Web Docs'a göre a öğesi, href özniteliğiyle gerçek bir hedef adresi tanımlar. Aşağıdaki örnek, uygun ve uygun olmayan biçimi karşılaştırır.

JavaScript içeriğin Google'da görünüp görünmediği nasıl test edilir?

JavaScript içeriğin görünürlüğü, Google'ın sayfayı işledikten sonra gördüğü HTML ile sizin tarayıcıda gördüğünüz içeriğin karşılaştırılmasıyla test edilir. Temel soru şudur: önemli metin, bağlantı ve etiketler işlenmiş HTML'de var mı? Aşağıdaki beş adım bu soruyu sırayla yanıtlar.

Testi yalnız önemli şablonlarda, örneğin ürün, kategori ve yazı sayfalarında yapmak yeterlidir. Search Console erişimi bu akışın ilk adımını kolaylaştırır.

site:example.com "sayfadan alınan örnek metin parçası"

1. Search Console URL Denetimi aracında adresi sorgulayın ve işlenmiş HTML'e bakın. Ana metin, başlıklar ve bağlantılar orada yer almalıdır.
2. Canlı testi çalıştırıp ekran görüntüsünü inceleyin. Ekranda içerik eksikse, bileşen yüklenmemiş ya da engellenmiş bir kaynak olabilir.
3. Ham HTML ile işlenmiş HTML'i karşılaştırın. Ham kaynak, tarayıcıda “sayfa kaynağını görüntüle” ile; işlenmiş hâl ise geliştirici araçlarının öğe panelinden alınır. Fark büyükse içerik JavaScript'e bağımlıdır.
4. Google'da site:example.com sorgusuna sayfadan bir metin parçasını tırnak içinde ekleyin. Parça sonuçta çıkıyorsa içerik dizine girmiş olabilir.
5. Tarayıcıda JavaScript'i kapatıp sayfayı açın. Menü, ana metin ve iç bağlantılar kayboluyorsa bu alanlar yalnız işleme aşamasına bağlıdır.

site: sorgusu kesin bir dizin raporu değildir; yalnız yönlendirici bir ipucu verir. Bulguları geniş bir site denetimi içinde değerlendirmek daha sağlıklıdır.

JavaScript SEO için pratik kontrol listesi ve en iyi uygulamalar nelerdir?

JavaScript SEO kontrol listesi, sayfanın içeriğinin ve bağlantılarının arama motoru tarafından eksiksiz görülmesini sağlayan yayın öncesi denetim maddeleridir. Temel ilke şudur: kritik içerik ve ana bağlantılar ilk HTML'de bulunmalı, betikler yalnız bunları zenginleştirmelidir.

Aşağıdaki maddeler her yayından önce gözden geçirilebilir.

# Yanlış: betik ve stil dosyaları engelleniyor
User-agent: *
Disallow: /assets/js/
Disallow: /assets/css/

# Doğru: kaynaklara erişim açık
User-agent: *
Allow: /assets/js/
Allow: /assets/css/
Disallow: /yonetim/

• Kritik içerik ilk HTML'de olsun: Başlık, ana metin ve ürün bilgisi betik çalışmadan önce de kaynakta yer almalıdır.
• Ana bağlantılar gerçek bağlantı olsun: Menü ve sayfa geçişleri <a href="…"> ile verilmeli, yalnız tıklama olayına bağlanmamalıdır.
• Her yönlendirme için benzersiz title ve açıklama sunun: Tek sayfalık uygulamalarda her görünüm kendi başlığını ve meta açıklamasını almalıdır.
• Geçmiş API'si ile temiz URL kullanın: # parçalı adresler yerine history.pushState ile oluşan yollar tercih edilmelidir.
• JavaScript ve CSS dosyalarını engellemeyin: Google'ın sayfayı doğru işleyebilmesi için bu kaynaklara erişimi açık tutun.
• Gereksiz ağır betikleri azaltın: Kullanılmayan kütüphaneleri çıkarın, bölünmüş paketlerle yükü hafifletin.
• Yayın öncesi render testi yapın: İşlenmiş HTML'de içeriğin ve bağlantıların göründüğünü doğrulayın.

Aşağıdaki örnekte ilk blok yanlış, ikinci blok doğru kurgudur. Betik yükünün hıza etkisi ise Core Web Vitals başlığında ayrıca ele alınır.

JavaScript SEO için ne zaman uzman ve geliştirici desteği gerekir?

JavaScript SEO için uzman ve geliştirici desteği, sorunun sayfa ayarlarıyla değil mimariyle ilgili olduğu durumlarda gerekir. Render yönteminin değişmesi, büyük bir ürün kataloğu ya da çerçeve geçişi bu durumların başında gelir. Meta etiket ve içerik düzeltmeleri içerik ekibiyle çözülebilir, ancak içeriğin sunucuda mu tarayıcıda mı oluşacağı kararı yazılım ekibinin işidir.

Birkaç işaret desteğin zamanının geldiğini gösterir. Ürün ya da kategori sayfaları dizine girmiyorsa, ham HTML ile işlenmiş HTML arasında büyük fark varsa ya da yeni sayfalar uzun süre keşfedilmiyorsa kök neden çoğu zaman kodun yapısındadır. Bu durumda yüzeysel düzeltmeler sonuç vermeyebilir.

Süreçte iki ekibin ortak çalışması belirleyicidir. SEO tarafı gereksinimleri yazar: hangi sayfaların taranabilir bağlantılarla erişileceği, hangi içeriğin ilk HTML yanıtında bulunacağı, durum kodlarının ve canonical etiketinin nasıl davranacağı. Yazılım tarafı bunları uygulanabilir bir mimariye çevirir ve yayın öncesinde sınar. Gereksinimler yazılı olmazsa bu iş genellikle sonradan pahalı bir düzeltmeye dönüşür.

Sitenizin yapısı özel bir çözüm gerektiriyorsa özel yazılım çalışması, render mimarisini baştan arama görünürlüğüne göre kurmanıza yardımcı olabilir. Hangi sorunun öncelikli olduğunu belirlemek için SEO danışmanlığı ise teknik bulguları sıraya koyar ve geliştirici ekibe net bir iş listesi verir.