Modern web geliştirme, React, Vue ve Angular gibi JavaScript çerçevelerine büyük ölçüde kaydı. Bu çerçeveler harika, uygulama benzeri kullanıcı deneyimleri yaratırken, doğru yapılandırılmazlarsa arama motorları için önemli engeller oluşturabilirler.
Temel sorun Oluşturma (Rendering)'dır. Googlebot zekidir, ancak bir insan kullanıcı değildir. İçeriğiniz tamamen tarayıcıdaki JavaScript yürütmesine bağlıysa, görünmez olma riskiniz vardır.
1. Sorun: İstemci Tarafı Oluşturma (CSR)
Varsayılan olarak, çoğu Tek Sayfalı Uygulama (SPA), İstemci Tarafı Oluşturma kullanır.
Nasıl çalışır:
Sunucu neredeyse boş bir HTML dosyası (genellikle sadece bir <div id="root">) gönderir. Tarayıcı daha sonra büyük bir JavaScript paketi indirir, yürütür ve sayfayı içerikle doldurur.
Google ne görür:
Googlebot URL'yi ilk taradığında, boş HTML kabuğunu görür.
Risk:
Google JavaScript çalıştırabilir, ancak muazzam işlem gücü gerektirir. Bu nedenle, Google bu işlemi erteler.
- İlk Dalga (Tarama): Google boş kabuğu görür.
- Sıra: Sayfa saatlerce veya günlerce bir "Oluşturma Sırası"nda bekler.
- İkinci Dalga (Oluşturma): Google içeriği görmek için sonunda JS'yi yürütür.
Sonuç: Saf CSR, oluşturma zaman aşımına uğrarsa gecikmeli indekslemeye ve kaçırılan içeriğe yol açabilir.
2. Çözüm: Sunucu Tarafı Oluşturma (SSR) ve SSG
Google'ın içeriğinizi hemen görmesini sağlamak için oluşturma işlemini kullanıcının tarayıcısından sunucuya (veya yapı zamanına) taşımanız gerekir.
A. Sunucu Tarafı Oluşturma (SSR)
Nasıl çalışır: Bir bot (veya kullanıcı) bir sayfa istediğinde, sunucu JavaScript'i yürütür, tam HTML dizesini oluşturur ve tarayıcıya tamamen doldurulmuş bir sayfa gönderir.
- Fayda: Googlebot, ilk HTML yanıtında tam içeriği (metin, bağlantılar, meta veriler) görür. İndeksleme anlıktır.
- Çerçeveler:
- React: Next.js veya Remix kullanın.
- Vue: Nuxt.js kullanın.
- Angular: Angular Universal kullanın.
B. Statik Site Üretimi (SSG)
Nasıl çalışır: Tüm HTML sayfalarınızı yapı zamanında (dağıtımdan önce) oluşturursunuz. Sunucu basit statik HTML dosyaları sunar.
- Fayda: Son derece hızlı performans (Önemli Web Verileri için harika) ve mükemmel SEO.
- Kullanım Durumu: Bloglar, pazarlama siteleri ve pSEO projeleri ("pSEO Wizard"ınız gibi).
- Çerçeveler: Next.js, Gatsby, Astro.
Karşılaştırma: CSR vs. SSR vs. SSG
| Özellik | CSR (İstemci Tarafı) | SSR (Sunucu Tarafı) | SSG (Statik) |
|---|---|---|---|
| İlk HTML | Boş (Yükleniyor...) | Tam İçerik | Tam İçerik |
| SEO Dostu | Düşük / Riskli | Yüksek | Yüksek |
| Sunucu Yükü | Düşük | Yüksek | Düşük |
| En İyisi | Panolar, Özel Uygulamalar | Dinamik Akışlar, Sosyal Ağlar | Bloglar, Dokümanlar, Açılış Sayfaları |
3. JS SEO İçin Kritik En İyi Uygulamalar
SSR ile bile geliştiriciler genellikle indekslemeye zarar veren hatalar yaparlar.
A. Gerçek Bağlantılar Kullanın (<a href>)
Googlebot, bağlantıları izleyerek yeni sayfalar keşfeder.
- Kötü:
<div onClick={goToPage}>Ürün</div>(Googlebot tıklamaz). - İyi:
<a href="/product">Ürün</a>(Googlebot bunu izler).
Not: Next.js gibi çerçevelerde, temel bir <a> etiketi oluşturan <Link> bileşenini kullanın.
B. Meta Verileri Yönetme (<head>)
Tek Sayfalı Bir Uygulamada, <title> ve <meta> etiketleri genellikle her sayfada statik kalır (ör. "Uygulamam").
Düzeltme: Her rota için dinamik meta veriler eklemelisiniz.
- React: react-helmet veya Next.js Metadata API kullanın.
- Vue: vue-meta kullanın.
Doğrulama: Sayfalar arasında gezinirken tarayıcı sekmesindeki başlığın değiştiğini kontrol edin.
C. Kaynakları Engellemeyin
robots.txt dosyanızın JavaScript (.js) veya CSS (.css) dosyalarınızı engellemediğinden emin olun. Google'ın sayfayı doğru şekilde oluşturması için bu dosyalara erişmesi gerekir.
4. JS Uygulamanızı Nasıl Test Edersiniz
Asla tahmin etmeyin; Google'ın ne gördüğünü her zaman doğrulayın.
- Google Search Console (URL Denetimi): URL'nizi girin ve "Test Live URL"ye tıklayın. "View Tested Page" > "Screenshot"a tıklayın. Sonuç: Ekran görüntüsü boşsa veya bir yükleme döndürücüsü gösteriyorsa, Google içeriğinizi göremez. Metni görürseniz, güvendesiniz.
- Zengin Sonuçlar Testi: Bu araç gerçek Google oluşturma motorunu çalıştırır. Şema İşaretlemenizi algılayabiliyorsa, bu genellikle sayfayı başarıyla oluşturduğu anlamına gelir.
- Chrome'da JavaScript'i Devre Dışı Bırakın: JS'yi kapatmak için bir tarayıcı uzantısı kullanın. Sayfanızı yeniden yükleyin. Ekran boşsa, tamamen CSR'ye güveniyorsunuz demektir.
Sonuç
Modern SEO için Sunucu Tarafı Oluşturma (SSR) veya Statik Site Üretimi (SSG) standarttır. Google, İstemci Tarafı Oluşturulan uygulamaları indeksleyebilse de, buna güvenmek sıralamalarınızla rulet oynamak gibidir. Next.js veya Nuxt gibi çerçeveler kullanarak, arama motorlarına tam olarak istediklerini verirsiniz: hızlı, erişilebilir ve tamamen oluşturulmuş HTML.