javascript seo sorunlari: Tarama ve İndeksleme Rehberi

JavaScript SEO sorunları, arama motorlarının bir sayfadaki kritik içeriği, bağlantıları veya teknik sinyalleri doğru zamanda görememesiyle ortaya çıkar. Çözüm; JavaScript’i tamamen kaldırmak değil, SEO açısından önemli HTML içeriğini erişilebilir, taranabilir, oluşturulabilir ve doğrulanabilir hâle getirmektir.

Önemli Noktalar

• Arama motoru için önemli içerik yalnızca tarayıcıda JavaScript çalıştıktan sonra görünmemelidir.
• Google, JavaScript kullanan sayfaları tarayabilir; ancak tarama, oluşturma ve indeksleme ayrı süreçlerdir.
• İç bağlantılar gerçek `href` özniteliğine sahip HTML bağlantıları olarak sunulmalıdır.
• Başlık, canonical, robots yönergeleri ve yapılandırılmış veri ham ve oluşturulmuş HTML’de kontrol edilmelidir.
• CSR, SSR ve SSG seçimi sayfanın SEO önceliğine, içerik güncelleme sıklığına ve teknik mimariye göre yapılmalıdır.
• Ağır JavaScript, oluşturma süresini ve etkileşim performansını olumsuz etkileyebilir.
• Dinamik oluşturma, kalıcı mimari yerine belirli durumlarda geçici bir çözüm olarak değerlendirilmelidir.

JavaScript SEO nedir?

JavaScript SEO, JavaScript ile çalışan web sitelerinin arama motorları tarafından keşfedilmesini, taranmasını, oluşturulmasını ve indekslenmesini güvence altına alan teknik optimizasyon sürecidir. Özellikle React, Vue, Angular ve benzeri uygulamalarda sayfa ilk açıldığında gönderilen HTML ile kullanıcı tarayıcısında sonradan oluşan içerik birbirinden farklı olabilir.

Klasik HTML sayfasında başlık, metin ve bağlantılar sunucu yanıtında hazır bulunur. Client-side rendering (CSR) kullanan bir uygulamada ise sunucu çoğu zaman yalnızca bir uygulama kabuğu gönderir. Sayfanın asıl içeriği API yanıtı, JavaScript dosyaları ve istemci tarafı yönlendirme tamamlandıktan sonra görünür.

Bu mimari kullanıcı deneyimi için esnek olabilir; ancak SEO açısından kritik içeriklerin oluşturma sürecine bağımlı olması risk yaratır. Google’ın dokümantasyonuna göre JavaScript kullanan sayfalar tarama, oluşturma ve indeksleme aşamalarından geçer. Bu aşamalar aynı anda gerçekleşmediği için içerik keşfi veya güncellenmesi gecikebilir.

JavaScript SEO sorunları neden oluşur?

JavaScript SEO sorunlarının temel nedeni, kullanıcıya gösterilen sayfa ile tarayıcı veya arama motorunun ilk aldığı HTML arasındaki farktır. İçerik yalnızca JavaScript çalıştıktan sonra ortaya çıkıyorsa kaynak, hata veya erişim problemi oluştuğunda arama motoru boş ya da eksik bir sayfa görebilir.

En sık karşılaşılan nedenler şunlardır:

• İçeriğin yalnızca API çağrısıyla yüklenmesi
• JavaScript dosyalarının robots.txt veya sunucu kurallarıyla engellenmesi
• Sunucu tarafında hatalı durum kodu gönderilmesi
• SPA rotalarının doğrudan açıldığında 404 vermesi
• İç bağlantıların gerçek HTML bağlantısı yerine tıklama olaylarıyla kurulması
• Meta etiketlerinin hatalı veya geç oluşturulması
• Canonical ve robots yönergelerinin sayfalar arasında tutarsız olması
• JavaScript’in kritik içeriği gizlemesi ya da değiştirmesi
• Ağır paketlerin sayfanın oluşturulmasını geciktirmesi
• Lazy loading uygulamasının içerik ve bağlantıları erişilemez hâle getirmesi

Bir sayfanın tarayıcıda doğru görünmesi, arama motorunun aynı içeriği doğru biçimde indekslediğini kanıtlamaz. Denetim, hem ham kaynak hem de JavaScript çalıştıktan sonraki DOM üzerinden yapılmalıdır.

Google JavaScript içeriğini nasıl işler?

Googlebot önce URL’yi tarar ve sunucudan yanıt alır. İlk HTML yanıtındaki bağlantılar ve temel sinyaller işlenir. Daha sonra uygun sayfalar oluşturma sürecine alınır; JavaScript çalıştırıldıktan sonra oluşan içerik, bağlantılar ve yapılandırılmış veri değerlendirilebilir.

Bu nedenle “Google JavaScript okuyamaz” yaklaşımı güncel ve eksik bir genellemedir. Asıl soru, JavaScript’in çalıştırılıp çalıştırılamadığı değil; kritik sayfa öğelerinin güvenilir biçimde oluşup oluşmadığıdır.

Oluşturma için gerekli JavaScript dosyası engellenmişse, API isteği başarısız oluyorsa veya uygulama yalnızca tarayıcıya özgü özelliklere dayanıyorsa Google eksik içerik görebilir. Ayrıca JavaScript desteklemeyen ya da sınırlı çalıştıran diğer tarayıcı ve yapay zekâ sistemleri de ilk HTML’ye bağımlı olabilir. Google, diğer arama motorlarının JavaScript üretimli içeriği görmezden gelebileceğini belirtir.

CSR, SSR ve SSG: Hangisi daha uygun?

Tek bir oluşturma modeli her proje için doğru değildir. Seçim; içerik türü, güncelleme sıklığı, kişiselleştirme seviyesi, altyapı ve SEO önceliğine göre yapılmalıdır.

CSR kullanılıyorsa SEO açısından kritik metin, başlık ve bağlantıların oluşturma sonrasında mutlaka erişilebilir olduğu doğrulanmalıdır. SSR veya SSG ise ilk yanıtta anlamlı HTML sunarak oluşturma bağımlılığını azaltır.

Yeni bir proje planlanırken arama odaklı sayfalar için SSR, SSG veya hibrit yaklaşım genellikle daha kontrol edilebilirdir. Mevcut CSR uygulamasında ise tüm sistemi değiştirmek yerine önce gelir ve organik görünürlük açısından kritik şablonlar ele alınabilir.

JavaScript SEO sorunları nasıl tespit edilir?

JavaScript SEO denetimi, yalnızca Lighthouse puanına veya tarayıcı görünümüne bakılarak tamamlanmaz. Aşağıdaki süreç, sorunları teknik kaynağıyla birlikte belirlemeye yardımcı olur:

1. Ham HTML’yi inceleyin.

Sayfanın kaynak kodunda başlık, ana metin, H1, canonical, robots yönergesi ve iç bağlantıların bulunup bulunmadığını kontrol edin.

1. Oluşturulmuş DOM’yi karşılaştırın.

JavaScript çalıştıktan sonra ortaya çıkan HTML ile ilk yanıt arasındaki farkları belirleyin. Kritik içerik yalnızca DOM’de görünüyorsa oluşturma bağımlılığını not edin.

1. HTTP durum kodlarını test edin.

Geçerli sayfalar 200, taşınan sayfalar uygun 3xx, bulunamayan sayfalar ise doğru 404 veya 410 yanıtı vermelidir. Uygulama kabuğunun her rotaya 200 döndürmesi soft 404 sorunlarına yol açabilir.

1. Robots kurallarını inceleyin.

Sayfanın kendisi, JavaScript dosyaları, CSS dosyaları ve API uç noktaları yanlışlıkla engellenmemelidir.

1. İç bağlantıları tarayın.

Bağlantılar standart `a` elementi ve geçerli `href` değeri kullanmalıdır. Yalnızca `onclick` olayına veya özel buton mantığına dayanan navigasyon, keşfi zorlaştırabilir.

1. Arama araçlarında doğrulayın.

Google Search Console URL Denetimi, oluşturulmuş sayfanın nasıl göründüğünü incelemek için kullanılabilir. Yapılandırılmış veri için oluşturulmuş HTML doğrulanmalıdır.

1. Mobil ve yavaş ağ senaryolarını test edin.

İçeriğin zayıf cihazlarda, gecikmeli ağlarda veya JavaScript hatası oluştuğunda ne kadar süre sonra göründüğünü ölçün.

JavaScript bağlantıları nasıl SEO uyumlu yapılır?

İç bağlantılar, sayfa mimarisinin ve URL keşfinin temelidir. En güvenilir yöntem, anlamlı anchor text içeren standart HTML bağlantıları kullanmaktır. JavaScript bu bağlantıyı geliştirebilir; ancak bağlantının varlığı yalnızca bir olay dinleyicisine bırakılmamalıdır.

Doğru yaklaşımda:

• Her önemli URL’ye gerçek `href` ile bağlantı verilir.
• Anchor text hedef sayfanın konusunu açıklar.
• Bağlantı yalnızca görsel bir simgeye veya tıklanabilir `div` elementine bağlanmaz.
• SPA rotaları doğrudan açıldığında da sunucu tarafından karşılanır.
• Hash tabanlı yönlendirme yerine kalıcı ve anlamlı URL yapısı kullanılır.
• Sayfa değişimlerinde title, canonical ve robots sinyalleri güncellenir.

Google, JavaScript ile DOM’ye eklenen bağlantıların da uygun HTML bağlantısı olarak oluşturulması hâlinde işlenebileceğini belirtir. Yine de kritik bağlantıları ilk HTML’de sunmak, keşif ve denetim açısından daha sağlam bir tercihtir.

Meta etiketleri ve yapılandırılmış veri nasıl kontrol edilir?

Title, meta description, canonical ve robots yönergeleri sayfanın arama motoruna verdiği temel sinyallerdir. Bu öğeler JavaScript ile oluşturulabilir; ancak rota değişimlerinde yanlış sayfaya ait değerlerin kalması veya etiketlerin hiç oluşmaması sık görülen sorunlardır.

Her indekslenebilir URL için şu kontroller yapılmalıdır:

• Tek ve açıklayıcı bir title bulunuyor mu?
• Meta description doğru sayfa içeriğini yansıtıyor mu?
• Canonical URL, tercih edilen sürümü gösteriyor mu?
• Robots yönergesi yanlışlıkla `noindex` içeriyor mu?
• Hreflang kullanılıyorsa karşılıklı ve tutarlı mı?
• Yapılandırılmış veri, görünür içerikle uyumlu mu?
• Aynı sayfaya birden fazla çelişkili schema ekleniyor mu?

JavaScript ile JSON-LD eklemek mümkündür. Google, oluşturulmuş DOM içinde bulunan ve desteklenen yapılandırılmış veriyi işleyebilir; ancak uygulamanın test edilmesi gerekir.

JavaScript performansı SEO’yu nasıl etkiler?

JavaScript’in SEO etkisi yalnızca indekslemeyle sınırlı değildir. Büyük dosyalar indirme, ayrıştırma ve çalıştırma süresini artırarak sayfanın etkileşime hazır hâle gelmesini geciktirebilir. Gereksiz script’ler ana iş parçacığını meşgul ederek kullanıcı deneyimini zayıflatabilir.

Performans iyileştirmelerinde şu sırayı izleyin:

1. Kritik olmayan JavaScript’i erteleyin.
2. Paketleri kod bölme yöntemiyle küçültün.
3. Kullanılmayan bağımlılıkları ve polyfill’leri kaldırın.
4. Üçüncü taraf script’lerini işlev ve gereklilik açısından denetleyin.
5. Kritik içeriği sunucu veya derleme aşamasında üretin.
6. Etkileşim işleyicilerini ve uzun görevleri bölün.
7. Görsellerde boyut alanı tanımlayın ve yükleme stratejisini içerik önemine göre belirleyin.
8. Gerçek kullanıcı verileriyle performansı düzenli izleyin.

Core Web Vitals, yükleme, etkileşim ve görsel kararlılık gibi kullanıcı deneyimi boyutlarını ölçer. Bu metrikler JavaScript kaynaklı gecikmeleri ve arayüz sorunlarını görünür hâle getirebilir.

Mimoza Bilişim’in sayfa hızı optimizasyonu rehberi ile JavaScript, kaynak önceliği ve kullanıcı deneyimi arasındaki ilişkiyi daha ayrıntılı inceleyebilirsiniz. Etkileşim gecikmeleri için INP metriği rehberine bakmak da faydalıdır.

Dinamik oluşturma ne zaman düşünülmeli?

Dinamik oluşturma, botlara önceden oluşturulmuş HTML, kullanıcılara ise JavaScript tabanlı sürüm sunan bir yaklaşımdır. JavaScript içeriğinin bazı tarayıcılar veya arama sistemleri tarafından alınamadığı durumlarda geçici bir çözüm olabilir.

Ancak bu yöntem iki farklı çıktı üretme, önbellekleme, kullanıcı aracısı tespiti ve içerik tutarlılığı gibi ek operasyonel yükler getirir. Bu nedenle yeni bir projede ilk tercih olarak değerlendirilmemelidir. Google, dinamik oluşturmayı kalıcı çözümden çok bir geçiş veya destek yaklaşımı olarak tanımlar.

Karar verirken şu kriterleri kullanın:

• Kritik sayfaların ilk HTML’de sunulup sunulamayacağı
• Mevcut uygulamanın SSR veya SSG’ye taşınma maliyeti
• İçeriklerin güncellenme sıklığı
• Farklı botlara sunulan çıktının eşdeğer olup olmadığı
• Önbellek ve invalidation süreçlerinin yönetilebilirliği
• Ekipte frontend, backend ve SEO denetimi için gerekli uzmanlığın bulunması

Uygulanabilir JavaScript SEO kontrol listesi

Yayın öncesinde ve önemli frontend değişikliklerinden sonra şu listeyi kullanın:

• [ ] Kritik metin ilk HTML yanıtında veya güvenilir SSR/SSG çıktısında mevcut.
• [ ] Her önemli URL doğrudan açıldığında doğru içerik ve 200 durum kodu döndürüyor.
• [ ] İç bağlantılar standart `href` özniteliği taşıyor.
• [ ] Title, H1, canonical ve robots yönergeleri rota bazında doğru.
• [ ] JavaScript ve CSS kaynakları taramaya açık.
• [ ] API çağrısı başarısız olduğunda sayfa tamamen boş kalmıyor.
• [ ] Yapılandırılmış veri oluşturulmuş HTML’de doğrulanıyor.
• [ ] Lazy loading, kritik metin veya bağlantıları geciktirmiyor.
• [ ] JavaScript paketleri ölçülüyor ve gereksiz kodlar kaldırılıyor.
• [ ] Mobil cihazlarda etkileşim ve görsel kararlılık test ediliyor.
• [ ] Ham HTML ile oluşturulmuş HTML düzenli olarak karşılaştırılıyor.

Daha kapsamlı bir uygulama için JavaScript SEO ve dinamik render rehberini inceleyebilirsiniz. JavaScript kaynaklı layout değişimleri için CLS sorunu çözümü rehberi de tamamlayıcı bir kaynaktır.

Sonuç

JavaScript SEO sorunları, kullanılan framework’ten çok uygulamanın arama motorlarına ne sunduğuyla ilgilidir. Kritik içerik, bağlantılar ve teknik sinyaller güvenilir HTML içinde erişilebilir olmalı; JavaScript ise bu temeli desteklemelidir.

Başarılı bir yaklaşım; doğru oluşturma modelini seçmek, ham ve oluşturulmuş HTML’yi karşılaştırmak, standart bağlantılar kullanmak, meta sinyallerini doğrulamak ve performansı gerçek kullanıcı verileriyle izlemektir. Böylece site yalnızca Google için değil, farklı tarayıcılar, arama sistemleri ve içerik keşif araçları için de daha anlaşılır ve dayanıklı hâle gelir.