Infinite scroll – co to jest i jak wpływa na SEO?

Nieskończone przewijanie to mechanizm wykorzystywany, aby zwiększyć użytkownikowi wygodę poruszania się po stronie. To rozwiązanie sprawia, że nie trzeba kliknąć w numer kolejnej podstrony i czekać na jej pełne załadowanie, aby uzyskać pożądaną zawartość. O ile jest to dobre dla odwiedzającego, nie zawsze musi być to przyjazne rozwiązanie dla robotów Google.

W tym poście dowiesz się jakie są zalety i wady nieskończonego przewijania oraz jak poprawnie wdrożyć infinite scroll na stronie.

Przykłady stron wykorzystujących mechanizm nieskończonego przewijania

Nieskończone przewijanie najczęściej spotkamy na portalach społecznościowych, których celem jest angażowanie użytkownika aby zobaczył jak największą ilość treści. Bardzo dobrze sprawdza się to na social mediach takich jak Facebook, Twitter, czy też Pinterest.

Zalety infinite scroll

Do niewątpliwej zalety przewijania nieskończonej ilości treści należy zaliczyć szybkość i wygodę, ponieważ jest to często rozwiązanie wygodniejsze dla użytkownika w porównaniu do kolejnych kliknięć. Każde kliknięcie to dodatkowy czas oczekiwania na załadowanie strony i akcja jaką musi wykonać użytkownik. Długi tekst, artykuł lub poradnik będzie miał gorszy UX jeżeli będzie w jednym długim bloku, aniżeli podzielony lub pocięty na kilka oddzielnych ekranów lub stron.

Nieskończone przewijanie jest korzystne dla urządzeń mobilnych. To często praktykowane rozwiązanie na telefonach oraz tabletach, ponieważ używanie gestów jest dużo bardziej intuicyjne i łatwiejsze dla użytkownika, w porównaniu do stuknięcia w numer strony, który prawdopodobnie będzie posiadał mały rozmiar. Znowu ukazuje to infinite scroll jako technikę, która wymaga mniejszego wysiłku od użytkowników i znacznie upraszcza ich działania.

Wady nieskończonego przewijania

Nieskończone przewijanie posiada także wady. Po pierwsze nie ma gwarancji na to, że roboty Google poprawnie zinterpretują wyświetlanie treści zaczytywanej dynamicznie. Może okazać się, że tylko pierwsza załadowana strona będzie widoczna w wynikach wyszukiwania, a każda, która załaduje się później będzie wywoływana interakcją i kodem JavaScript. Pamiętajmy, że boty Google nie wykonują interakcji co w tym przypadku oznacza to, że nie zobaczą żadnej z dalej wyświetlonych stron, jeśli będą one miały cały czas ten sam adres URL.

Źle zaimplementowane przewijanie na stronie wpływa negatywnie na wydajność i szybkość ładowania treści. Strona internetowa posiadająca to rozwiązanie musi załadować więcej treści na tej samej stronie. W dzisiejszych czasach jest to bardzo ważny czynnik, który powoduje, że użytkownicy dużo szybciej opuszczają stronę zwiększając współczynnik odrzuceń lub, w przypadku aplikacji mobilnych, usuwają ją. Duża ilość treści (zwłaszcza obrazów) pochodzącej z jednej witryny może również w znacznym stopniu ograniczyć zasoby urządzenia posiadanego przez użytkownika.

W przypadku np. sklepów internetowych wadą infinite scroll’a będzie brak możliwości dodania do zakładek swojej lokalizacji. Przykładowo użytkownik scrollując dłuższy czas dotrze do danego zdjęcia/produktu i opuści witrynę. Aby ponownie znaleźć dany element będzie musiał kolejny raz scrollować – nie ma możliwości zaznaczenia miejsca, w którym skończyło się oglądać. To wada, która może spowodować irytację oraz zmniejszenie zadowolenia i zaangażowania użytkowników. Pomimo wbudowanej wyszukiwarki ludzie nie korzystają z niej tak często jak może się wydawać aby odszukać dany produkt.

Następną wadą tego rozwiązania jest brak stopki. Stopka strony internetowej często zawiera treści, których odwiedzający szukają – mogą to być np. dane kontaktowe, numer konta lub odnośniki do social mediów. Jeśli więc wprowadzamy nieskończone przewijanie, warto przenieść elementy istotne dla użytkownika w inne miejsce, np. do górnego lub bocznego paska albo użyć rozwiązania sticky footer.

Innym, często wykorzystywanym rozwiązaniem jest także wprowadzenie ładowania treści na żądanie przy pomocy przycisku “załaduj więcej”, czy “wczytaj więcej produktów”. Przykład takiego rozwiązania:

Co wybrać: infinite scroll czy paginację?

Już na etapie tworzenie strony internetowej warto wybrać jedną z opcji i zadbać o właściwą prezentację treści użytkownikom. Do wyboru mamy paginację, czyli stronicowanie oraz nieskończone przewijanie.

W tym pierwszym przypadku użytkownik porusza się pomiędzy kolejnymi stronami przy pomocy nawigacji lub numeracji strony. Wprowadzona paginacja strony internetowej dzieli zamieszczoną treść na podstrony. Prawdopodobnie najbardziej znanym stronicowaniem dla każdego użytkownika jest to zamieszczone w wyszukiwarce Google.

Projektant danej strony internetowej powinien rozważyć wszelkie wady i zalety obu rozwiązań przed podjęciem wyboru. Wszystko zależy od charakteru strony i sposobu przekazywania treści użytkownikom.

Kiedy warto zastosować infinite scroll?

Infinite scroll to doskonałe rozwiązanie dla stron posiadających dużo contentu. Ciągłe pojawianie się nowych treści ma wpływ na większą interakcję użytkownika. Dlatego, jak wcześniej zostało wspomniane, dobrze sprawdzi się na serwisach społecznościowych. Nieskończone przewijanie to także dobry wybór na stronach, które zawierają dużą liczbę zdjęć oraz wideo. Brak limitu co do liczby obrazów, kształtów i wymiarów pozwala na uzyskanie świetnego efektu wizualnego. Ponadto może być on w prosty sposób połączony z tekstem i kolorem, co może jeszcze bardziej zaangażować odwiedzającego użytkownika. Dlatego jeśli posiadasz stronę, na której przedstawiasz własne zdjęcia, grafiki lub obrazy takie rozwiązanie będzie bardzo dobre do strony twojego portfolio.

Kiedy warto zastosować paginację?

Stronicowanie z kolei dużo lepiej sprawdzi się dla serwisów informacyjnych, na których odwiedzający szuka konkretnej treści, przykładem mogą być blogi. Paginacja jest korzystna ze względu na to, że posiada początek i koniec co wskazuje użytkownikowi ile ma podstron przed sobą. W dowolnym momencie może on przeskoczyć do pożądanego miejsca na stronie bez zbędnego przewijania.

Wpływ infinite scroll na SEO

Strony internetowe posiadające nieskończone przewijanie są wyzwaniem dla SEO. Głównym powodem jest indeksowanie. Google nie zezwala na pobieranie JavaScript aby wyświetlić treść znajdującą się na stronie w części po przewinięciu. Warto wtedy pomóc robotom indeksującym poprawnie wykryć całą zawartość witryny, aby mogły skutecznie ją zaindeksować. W dalszej części artykułu dowiesz się jak poprawnie wdrożyć na stronie nieskończone przewijanie przyjazne dla SEO.

Crawl budget a nieskończone przewijanie

Crawl budget to budżet, który przeznaczają roboty na indeksację stron w obrębie danej domeny. Im więcej podstron posiada witryna, tym więcej czasu może zająć indeksowanie. Ponadto crawler przechodzi przez strony, do których ma dostęp. W przypadku infinite scroll roboty mogą mieć z tym problem, ponieważ nowa treść pojawia się i jest aktywowana dopiero, gdy przewiniemy pasek danej podstrony w dół.

Przyjazne SEO dla stron posiadających infinite scroll

Na szczęście dla posiadaczy nieskończonego przewijania na swojej stronie istnieje rozwiązanie, które pozwoli na jej poprawne pozycjonowanie. Roboty wyszukiwarki Google dotrą do wszystkich elementów linkowanych z podstrony posiadającej infinite scroll, gdy równolegle generowana będzie paginacja.

1. Aby wszystko poprawnie działało, należy przed samym wprowadzeniem paginacji podzielić strony z infinite scroll na strony składowe, które będą także dostępne i widoczne przy wyłączonej obsłudze JavaScript. Dobrze jest tutaj wybrać odpowiednią ilość elementów na każdej stronie, aby szybko się ładowały i sprawdzić czy nie powielają się podczas przejścia pomiędzy stronami.
2. Następnym krokiem jest stworzenie adresów URL o strukturze, która będzie obsługiwać nieskończone przewijanie, np.
   • example.com/category?name=fun-items&page=1
   • example.com/fun-items?lastid=567

   Należy unikać adresów URL opartych na czasie względnym i parametrach np.

   • example.com/category/page.php?name=fun-items&days-ago=3
   • example.com/fun-places?radius=5&lat=40.71&long=-73.40
3. Upewnij się, że każdy stworzony adres działa poprawnie i prowadzi do odpowiedniej treści oraz, że każda strona składowa jest widoczna indywidualnie w przeglądarce.
4. Kolejnym krokiem jest konfiguracja paginacji wraz z dodaniem do sekcjirel = „next” i rel = „prev”. Dodanie tych kodów zapewni indeksowanie zawartości każdej strony przez roboty Google.
5. Po wykonaniu tej czynności pozostaje użycie funkcji pushState na stronie z nieskończonym przewijaniem. Umożliwia to automatyczne aktualizowanie adresu URL w momencie gdy użytkownik przewinie stronę w dół. PushState odzwierciedla zmianę adresu URL, która nastąpiłaby gdyby użytkownik skorzystał ze stronicowania.
6. Na samym końcu pozostaje już tylko przetestowanie czy wprowadzone rozwiązanie działa poprawnie. Warto przetestować każdą stronę i sprawdzić czy ładuje się dokładnie i w dobrym czasie.

Infinite scroll. Podsumowanie

Infinite scroll to jedna z dostępnych opcji projektowych, którą można wprowadzić na stronie w celu poprawy UX i zaangażowania użytkownika. Nie jest jednak optymalna dla każdej strony i lepiej sprawdzi się na witrynach posiadających dużo treści, obrazów lub filmów wideo w porównaniu do tych nastawionych na cel.

Wprowadzenie nieskończonego przewijania powinno być zależne od tego co potrzebujesz osiągnąć za pomocą danej podstrony. To rozwiązanie, które może być przyjazne dla SEO, jednak musi zostać poprawnie zaimplementowane.