- Konu sahibi
- #1
Sonsuz kaydırma kullanacaksanız içeriği yalnızca JavaScript çalıştıktan sonra görünen tek bir sayfa olarak bırakmayın. Her içerik grubunu ayrı, doğrudan açılabilen ve taranabilir bir URL ile sunun; ilk HTML içinde bu sayfalara normal
Google JavaScript çalıştırabilse de kullanıcı gibi kaydırma veya “daha fazla” düğmesine basma davranışına güvenmeyin. Keşif için normal bağlantıların bulunması gerekir.
Örneğin bir makale arşivinde ilk içerik grubu
İlk sayfanın HTML çıktısında ikinci sayfaya giden şu mantıkta bir bağlantı bulunur:
Kullanıcı aşağıya geldiğinde JavaScript bu bağlantıyı yakalayıp içeriği ekleyebilir. Bağlantı yine HTML içinde bulunduğu için JavaScript devre dışı kalsa bile kullanıcı ve arama motoru sonraki sayfaya ulaşabilir. Her sayfanın başlık, ana içerik, bağlantılar ve kanonik adresi o sayfadaki içerikle uyumlu olmalıdır.
Aşağıdaki HTML, sunucunun ikinci içerik grubuyla ürettiği tam sayfanın sadeleştirilmiş örneğidir. Bağlantılar gerçek içerik URL’lerine gitmelidir; yorum satırı tek başına makale içeriği değildir.
Bu statik örnek backend oluşturmaz; gerçek sunucu page parametresine göre kararlı ve çakışmayan içerik grupları üretmelidir. Son sayfada Sonraki bağlantısı bulunmamalı; aralık dışı sayfa için boş200 yerine uygun404 yanıtı değerlendirilmelidir. Sayfa2’yi doğrudan açtığınızda yalnız o grubun içeriklerinin görünmesi, önce sayfa1’de kaydırmayı gerektirmemesi temel testtir.
JavaScript iyileştirmesi ekleyecekseniz sunucuyla açık bir sözleşme belirleyin: örneğin yanıt güvenilir kart HTML’si ile bir sonraki tam sayfanın URL’sini ayrı alanlarda döndürür; son grupta nextUrl boş olur. “partial desteği yoksa tam HTML’yi aynı alana ekle” davranışı kullanmayın. Yanıtın türünü ve alanlarını doğrulayın; HTML yalnız güvenilir, güvenli üretilmiş aynı origin kaynağından gelmeli, ham kullanıcı içeriği HTML sink’ine aktarılmamalıdır.
Yükleme sürerken ikinci isteği önleyin; başarısızlıkta normal bağlantıyı çalışır bırakın. Son grupta observer’ı durdurun ve tetikleyiciyi kaldırın. Tarayıcı IntersectionObserver desteklemiyorsa klasik bağlantı yeterli yedek yoldur. Yeni kartların yüklenmesini erişilebilir durum alanıyla bildirin; klavye/focus ve sayfa sonundaki alt bilgiye ulaşmayı da test edin.
History API yalnız URL çubuğunu değiştirmekten ibaret değildir. Kullanıcıya yeni bir sayfa görünümü sunduğunuzda görünür içerik grubu, kaydırma konumu ve geri/ileri davranışını birlikte yönetmelisiniz. popstate veya tam navigasyonla içeriği geri kurmadan her otomatik yüklemede pushState çağırmak URL ile DOM’u tutarsız bırakabilir. Bu nedenle burada tam bir history uygulaması gibi eksik JavaScript örneği verilmez; önce doğrudan açılabilen sunucu sayfalarını doğrulayın.
Geleneksel sayfalama bağlantısını tamamen kaldırmak yerine onu yedek yol olarak görünür bırakmak çoğu projede daha dayanıklıdır. Kullanıcı deneyiminde gizlemek istiyorsanız bile bağlantı sunucu tarafından HTML içinde bulunmalı ve JavaScript başarısız olduğunda kullanılabilmelidir.
Son kontrol olarak JavaScript’i kapatıp ilk sayfayı açın, sonraki bağlantıyı izleyin ve her sayfanın doğru içerikle döndüğünü doğrulayın. Ardından tarayıcı geliştirici araçlarında ağ hatalarını, sunucunun durum kodlarını ve kaynak HTML içindeki
Arama motoru açısından asıl önemli olan görünüm değil, her içerik grubunun doğrudan açılabilen URL’si ve HTML içindeki bağlantılarla keşfedilebilmesidir. Klasik sayfalama bu yapıyı daha az istemci koduyla sağlayabilir; sonsuz kaydırma ise bunun üzerine bir kullanıcı deneyimi katmanı olarak eklenebilir.
Hayır. İçerik ayrı URL’lerde sunuluyorsa her URL’nin kanonik sinyali kendi içeriğiyle uyumlu olmalıdır. Kanonik yapı, yalnızca görsel olarak aynı ekranda görünmelerine bakılarak değil, sunucunun gerçekten ayrı ve anlamlı sayfalar üretip üretmediğine göre belirlenmelidir.
href bağlantıları verin. JavaScript ise bu bağlantıları arka planda yükleyerek kullanıcıya kesintisiz kaydırma deneyimi sağlayabilir. Böylece arama motoru JavaScript çalıştırmasa bile içerik sayfalarını keşfedebilir.Google JavaScript çalıştırabilse de kullanıcı gibi kaydırma veya “daha fazla” düğmesine basma davranışına güvenmeyin. Keşif için normal bağlantıların bulunması gerekir.
Nasıl çalışır?
Örneğin bir makale arşivinde ilk içerik grubu
/makaleler, sonraki gruplar ise /makaleler?page=2 ve /makaleler?page=3 olsun. Her sayfa sunucu tarafından anlamlı içerikle oluşturulmalı ve kendi adresinden açıldığında çalışmalıdır.İlk sayfanın HTML çıktısında ikinci sayfaya giden şu mantıkta bir bağlantı bulunur:
Kod:
<a href="/makaleler?page=2">Sonraki makaleler</a>Kullanıcı aşağıya geldiğinde JavaScript bu bağlantıyı yakalayıp içeriği ekleyebilir. Bağlantı yine HTML içinde bulunduğu için JavaScript devre dışı kalsa bile kullanıcı ve arama motoru sonraki sayfaya ulaşabilir. Her sayfanın başlık, ana içerik, bağlantılar ve kanonik adresi o sayfadaki içerikle uyumlu olmalıdır.
Önce çalışır bir sayfalama temeli kurun
Aşağıdaki HTML, sunucunun ikinci içerik grubuyla ürettiği tam sayfanın sadeleştirilmiş örneğidir. Bağlantılar gerçek içerik URL’lerine gitmelidir; yorum satırı tek başına makale içeriği değildir.
HTML:
<main>
<h1>Makaleler</h1>
<article><h2><a href="/rehber-11">İkinci grubun ilk rehberi</a></h2></article>
<article><h2><a href="/rehber-12">İkinci grubun ikinci rehberi</a></h2></article>
</main>
<nav aria-label="Makale sayfaları">
<a href="/makaleler">Önceki sayfa</a>
<a href="/makaleler?page=3">Sonraki sayfa</a>
</nav>Bu statik örnek backend oluşturmaz; gerçek sunucu page parametresine göre kararlı ve çakışmayan içerik grupları üretmelidir. Son sayfada Sonraki bağlantısı bulunmamalı; aralık dışı sayfa için boş200 yerine uygun404 yanıtı değerlendirilmelidir. Sayfa2’yi doğrudan açtığınızda yalnız o grubun içeriklerinin görünmesi, önce sayfa1’de kaydırmayı gerektirmemesi temel testtir.
Kaydırma katmanı için veri sözleşmesi
JavaScript iyileştirmesi ekleyecekseniz sunucuyla açık bir sözleşme belirleyin: örneğin yanıt güvenilir kart HTML’si ile bir sonraki tam sayfanın URL’sini ayrı alanlarda döndürür; son grupta nextUrl boş olur. “partial desteği yoksa tam HTML’yi aynı alana ekle” davranışı kullanmayın. Yanıtın türünü ve alanlarını doğrulayın; HTML yalnız güvenilir, güvenli üretilmiş aynı origin kaynağından gelmeli, ham kullanıcı içeriği HTML sink’ine aktarılmamalıdır.
Yükleme sürerken ikinci isteği önleyin; başarısızlıkta normal bağlantıyı çalışır bırakın. Son grupta observer’ı durdurun ve tetikleyiciyi kaldırın. Tarayıcı IntersectionObserver desteklemiyorsa klasik bağlantı yeterli yedek yoldur. Yeni kartların yüklenmesini erişilebilir durum alanıyla bildirin; klavye/focus ve sayfa sonundaki alt bilgiye ulaşmayı da test edin.
History API yalnız URL çubuğunu değiştirmekten ibaret değildir. Kullanıcıya yeni bir sayfa görünümü sunduğunuzda görünür içerik grubu, kaydırma konumu ve geri/ileri davranışını birlikte yönetmelisiniz. popstate veya tam navigasyonla içeriği geri kurmadan her otomatik yüklemede pushState çağırmak URL ile DOM’u tutarsız bırakabilir. Bu nedenle burada tam bir history uygulaması gibi eksik JavaScript örneği verilmez; önce doğrudan açılabilen sunucu sayfalarını doğrulayın.
İndekslenebilirlik için kararlar
- Her kaydırma parçasına benzersiz bir URL ve anlamlı içerik grubu verin. Aynı içeriği farklı parametrelerle çoğaltmayın.
- İlk HTML çıktısında sonraki sayfaya gerçek
hrefbağlantısı koyun. Yalnızca tıklama olayıyla çalışan düğme, keşif için yeterli bir temel değildir. - Sayfa URL’si doğrudan açıldığında içerik sunulmalı; kullanıcı JavaScript çalıştırmadan da o sayfanın makalelerini görebilmelidir.
- Her sayfanın başlığını, açıklayıcı ana içeriğini ve kanonik adresini kendi içeriğine göre üretin. Tüm sayfaları ilk sayfaya kanoniklemek, ayrı sayfaların sinyallerini zayıflatabilir.
- Sayfalar arasında konuya uygun iç bağlantılar kurun. Yalnız sonsuz kaydırma sırasında oluşan geçici istemci tarafı duruma güvenmeyin.
- Kaydırma ile yüklenen içerikte başlık seviyelerini, görsellerin alternatif metinlerini ve kalıcı içerik adreslerini koruyun.
Geleneksel sayfalama bağlantısını tamamen kaldırmak yerine onu yedek yol olarak görünür bırakmak çoğu projede daha dayanıklıdır. Kullanıcı deneyiminde gizlemek istiyorsanız bile bağlantı sunucu tarafından HTML içinde bulunmalı ve JavaScript başarısız olduğunda kullanılabilmelidir.
Yaygın hatalar
| Hata | Sonuç | Düzeltme |
|---|---|---|
| Tüm içerik tek URL’de yükleniyor | Derin içeriklerin keşfi zorlaşır | Her parçaya doğrudan açılan URL verin |
| Sonraki sayfa yalnız düğme olayında oluşuyor | HTML’de taranabilir bağlantı bulunmuyor | Sunucu çıktısına gerçek href ekleyin |
| Tüm sayfalar ilk sayfaya kanonikleniyor | Sayfa özgünlüğü yanlış ifade ediliyor | Kanonik adresi sayfanın kendi URL’siyle eşleştirin |
| Adres çubuğu güncellenmiyor | Paylaşım ve geri düğmesi beklenmedik çalışıyor | Yüklenen sayfayı geçmiş durumuyla eşleştirin |
Son kontrol olarak JavaScript’i kapatıp ilk sayfayı açın, sonraki bağlantıyı izleyin ve her sayfanın doğru içerikle döndüğünü doğrulayın. Ardından tarayıcı geliştirici araçlarında ağ hatalarını, sunucunun durum kodlarını ve kaynak HTML içindeki
href bağlantılarını kontrol edin. İçerik yalnızca kaydırma sonrasında görünüyorsa sorun görsel efektte değil, sunucu tarafındaki temel sunumda aranmalıdır.Kaynaklar
Sık sorulan sorular
Sonsuz kaydırma yerine klasik sayfalama kullanmak daha mı güvenlidir?
Arama motoru açısından asıl önemli olan görünüm değil, her içerik grubunun doğrudan açılabilen URL’si ve HTML içindeki bağlantılarla keşfedilebilmesidir. Klasik sayfalama bu yapıyı daha az istemci koduyla sağlayabilir; sonsuz kaydırma ise bunun üzerine bir kullanıcı deneyimi katmanı olarak eklenebilir.
Kaydırma ile yüklenen tüm içerik aynı sayfanın kanoniğinde mi olmalı?
Hayır. İçerik ayrı URL’lerde sunuluyorsa her URL’nin kanonik sinyali kendi içeriğiyle uyumlu olmalıdır. Kanonik yapı, yalnızca görsel olarak aynı ekranda görünmelerine bakılarak değil, sunucunun gerçekten ayrı ve anlamlı sayfalar üretip üretmediğine göre belirlenmelidir.
