Mechanizm nieskończonego przewijania (infinite scroll), a wyszukiwarki

Artykuł jest oparty na rekomendacjach, jakie ukazały się na anglojęzycznym blogu Google dla webmasterów. Uznałem, że temat optymalizacji nieskończonego przewijania pod kątem dostępności dla wyszukiwarek internetowych jest bardzo aktualny – coraz częściej na stronach internetowych możemy spotkać się z wykorzystaniem mechanizmu infinite scroll.

Infinite scroll dla użytkowników – a co z wyszukiwarkami?

Mechanizm nieskończonego przewijania (ang. infinite scroll), to rozwiązanie wygodne dla użytkowników. Nie trzeba klikać kolejnych linków i czekać na ładowanie kolejnych podstron, żeby dotrzeć do całej zawartości.

Takie rozwiązanie nie musi być jednak przyjazne dla robotów wyszukiwarek internetowych. W przypadku nieskończonego przewijania crawlery nie zawsze są w stanie zasymulować zachowanie użytkownika, takie jak przewijanie czy kliknięcie przycisku wczytującego dalsze elementy. Dlatego roboty wyszukiwarek nie zawsze mogą uzyskać dostęp do wszystkich pojedynczych elementów.

Aby mieć pewność, że wyszukiwarki internetowe mogą dotrzeć do wszystkich elementów linkowanych ze strony z nieskończonym paskiem przewijania, należy upewnić się, że równolegle generowana jest paginacja z zestawem stron składowych.

Mechanizm nieskończonego przewijania z paginacją można zobaczyć w działaniu na przykładzie. Przykład demonstruje kilka rozwiązań ważnych z punktu widzenia dostępności dla wyszukiwarek:

• Pełny zasięg: wszystkie poszczególne elementy są dostępne. W standardowym rozwiązaniu infinite scroll elementy wyświetlane poza wstępnie załadowaną zawartością strony są niewykrywalne dla robotów wyszukiwarek.
• Brak zachodzenia na siebie: każdy element występuje tylko raz w stronach składowych paginacji (elementy nie są powielane).

Nieskończone przewijanie przyjazne dla wyszukiwarek

1. Przed implementacją:

• Podziel zawartość strony z nieskończonym przewijaniem na strony składowe, które są dostępne po wyłączeniu JavaScript.
• Określ ile zawartości ma znaleźć się na każdej stronie składowej.
  – upewnij się, że jeśli użytkownik przejdzie z wyników wyszukiwania bezpośrednio do strony składowej, będzie mógł łatwo znaleźć element, którego szukał (np. bez konieczności długiego przewijania zawartości)
  – weź pod uwagę rozsądny czas ładowania strony.
• Podziel zawartość tak, aby zawartość stron składowych paginacji nie zachodziła na siebie (z wyjątkiem buforowania).

2. Opracuj strukturę adresów URL do obsługi nieskończonego przewijania:

• Zalecane jest, aby każda strona składowa zawierała pełny adres URL, aby zminimalizować ryzyko wystąpienia błędów konfiguracji
  – poprawnie: example.com/category?name=fun-items&page=1
  – poprawnie: example.com/fun-items?lastid=567
  – mniej optymalnie: example.com/fun-items#1
  – przetestuj czy każda strona składowa (URL) działa prawidłowo i kieruje każdego do odpowiedniej zawartości oraz jest dostępna w przeglądarce bez pliku cookie lub historii użytkownika.
• Wszystkie klucze/wartości parametrów URL powinny spełniać poniższe zalecenia:
  – upewnij się, że za 2 tygodnie adres URL wyświetli tę samą zawartość – unikaj parametrów URL względem czasu, np. example.com/category/page.php?name=fun-items&days-ago=3
  – stwórz parametry, które dostarczą wyszukującym wartościową zawartość – unikaj parametrów bezwartościowych dla wyszukujących, jako podstawowej metody dostępu do zawartości, np. example.com/fun-places?radius=5&lat=40.71&long=-73.40

3. Skonfiguruj paginację tak, aby każda strona składowa zawierała linki rel=”next” i rel=”prev” w sekcji head kodu HTML.

4. Na stronie z nieskończonym przewijaniem zaimplementuj replaceState/pushState. Zalecane jest wykorzystanie pushState (samodzielnie lub w połączeniu z replaceState) dla każdego działania użytkownika, które przypomina kliknięcie lub przechodzenie do następnej strony.

5. Przetestuj zaimplementowane rozwiązania:

• Sprawdź czy wartości numerów stron dopasowują się podczas przewijania.
• Sprawdź czy strony spoza zakresu paginacji zwracają kod odpowiedzi 404 (np. adres example.com/category?name=fun-items&page=999 powinien zwrócić błąd 404, jeśli stron jest mniej niż 999).
• Zbadaj potencjalne konsekwencje dla użyteczności wynikające z wprowadzenia nieskończonego przewijania (więcej w artykule Infinite Scrolling Is Not for Every Website).