Tek Sayfalı Uygulama (SPA) SEO'su: Bir SPA Google'a Nasıl Dizine Eklenir ve Yapay Zeka Tarafından Nasıl Okunur

Tek sayfalı uygulama SEO'su, React, Vue, Angular veya Svelte ile yapılmış bir JavaScript uygulamasını klasik bir web sitesi kadar taranabilir kılan tekniklerin bütünüdür. Sorun iyi belgelenmiştir: Google, JavaScript SEO temelleri sayfasında JavaScript sayfalarını üç aşamada (tarama, oluşturma, dizine ekleme) işlediğini açıklar ve her SPA zayıflığı bu hattın bir yerinde yatar. Bu rehber SPA'lara odaklanıyor; genel olarak JavaScript siteleri için JavaScript SEO rehberimizi okuyun.

Tek sayfalı uygulama nedir ve SEO için neden zordur?

Geleneksel bir web sitesi her URL için eksiksiz bir HTML belgesi döndürür. Bir SPA ise her URL için neredeyse aynı belgeyi döndürür: boş bir <div id="root">, birkaç meta etiketi ve büyük bir JavaScript paketi. Tarayıcı paketi indirir, bir API'yi çağırır, sonra sayfayı çizer. Ziyaretçi bir bağlantıya tıkladığında JavaScript içeriği yeniden yüklemeden değiştirir.

Hızlı bir telefonu olan bir insan için sonuç anlık hissedilir. Bir tarayıcı için ilk yanıt boş bir kabuktur: başlık yok, metin yok, bağlantı yok. Her şey botun JavaScript'i çalıştırıp çalıştırmadığına ve ne zaman çalıştırdığına bağlıdır. Bu tek olgu SPA SEO sorunlarının çoğunu açıklar:

• Gecikmeli veya eksik içerik: metin yalnızca Google'ın daha sonra gerçekleştirdiği, diğer botların atladığı oluşturmadan sonra var olur.
• Birçok görünüm için tek URL: eski SPA'lar parçalarla (/#/pricing) yönlendirme yapar ve #'den sonraki kısım sunucuya hiç gönderilmez; bu yüzden bütün görünümler tek bir URL'de birleşir.
• Aynı başlıklar ve açıklamalar: kabuk tek bir <title> taşır ve yönlendirici onu güncellemezse her sayfa onu paylaşır.
• href içermeyen bağlantılar: düğmeler ve onClick işleyicileri kullanıcılar için gezinir ama tarayıcılara izleyecek bir şey vermez.
• Soft 404 hataları: sunucu, var olmayan sayfalar dahil her yol için 200 yanıtı verir; bu yüzden hata görünümleri zayıf sayfalar olarak dizine eklenir.
• Ağır JavaScript: büyük paketler ilk görüntülemeyi ve etkileşimleri yavaşlatır, bu da Core Web Vitals'a zarar verir.

Google bir SPA'yı nasıl tarar ve oluşturur?

Googlebot önce ham HTML'i çeker ve orada bulduğu bağlantıları ve yönergeleri okur. 200 durumu döndüren sayfalar ardından, başsız bir Chromium olan Web Oluşturma Hizmeti için bir kuyruğa alınır. Google, bir sayfanın "bu kuyrukta birkaç saniye kalabileceğini, ancak daha uzun da sürebileceğini" belirtir. Oluşturulduktan sonra ortaya çıkan HTML içerik ve bağlantılar için yeniden ayrıştırılır, ardından dizine eklenir.

Google'ın belgelerinden SPA'lar için önemli dört ayrıntı:

1. Yalnızca href içeren <a> öğeleri güvenilir bağlantılardır. JavaScript ile eklenen bağlantılar, bu biçime uydukları sürece sorun değildir.
2. Parçalar ayrı sayfalar değildir. Google # yönlendirmeleri yerine History API'sini (pushState) kullanmanızı ister. Eski AJAX tarama şemasını (#! URL'leri) Ekim 2015'te kullanımdan kaldırdı.
3. Özgün HTML'deki bir noindex geçerli olur. Google noindex gördüğünde oluşturmayı atlayabilir; bu yüzden onu sonradan JavaScript ile kaldırmak işe yaramaz.
4. Oluşturma önbelleğe alınmış dosyaları kullanır. Googlebot JavaScript ve CSS'yi yoğun biçimde önbelleğe alır; eski paketleri önlemek için parmak izli dosya adları kullanın (dosya adında bir içerik karması).

Pratik sonuç: Google istemci tarafında oluşturulan bir SPA'yı dizine ekleyebilir, ancak her sayfaya ikinci bir adım, bir gecikme ve bir başarısızlık noktası eklersiniz. Bir zaman aşımı, engellenmiş bir API çağrısı veya oluşturma sırasında bir JavaScript hatası, dizine eklenen sürümü boş bırakır. Google'ın ne gördüğünü Search Console'daki URL Denetleme aracıyla kontrol edin ve sayfalar dizin dışında kalıyorsa Google dizine eklemesi nasıl çalışır rehberimizi okuyun.

ChatGPT, Claude ve Perplexity JavaScript okuyor mu?

Çoğunlukla hayır. Vercel ve MERJ, ağlarının trafiği üzerine Aralık 2024'te yayımladıkları bir çalışmada "büyük yapay zeka tarayıcılarından hiçbirinin şu anda JavaScript oluşturmadığını" buldu: GPTBot, OAI-SearchBot ve ChatGPT-User (OpenAI), ClaudeBot (Anthropic), PerplexityBot, Meta-ExternalAgent ve Bytespider yalnızca ham HTML'i okuyor. JavaScript dosyalarını indiriyorlar (ChatGPT isteklerinin yaklaşık %11.5'i ve Claude'unkilerin %23.8'i) ama çalıştırmıyorlar. İstisnalar, Google'ın oluşturma altyapısına dayanan Gemini ve tarayıcı tabanlı bir tarayıcı kullanan AppleBot.

İstemci tarafında oluşturulan bir SPA için bu, ChatGPT'yi, Claude'u ve Perplexity'yi besleyen yapay zeka tarayıcılarının boş bir sayfa gördüğü anlamına gelir. Ürününüz Google'da sıralanıp yine de yapay zeka yanıtlarında görünmez kalabilir, çünkü asistan tek bir kelimesini bile okumamıştır. Aynısı, ham HTML'deki Open Graph etiketlerini okuyan sosyal ağlardaki ve mesajlaşma uygulamalarındaki çoğu bağlantı önizleme botu için de geçerlidir. İçerik HTML'e girdikten sonra, istediğiniz yapay zeka tarayıcılarına robots.txt'nizin izin verdiğini de kontrol edin.

Bir SPA hangi oluşturma stratejisini kullanmalı?

Çözüm, ilk yanıtta gerçek HTML göndermektir. Google, dinamik oluşturma belgelerinde dinamik oluşturmayı (yalnızca botlara ön oluşturulmuş bir sürüm sunmak) "bir geçici çözüm, önerilen bir çözüm değil" olarak niteler ve bunun yerine sunucu tarafı oluşturmayı, statik oluşturmayı veya hydration'ı işaret eder. Aşağıdaki tanımlar web.dev'deki Rendering on the Web kaynağını izler.

Çoğu modern çerçeve stratejileri rota bazında karıştırmanıza izin verir: pazarlama sayfaları için statik, katalog için sunucu tarafında oluşturulan, giriş yapılmış uygulama için istemci tarafında oluşturulan. Bu hibrit düzen, arama trafiğinin gerçekleştiği yerde tarayıcılara tam HTML verir ve SPA deneyimini değer kattığı yerde korur.

Çerçeve seçenekleri

Yapay zeka web sitesi oluşturucularıyla üretilen siteler özel bir değinmeyi hak ediyor: çoğu istemci tarafında oluşturulan bir React uygulaması dışa aktarır. Sitenizi bunlardan biriyle yaptıysanız, Google'ın ve ChatGPT'nin onu okuyabildiğini varsaymadan önce Lovable SEO ve GEO notlarımıza bakın.

SPA SEO kontrol listesi: rota rota neyin düzeltileceği

1. Her görünüme temiz, taranabilir bir URL verin

History API'sini kullanın (/pricing, asla /#/pricing), içerik parçası başına bir URL ve ziyaretçi doğrudan geldiğinde de uygulama içi gezinmeyle geldiğinde de aynı URL. Her URL yeni bir sekmede açıldığında doğru içeriği yüklemelidir; bir tarayıcının yaptığı test budur.

2. Gerçek bağlantılar kullanın

Dizine eklenebilir bir sayfaya götüren her gezinme öğesi bir <a href="/path"> olmalıdır. Çerçevelerin bağlantı bileşenleri (Link, NuxtLink, routerLink) bu işaretlemeyi üretir; div veya button öğelerindeki özel tıklama işleyicileri üretmez. İyi bağlantılar ayrıca site mimarinizi da taşır: bir sayfaya bağlantı verilmezse tarayıcılar onu nadiren bulur.

3. Title'ı, açıklamayı ve canonical'ı rota başına güncelleyin

Her rotanın kendi title'ı, meta açıklaması, canonical'ı ve Open Graph etiketleri olmalı; mümkünse sunucuda üretilmelidir. Meta etiketleri sayfamız nelerin ayarlanacağını listeler. Tek bir canonical etiketi tutun: Google bunu HTML'de ayarlamanızı önerir ve JavaScript onu değiştirirse sonuç özgün olanla çelişmemelidir.

4. Dürüst durum kodları döndürün

Eksik ürünler ve silinmiş makaleler bir hata mesajıyla 200 yanıtı vermemelidir. SSR ile sunucudan gerçek bir 404 veya 410 döndürün. Saf bir SPA'da Google iki yedeği kabul eder: JavaScript ile 404 döndüren bir URL'ye yönlendirmek veya hata görünümüne bir noindex robots meta etiketi eklemek.

5. Ana içeriği ve yapılandırılmış veriyi HTML'e koyun

Başlıklar, gövde metni, fiyatlar, SSS ve JSON-LD yapılandırılmış verisi, bir tıklamadan veya kaydırmadan sonra yüklenmemeli, sunucu yanıtında bulunmalıdır. Talep üzerine oluşturulan sekmelerin ya da "daha fazla yükle" düğmelerinin arkasındaki içerik çoğu zaman gözden kaçar.

6. JavaScript'i hafif tutun

Paketi rotaya göre bölün, ilk görünüm için gerekmeyeni erteleyin ve hydration sırasında tüm sayfayı yeniden oluşturmaktan kaçının. Chrome saha verisinin (CrUX) uygulama içi gezinmelerin metriklerini ziyaretçinin ilk yüklediği URL'ye atfettiğini unutmayın; bu yüzden kilit şablonlarınızı tek tek test edin.

7. Botların ne aldığını test edin

Her kilit şablonun üç sürümünü karşılaştırın: ham HTML (kaynağı görüntüleyin veya sayfayı bir komut satırı aracıyla çekin), Google'ın oluşturduğu HTML (URL Denetleme, ardından "Taranan sayfayı görüntüle") ve JavaScript devre dışıyken sayfa. Ana metin yalnızca ikinci sürümde görünüyorsa yapay zeka tarayıcıları onu görmez. Ücretsiz yapay zeka için taranabilirlik denetimimiz ve dizine eklenebilirlik denetleyicisi bu kontrolleri herhangi bir URL'de yapar.

SPA'nızın bir SEO sorunu olduğunu nasıl anlarsınız?

SPA SEO ve GEO: Google'da bulunmak ve yapay zeka tarafından alıntılanmak

Yıllarca istemci tarafı oluşturma, Google JavaScript'i er ya da geç oluşturduğu için yönetilebilir bir risk olmuştu. Keşfin bir kısmı artık ChatGPT'de, Claude'da, Gemini'de ve Perplexity'de gerçekleştiğinden maliyet değişti: yalnızca JavaScript çalıştıktan sonra var olan bir sayfa, çoğu asistanın okuyabildiği kaynaklarda yoktur. Ham HTML'de taranabilirlik, üretken motor optimizasyonunun ilk koşulu haline geldi.

HTML eksiksiz olduğunda geri kalan olağan kuralları izler: bir soruyu net biçimde yanıtlayan, kaynaklı olgular ve yapılandırılmış veri içeren sayfalar, asistanların alıntıladığı sayfalardır. Sorank'ın GEO optimizasyonu özellikleri bu içeriği yazıp yayınlamanıza yardımcı olur, yapay zeka anma takibi ise oluşturma düzeltmesinden sonra ChatGPT'nin, Claude'un ve Gemini'nin markanızı alıntılayıp alıntılamadığını gösterir.

Tek sayfalı uygulama SEO'sunun temel kuralı tek cümleye sığar: Google'ın sıralamasını ve yapay zekanın alıntılamasını istediğiniz her şey sunucunun gönderdiği HTML'de olmalıdır. SPA'yı giriş yapılmış deneyim için tutun, herkese açık sayfaları sunucuda veya derleme zamanında oluşturun, sonra her sürümden önce ve sonra botların ne aldığını test edin.