JavaScript SEO Rehberi: Arama Motorlarının JS İçerikleri Nasıl İşlediği

Özet: JavaScript ile oluşturulan içerikler, arama motorları tarafından farklı bir süreçle işlenir. Googlebot JavaScript'i render edebilir ancak bu süreç gecikmeli ve kaynak yoğundur. SSR, pre-rendering veya hibrit yaklaşımlar ile JavaScript SEO sorunlarını çözebilir ve içeriklerinizin doğru şekilde indekslenmesini sağlayabilirsiniz.

Modern web geliştirme dünyasında React, Vue, Angular ve benzeri JavaScript çerçeveleri yaygın olarak kullanılmaktadır. Bu çerçeveler zengin kullanıcı deneyimleri sunar ancak SEO açısından ciddi zorluklar yaratabilir. İçeriğiniz tamamen JavaScript ile oluşturuluyorsa, arama motorlarının bu içeriği görebilmesi garanti değildir.

Bu rehberde, arama motorlarının JavaScript içerikleri nasıl işlediğini, yaygın JS SEO sorunlarını ve çözüm stratejilerini kapsamlı biçimde ele alıyoruz.

Arama Motorları JavaScript'i Nasıl İşler?

Google'ın içerik işleme süreci üç aşamadan oluşur: tarama (crawling), render etme (rendering) ve indeksleme (indexing). Geleneksel HTML sayfalarda tarama ve indeksleme neredeyse eşzamanlı gerçekleşir. Ancak JavaScript içeriklerde render aşaması ek bir gecikme yaratır.

İki Dalgalı İndeksleme Süreci

• Birinci dalga: Googlebot sayfanın ham HTML'ini tarar. JavaScript çalıştırılmadan önceki içerik indekslenir.
• İkinci dalga: Google, render kuyruğunda sayfanın JavaScript'ini çalıştırır ve oluşturulan içeriği indeksler. Bu süreç saatler, günler hatta haftalar sürebilir.

Bu gecikme, özellikle haber siteleri veya sık güncellenen içerikler için ciddi bir sorundur. İçeriğiniz ikinci dalgayı beklerken rakipleriniz çoktan indekslenmiş olabilir.

Yaygın JavaScript SEO Sorunları

İçerik Görünürlüğü Sorunları

• Boş sayfa kaynağı: Sayfa kaynağında (view-source) yalnızca bir <div id="root"></div> görünüyorsa, tüm içerik JavaScript'e bağımlıdır.
• Meta etiketlerinin JS ile oluşturulması: Title, description ve canonical etiketleri JavaScript ile dinamik olarak ayarlanıyorsa, birinci dalga indekslemede eksik kalabilir.
• Bağlantıların JS ile yönetilmesi: onclick olay dinleyicileri ile yapılan yönlendirmeler Googlebot tarafından takip edilmez. Standart <a href> kullanılmalıdır.

Performans Sorunları

• Büyük JS paketleri: Sıkıştırılmamış veya bölünmemiş JavaScript dosyaları hem kullanıcı deneyimini hem de render süresini olumsuz etkiler.
• Render bütçesi tüketimi: Google'ın JavaScript render kapasitesi sınırlıdır. Büyük sitelerde tüm sayfalar render edilemeyebilir.
• API bağımlılıkları: Sayfa içeriğinin harici API çağrılarına bağlı olması, render süresini uzatır ve hata riskini artırır.

JavaScript SEO Çözüm Stratejileri

Sunucu Taraflı Render (SSR)

SSR, JavaScript'in sunucu tarafında çalıştırılarak tam HTML çıktısının tarayıcıya ve arama motorlarına gönderilmesidir. Next.js, Nuxt.js ve Angular Universal gibi çerçeveler SSR desteği sunar.

// Next.js SSR örneği
export async function getServerSideProps() {
  const data = await fetchData()
  return { props: { data } }
}

SSR'ın avantajları: içerik birinci dalgada indekslenir, LCP iyileşir ve sosyal medya paylaşım önizlemeleri doğru çalışır.

Statik Site Oluşturma (SSG)

SSG, sayfa içeriğinin derleme zamanında (build time) oluşturulmasıdır. Sık değişmeyen içerikler için idealdir. Next.js'in getStaticProps fonksiyonu veya benzeri çerçevelerdeki statik oluşturma özellikleri kullanılabilir.

Dinamik Render (Dynamic Rendering)

Dinamik render, kullanıcı aracısına (user-agent) göre farklı içerik sunma yöntemidir. Gerçek kullanıcılara JavaScript tabanlı sürüm, arama motoru botlarına ise önceden render edilmiş statik HTML sunulur. Google bu yöntemi geçici bir çözüm olarak kabul eder, ancak uzun vadede SSR tercih edilmelidir.

Hibrit Yaklaşım

Modern çerçeveler hibrit yaklaşımları destekler. Kritik sayfalar (ana sayfa, ürün sayfaları, blog yazıları) SSR veya SSG ile oluşturulurken, kullanıcı paneli gibi indekslenmesi gerekmeyen sayfalar istemci taraflı render ile sunulabilir.

JavaScript SEO Kontrol Listesi

• Sayfa kaynağında (view-source) kritik içerik HTML olarak görünüyor mu?
• Meta etiketleri (title, description, canonical) sunucu tarafında mı oluşturuluyor?
• Dahili bağlantılar standart <a href> etiketleri ile mi yapılıyor?
• JavaScript dosyaları sıkıştırılmış ve bölünmüş mü (code splitting)?
• Robots.txt dosyası JavaScript ve CSS dosyalarını engelliyor mu?
• Google Search Console'daki URL denetleme aracında render edilmiş sayfa doğru görünüyor mu?
• Lazy load edilen içerikler Googlebot'un görebildiği bölümde mi yer alıyor?

Sıkça Sorulan Sorular

Google JavaScript'i tam olarak render edebiliyor mu?

Google, Chromium tabanlı bir render motoru kullanarak JavaScript'i çalıştırabilir. Ancak bu süreç gecikmeli olup her sayfanın render edileceği garanti değildir.

React veya Vue kullanıyorsam SEO'dan vazgeçmem mi gerekiyor?

Hayır. Next.js (React için) veya Nuxt.js (Vue için) gibi SSR destekli çerçeveler kullanarak JavaScript tabanlı sitelerde mükemmel SEO performansı elde edebilirsiniz.

Single Page Application (SPA) SEO için uygun mu?

Saf SPA mimarisi SEO açısından zorlayıcıdır. SSR veya hibrit yaklaşım eklemeden SEO başarısı elde etmek oldukça güçtür.

Sonuç

JavaScript SEO, modern web geliştirmenin kaçınılmaz bir gerçeğidir. Anahtar, arama motorlarının içeriğinizi ilk dalga indekslemede görebilmesini sağlamaktır. SSR, SSG veya hibrit yaklaşımlarla JavaScript içeriklerinizi indekslemeye hazır hale getirin. VixSEO ile Google Search Console verilerinizi takip ederek indeksleme sorunlarını erken tespit edebilirsiniz.