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

Infinite scrolling is a technique based on the idea that content is loaded continuously as users scroll down the page. This eliminates the need for pagination and allows for a seamless experience.

Why?

Because users can keep scrolling down to see more content without having to click through to another page.

Infinite scroll is a part of technical SEO strategy and is mostly used to increase user comfort when navigating a website. However, while it’s good for users, it doesn’t always have to be SEO and Google crawlers-friendly solution.

Infinite Scroll Examples

Infinite scroll can be most often found on social media platforms that want to engage users and make them browse as much content as possible.

It works very well on portals such as Facebook, Twitter, or Pinterest.

Pinterest

Moreover, an increasing number of e-commerce websites have also decided to implement infinite scroll, especially on mobile page versions. Thanks to it, users can conveniently browse through products, without having to click and wait till subsequent pages are loaded.

There are a few reasons why it’s worth using infinite scrolling:

• speed and convenience – infinite scrolling is more user-friendly than clicking each time you want to get the rest of the content. Each click is an additional waiting time for the page to load and the action users must perform. Long formats of content, article, or tutorial will have a much better UX if it is in one long block of text, rather than being divided or cut into several separate screens or pages.
• mobile-friendliness – using gestures is much more intuitive and user-friendly, compared to clicking on a page number which is most often likely to be too small in size on smartphones. This proves that infinite scroll is a technique that requires less effort from users and significantly simplifies their operations.
• lazy loading – with the help of this technique, you can load only the content that is visible to users and save bandwidth. When a user scrolls down, the next portion of the content is loaded. This is especially useful for websites with a lot of images or videos.
• better UX – as we have already mentioned, this technique provides users with a better and more seamless experience. When users don’t have to click on the “Show More” or “Next Page” buttons, they can focus on the content itself and spend more time on a website.

The infinite scroll also has some drawbacks. What are they?

• there is no guarantee that Google robots will correctly crawl the content loaded automatically – it may turn out that only the first page loaded will be visible in the search results, and each one that loads later will be triggered by the user’s interaction and JavaScript code. Keep in mind that Google robots do not interact, which in this case means that they won’t display any of the further pages if they have the same URL address.
• a negative impact on the performance and loading speed of content – a website with this solution must load more content on the same page. These days, slow page loading is one of the key factors why users leave the site much faster, increasing the bounce rate. A large amount of content on a single page can have a negative impact on your website’s loading.
• difficulties with finding the item – when scrolling, users will eventually reach a given image/product and may leave the site. In order to find the item again, they’ll have to scroll again – it’s not possible to indicate the location in which browsing was finished. This can cause irritation and reduced user satisfaction or engagement.
• no footer – website footer often contains information that users are looking for, such as contact details, bank account numbers, or social media links. So, if you implement infinite scroll, it’s worthwhile to move the elements essential for users elsewhere, e.g. to the top or sidebar. You can also use a sticky footer or a “Load more” button. This way, page visitors will still have access to important information.

H&M

Already when developing your website, you should choose one of the options. What is better pagination or infinite scroll?

In the first case, users move between individual pages using navigation or page numbering. Probably the most well-known pagination example is the Google search engine:

Before making up your mind, you should consider all the pros and cons of both solutions. It all depends on the type of website and the way of communicating with users.

When Is It Better to Use Infinite Scroll?

Infinite scroll is the perfect solution for websites with lots of content. Showing more and more pieces to users without forcing them to take any action increases their engagement.

Just think about social media and how great infinite scroll works there. This solution is also a good choice for pages that contain a large number of images and videos.

When Is It Better to Use Pagination?

Are there any situations when it’s better to rely on traditional pagination? This solution is much better for information services, for example, blogs, where visitors look for particular content.

With its use, you can easily indicate where a particular content piece starts and ends. Thanks to having access to a specific number of individual pages, users can easily access content that’s of interest to them.

For example, if they find a noteworthy article on the fifth page, it’ll be much easier for them to access it again in the future, since they know where it’s located on the website. In other words, with pagination, they can jump to the desired section or individual page without having to scroll for hours.

Infinite scroll is challenging SEO-wise.

Why?

Because of website indexing.

Google enables JavaScript to load only a part of the content of a given page – the rest of the content is loaded when the user scrolls down the page. Therefore, it’s worth helping crawlers correctly analyze the entire content of your website so that they can effectively index it.

Does Google Index Infinite Scroll?

Google does index infinite scroll, but there are a few things to keep in mind when using it. The first is that you need to make sure that your content is accessible to Googlebot, which is the crawler that Google uses to index websites. You can do this by checking your robots.txt file.

The second thing to keep in mind is that Google may not crawl all of the content on your page if you use infinite scroll. This is because the crawler has a limit, which is called a crawl budget. The more pages a site has, the more time it can take to have them all indexed.

SEO for Websites with Infinite Scroll

Fortunately, there is a solution for websites with the infinite scroll that is SEO-friendly. Google robots will reach all elements linked from a page with infinite scroll when pagination is generated parallelly.

Follow these 6 steps to make your infinite scroll more SEO-friendly:

1. To ensure that everything works well, you should divide the infinite scroll pages into component pages, which will also be accessible and visible when JavaScript is disabled.

It is also good to choose the right number of components on each page to load quickly and check whether they do not duplicate when switching between pages.

2. The next step is to create URLs with a structure that will support infinite scroll, such as:

• example.com/category?name=fun-items&page=1
• example.com/fun-items?lastid=567

Avoid URLs with relative time and parameters, such as

• example.com/category/page.php?name=fun-items&days-ago=3
• example.com/fun-places?radius=5&lat=40.71&long=-73.40

3. Make sure that each created URL works correctly and leads to the corresponding content and that each component page is visible individually in the web browser.

4. The next step is the configuration of pagination with rel=”next” and rel=”prev” attributes. By adding these attributes, Google robots will crawl the content of each page.

5. After you do this, you can use the pushState function on the infinite scroll page. This allows the URL to be updated automatically when a user scrolls down a page.

PushState reflects a change in the URL that would occur if the user used pagination.

6. At the very end, all that remains is to test whether the introduced solution works correctly. It is recommended to check each page to see if it loads properly and fast enough.

How to make your infinite scrolling better and what to pay attention to? For this purpose, it’s worth focusing on the following elements.

1. No Content Below Infinite Scroll

To make infinite scrolling effective and intuitive, you should ensure that there is no content below it. Thanks to it, users will be able to focus on the loaded elements.

2. Skip Button

Allow users to prevent infinite scroll. They should be able to stop further content from loading. Thanks to it, your website will be more intuitive and UX-friendly.

A skip button will help them stay in the preferred location.

3. Back Button to the Same Place

The problem with going back to the same position is another challenge when implementing infinite scroll. If users follow a link in the list and then click the Back button, they expect to return to the same point on the original page.

But when a user’s position isn’t tracked, the browser’s back button essentially resets the scroll position to the top of the page.

Unsurprisingly, this can frustrate users and make them leave the page. Therefore, implementing the back button will allow users to go back to the website location that’s of interest to them.

4. Test How It Works First

Before implementing infinite scrolling, you should test how it works and see if it’s functional on your website type.

Maybe in the process, it’ll turn out that traditional pagination works better in your case.

Infinite scrolling is one of the design alternatives which can be implemented to improve UX and user engagement.

However, it’s worth keeping in mind that it’s not a perfect solution for all types of websites. While it’ll work better on sites with large amounts of content, images, or videos, it won’t be the best for informative pages.

Introducing infinite scrolling should depend on your strategy and the goals you want to achieve. When implemented properly, this solution can be equally beneficial for SEO as pagination.

Need help? Contact us! We’ll make your infinite scroll even more UX-friendly.

This is an update of an article published in 2020. 

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:

Sklep internetowy H&M

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.