Single Page Application Sitelerde SEO Nasıl Yapılır?
Modern bir web uygulaması açıldığında sayfa anında değişiyor, geçişler pürüzsüz ilerliyor. Kullanıcı için harika bir deneyim. Ama arama motoru için durum farklı olabilir. Single page application, yani tek sayfa uygulaması, sayfa içeriğini çoğu zaman tarayıcıda JavaScript ile oluşturur ve bu durum taranabilirliği zorlaştırabilir.
Bu yazıda single page application sitelerde SEO nasıl yapılır sorusunu, render yöntemlerini, URL yapısını ve test yöntemlerini ele alıyoruz.
Single page application nedir?
Single page application, tarayıcıya tek bir HTML sayfası yüklenip, sonraki içeriklerin JavaScript ile dinamik olarak getirildiği web uygulamasıdır. React, Vue ve Angular gibi çatılar bu yapıyı yaygın olarak kullanır. Kullanıcı bir bağlantıya tıkladığında sayfa yenilenmez, yalnızca içerik değişir.
Bu mimarinin avantajı hız ve akıcılıktır. Ancak sayfa içeriği ilk HTML yanıtında yer almıyorsa, arama motorunun sayfayı doğru değerlendirmesi için ek bir adıma ihtiyacı olur.
Render sorunu
Googlebot, JavaScript çalıştırabilen bir tarayıcıdır. Ancak render işlemi ayrı bir kuyrukta gerçekleşir ve bu süreç zaman alabilir. Sayfa içeriğinin büyük bölümü JavaScript ile yükleniyorsa, render tamamlanana kadar içeriğin dizine eklenmesi gecikebilir ya da eksik kalabilir.
Google'ın JavaScript SEO temel bilgileri dokümanı, render sürecinin nasıl çalıştığını ve hangi durumlarda sorun çıkabileceğini anlatır. Bu bilgi, mimari kararlar verirken yol gösterici olabilir.
Render yöntemlerini karşılaştırmak
Single page application sitelerde SEO için en güvenilir yaklaşım, sunucu tarafı render veya statik üretimdir. Sunucu tarafı render ile sayfa her istekte HTML olarak oluşturulup gönderilir. Statik üretimde ise sayfalar yayın öncesi önceden derlenir. Her iki yöntem de arama motoruna dolu bir HTML sunar.
Yalnızca istemci tarafı render kullanılan bir uygulamada, sayfanın ilk yanıtı genellikle boş bir kabuk olur. Bu durum, arama motorunun içeriği görmesini geciktirir. Bu nedenle önemli sayfalar için sunucu tarafı yöntem seçmek daha sağlıklıdır.
URL yapısı ve yönlendirme
Tek sayfa uygulamalarında geçişler çoğu zaman hash tabanlı adreslerle yapılır. Örneğin siteadi.com/#/urunler gibi adresler, arama motoru tarafından ayrı bir sayfa olarak değerlendirilmeyebilir. Her sayfanın History API ile oluşturulmuş temiz bir URL'ye sahip olması gerekir.
Ayrıca her URL'nin doğrudan açıldığında doğru içeriği döndürmesi önemlidir. Sunucu tarafında yapılandırılmamış bir adres, yenileme sırasında hata verebilir. Böyle bir durumda sunucunun 404 durum kodu döndürmesi, yanlış bir sayfanın dizine eklenmesini önler.
Meta etiketleri yönetmek
Her sayfanın kendine ait başlık etiketi, meta açıklaması ve canonical bağlantısı olmalıdır. Tek sayfa uygulamalarında sık görülen sorun, tüm sayfaların aynı varsayılan başlığı paylaşmasıdır. Bu durumda arama sonuçlarında sayfalar birbirinden ayırt edilemez.
Çatıların sunduğu meta yönetim araçları bu işi kolaylaştırır. Sayfa bazlı başlık tanımlamak, hem kullanıcının hem de arama motorunun içeriği anlamasına yardımcı olur.
İç bağlantılar ve gezinme
Googlebot, href özelliği taşıyan standart bağlantıları takip eder. Yalnızca JavaScript olayıyla çalışan düğmeler ve div öğeleri, bağlantı olarak algılanmayabilir. Bu nedenle gezinme menülerinde gerçek bağlantı etiketleri kullanılmalıdır.
Sitenin iç bağlantı yapısı da önemlidir. Önemli sayfaların birbirine ve ana sayfaya bağlanması, arama motorunun sitenin hiyerarşisini anlamasını sağlar.
Test yöntemleri
Single page application sitenizin SEO durumunu test etmek için Search Console'daki URL denetleme aracını kullanın. Canlı test özelliği, Googlebot'un oluşturduğu HTML'i ve ekran görüntüsünü gösterir. Ana içerik bu çıktıda yoksa, render sorunu vardır.
Ayrıca tarayıcıda sayfanın kaynak kodunu incelemek de faydalıdır. JavaScript çalışmadan önceki ilk HTML'de içerik yoksa, sayfa tamamen istemci tarafında oluşturuluyor demektir. Tarama araçlarında JavaScript render seçeneğini açıp kapatarak iki sonucu karşılaştırmak da önemli sorunları ortaya çıkarır.
Geliştirme ekibiyle ortak dil
Single page application projelerinde SEO hedeflerinin geliştirme ekibine net biçimde anlatılması önemlidir. Render stratejisi, URL yapısı ve meta etiket yönetimi gibi konular, ekibin ilk tasarım kararlarında bilinmesi gereken unsurlardır. SEO gereksinimleri sonradan eklenirse, mevcut yapının yeniden düzenlenmesi gerekebilir.
Bu nedenle her yeni özellik planlandığında, arama motoruna görünürlüğünün nasıl etkileneceğini sormak iyi bir alışkanlıktır. Basit bir kontrol listesi bile bu iletişimi kolaylaştırır.
Single page application sitelerinde içerik güncellemeleri de dikkat ister. Bir ürün fiyatı ya da kampanya metni değiştiğinde, bu değişikliğin hem kullanıcıya hem de arama motoruna doğru yansıyıp yansımadığını kontrol etmek gerekir. Önbellek ve render katmanları arasındaki senkronizasyon, bu tür sorunların en yaygın nedenidir.
Single page application projelerinde ekip, geliştiricilerin ve SEO uzmanlarının birlikte test yaptığı bir kontrol listesi kullanabilir. Yeni bir sayfa şablonu yayınlanmadan önce, başlık, meta açıklama, iç bağlantılar ve render sonucu tek tek kontrol edilirse, sonradan çıkabilecek sorunlar büyük ölçüde önlenir.
Bu kontrol listesi, single page application projelerinde her yeni sürümde tekrarlanarak sürdürülebilir bir kalite güvencesi oluşturur.
Performansı korumak
Büyük JavaScript paketleri, sayfa hızını olumsuz etkileyebilir. Kod bölme ile her sayfanın yalnızca ihtiyacı olan kodu yüklemesini sağlamak, hem kullanıcı deneyimini hem de Core Web Vitals değerlerini iyileştirir. Görsel optimizasyonu ve geç yükleme de bu çalışmanın parçasıdır.
Performans testlerini yeni sürümler yayınlandıkça tekrarlamak, gerilemeleri erken yakalamanızı sağlar.
Single page application için SEO planı
Tek sayfa uygulamalarında SEO, mimari kararların başında ele alınmalıdır. Sonradan eklenen render çözümleri, baştan planlanmış bir yapıya göre daha maliyetli olur. Bu nedenle yazılım ekibiyle birlikte render stratejisini ve URL yapısını başlangıçta belirlemek gerekir.
Clickzone'un SEO hizmeti, JavaScript tabanlı sitelerde render analizi, indeksleme kontrolü ve teknik öneriler sunar. Single page application sitenizin arama performansını birlikte değerlendirmek isterseniz, mevcut render durumunuzu paylaşarak başlayabiliriz.