Strony internetowe oparte na JavaScript mogą wyglądać świetnie, ale czy Google je zobaczy? Coraz więcej witryn korzysta z dynamicznych frameworków JS, które zwiększają interaktywność, ale mogą jednocześnie utrudniać skuteczne pozycjonowanie. W poniższym artykule dowiesz się jak Google renderuje strony z JS, jakie są najczęstsze problemy renderowania oraz jak sobie z nimi poradzić.
Czym jest JavaScript?
JavaScript jest językiem programowania, który odgrywa kluczową rolę w tworzeniu nowoczesnych i interaktywnych stron internetowych. Umożliwia on dodawanie dynamicznych elementów takich jak animacje, formularze, galerie zdjęć, a także pozwala reagować na działania użytkownika w czasie rzeczywistym.
JavaScript jest obecnie powszechnie wykorzystywany w tworzeniu stron internetowych. Jednakże nadmierne lub nieumiejętne użycie tego języka może negatywnie wpłynąć na pozycjonowanie witryny w wyszukiwarce Google.
W jaki sposób Google przetwarza strony oparte o JavaScript?
Proces przetwarzania stron opartych o JavaScript składa się z kilku etapów, których zrozumienie jest kluczowe dla skutecznej optymalizacji SEO. Są to:
- crawlowanie;
- renderowanie;
- indeksowanie.
Źródło: https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics?hl=pl
Proces przetwarzania strony rozpoczyna się od pobrania adresu URL z kolejki i wysłania żądania HTTP. Przed rozpoczęciem skanowania, boty sprawdzają plik robots.txt, czy nie znajduje się w nim dyrektywa uniemożliwiająca pobranie zasobów.
Dlatego ważne jest, aby wszystkie niezbędne pliki JavaScript był dostępne dla botów Google, ponieważ wyszukiwarka nie renderuje kodu JS z zablokowanych plików ani stron.
Crawlowanie
Pierwszym etapem jest crawlowanie, czyli moment, kiedy bot pobiera kod źródłowy HTML, CSS oraz JavaScript ze strony. Należy wskazać, iż na tym etapie bot nie wykonuje kodu JS, a jedynie go pobiera.
Renderowanie
Drugim etapem jest renderowanie. Google umieszcza stronę w kolejce do renderowania, gdzie jest przetwarzana przy użyciu silnika opartego na Chrome. W tym etapie wykonywany jest JavaScript, a strona wyświetlana jest w taki sposób, w jaki widziałby ją użytkownik w przeglądarce. Czas trwania tego procesu może wynosić od kilku sekund do nawet kilku dni w zależności od stopnia skomplikowania strony i aktualnego obciążenia serwerów Google.
Oznacza to, że renderowanie JavaScriptu może trwać przez długi okres, przez co Googlebot może nie być w stanie przetworzyć wszystkich informacji i je pominąć.
Kolejnie Googlebot ponownie analizuje wyrenderowany kod HTML pod kątem wykrycia linków i dodaje znalezione adresy URL do kolejki indeksowania.
Indeksowanie
Kolejnie wyrenderowany kod HTML jest wykorzystywany przez Googleboty do zindeksowania strony.
Jakie problemy mogą wystąpić przy stosowaniu JavaScriptu na stronie?
Google dokłada obecnie wszelkich starań, aby strony wykorzystujące frameworki JavaScript były prawidłowo renderowane i indeksowane. Mimo to należy wskazać, ,,że nie wszystkie boty potrafią wykonywać kod JavaScript”, dlatego tak istotne jest, aby najważniejsze treści były wczytywane statycznie w kodzie HTML, a dodatkowe funkcjonalności ładowały się później za pomocą JavaScriptu.
Aby lepiej zrozumieć, z jakimi problemami możemy się mierzyć, w poniższej sekcji omówię najczęstsze błędy związane z nieprawidłowym wdrożeniem JavaScriptu.
Renderowanie treści
Treści generowane dynamicznie, czyli widoczne dopiero po załadowaniu strony i wykonaniu JavaScriptu, mogą być niewidoczne dla Googlebota, jeśli proces renderowania nie przebiegnie prawidłowo. jeśli proces renderowania nie przebiegnie poprawnie. W praktyce oznacza to, że Google może nie zindeksować kluczowych informacji, takich jak opisy produktów, nagłówki czy teksty ofertowe, jeśli nie są one dostępne w kodzie HTML już przy pierwszym załadowaniu strony, a pojawiają się dopiero po wykonaniu skryptu JS. W takiej sytuacji istnieje ryzyko, że robot w ogóle ich nie zobaczy lub dotrze do nich z opóźnieniem.
Dlatego kluczowe treści takie jak nagłówki, opisy produktów, teksty ofertowe czy struktura menu, powinny być ładowane statycznie w kodzie HTML. Zaś funkcjonalności jak np. animacja rozwijania menu były doczytywane po wyrenderowaniu strony.
Zwróć również uwagę na sposób paginacji w kategoriach produktowych lub na blogu. Jeśli zmiana widocznych treści (np. kliknięcie „Pokaż więcej”) nie powoduje zmiany adresu URL, a jedynie dynamicznie doładowuje zawartość na tej samej stronie, to Googlebot może nie mieć możliwości dotarcia do kolejnych produktów czy wpisów.
Prawidłowym rozwiązaniem jest wdrożenie klasycznej paginacji z osobnymi adresami URL dla każdej podstrony (przykład: “https://domena.pl/obuwie-sportowe/2/”) w ten sposób zapewnisz ich pełną indeksację.
Linki wewnętrzne
Linki wewnętrzne i zewnętrzne generowane przy pomocy JavaScriptu mogą nie zostać wykryte przez boty, jeśli nie są prawidłowo zbudowane. Boty szukają tradycyjnych linków <a href=”URL”>, a nie takich tworzonych dynamicznie bez atrybutu href. Jeżeli Googlebot nie zobaczy tych odnośników, nie doda ich do kolejki indeksowania, co może skutkować brakiem indeksacji części serwisu.
Dlatego właściwym rozwiązaniem jest stosowanie linków wewnętrznych i zewnętrznych z wykorzystaniem znacznika <a href=”adres-url”>.
Powolne wczytywanie obrazów
JavaScript jest często wykorzystywany do asynchronicznego ładowania obrazów. Jeśli jednak grafiki są ładowane dopiero po interakcji użytkownika lub z dużym opóźnieniem, Googlebot może ich nie zobaczyć w czasie renderowania strony. To z kolei może spowodować, że grafiki nie zostaną zindeksowane, co obniży ich widoczność w wyszukiwarce grafiki i osłabi kontekst treści.
Dlatego ważne jest, aby kluczowe grafiki takie jak: główna grafika produktu, główna grafika wpisu blogowego czy obrazy widoczne w sekcji ATF (pierwszego wyrenderowanego ekranu) były ładowane od razu i widoczne przy pierwszym wyrenderowaniu strony.
Czas wczytywania strony
Nadmierne wykorzystanie JavaScriptu może znacząco wydłużyć czas ładowania strony, zwłaszcza na urządzeniach mobilnych lub przy wolnych połączeniach internetowych. Długi czas ładowania negatywnie wpływa nie tylko na doświadczenie użytkownika, ale także na pozycje strony w wynikach wyszukiwania, ponieważ Google uwzględnia szybkość ładowania jako czynnik rankingowy, zwłaszcza w kontekście Core Web Vitals.
Aby poprawić czas wczytywania strony, warto zminimalizować liczbę oraz rozmiar skryptów JavaScript, zwłaszcza tych potrzebnych do wyrenderowania treści widocznej w obszarze ATF. Dodatkowo warto wdrożyć asynchroniczne ładowanie zasobów (np. przy użyciu atrybutów async, defer), co znacząco poprawi wydajność witryny.
Znacznik Title
Znacznik title, czyli tytuł strony, to jeden z kluczowych elementów SEO – pozwala wyszukiwarce zrozumieć, czego dotyczy dana podstrona. Jeśli jest on generowany lub modyfikowany wyłącznie przy pomocy JavaScriptu, istnieje ryzyko, że Googlebot go nie odczyta lub pobierze nieprawidłową wartość. W efekcie może to prowadzić do błędnego wyświetlania tytułu w wynikach wyszukiwania, co z kolei obniża CTR. Dlatego znacznik <Title> powinien być osadzony statycznie w kodzie HTML.
Blokada zasobów JS w pliku robots.txt
Zablokowanie dostępu do folderu z plikami, czy też zasobów JavaScript w pliku robots.txt może uniemożliwić Googlebotowi prawidłowe wyrenderowanie strony, ponieważ nie będzie on w stanie pobrać niezbędnych zasobów do jej pełnego załadowania. Upewnij się więc, że wszystkie skrypty odpowiedzialne za wyświetlanie kluczowych treści są dostępne dla botów indeksujących.
Jak sprawdzić, które elementy są wczytywane przy użyciu JS?
Skoro wiemy już, na jakie elementy należy zwrócić szczególną uwagę pod kątem SEO, warto również wskazać jak sprawdzić, czy konkretna treść na stronie jest ładowana przy użyciu JavaScriptu
Jednym z najprostszych sposobów na sprawdzenie, jest sprawdzenie adresu URL w Google Search Console. Wystarczy wkleić adres strony w górnym pasku narzędzia, a następnie kliknąć opcję „Sprawdź opublikowaną stronę”. Po zakończeniu testu można podejrzeć, jak robot widzi stronę:
- kod HTML po renderze;
- zrzut ekranu;
- lista zasobów, których nie udało się pobrać.
Jeśli w renderze brakuje ważnych elementów (np. tekstów, grafik czy linków), to znak, że mogą być one ukryte w JS i niewidoczne dla Googlebota.
Drugim sposobem jest skorzystanie z narzędzia Test wyników z elementami rozszerzonymi, w tym w pasku wyszukiwania należy wkleić adres URL strony internetowej, a następnie kliknąć przycisk “Sprawdź URL”. Analogicznie jak w przypadku Google Search Console mamy możliwość podejrzenia wyrenderowanego ekranu, sprawdzenie wyrenderowanego kodu HTML oraz zwrócenie uwagi na zasoby, których nie udało się wczytać.
Trzecim sposobem jest skorzystanie z darmowej wtyczki Web Developer, która umożliwia wyłączenie wczytywania kodu Java Script na stronie.
Dzięki temu będziesz w stanie zweryfikować czy wszystkie elementy strony wyświetlają się prawidłowo.
Widok wyrenderowanej strony bez użycia JavaScript:
Jak możemy zauważyć, na powyższym zdjęciu wszystkie elementy strony zostały wczytane bez użycia JavaScript.
Czwartym sposobem na sprawdzenie, czy konkretna treść ładowana przez JavaScript została zindeksowana jest skorzystanie z operatora site:. W tym celu w wyszukiwarce Google wpisz site:twojadomena.pl wraz z dokładnym fragmentem tekstu w cudzysłowie.
Przykład:
Jeśli strona z tym tekstem pojawi się w wynikach, oznacza to, że Googlebot był w stanie odczytać i zaindeksować dany element. Zaś brak wyniku może sugerować problemy z renderowaniem JS lub blokadą treści dla botów.
Sposoby renderowania stron
Wiedząc już, jakie problemy może powodować JavaScript, warto teraz omówić sposoby renderowania stron, w tym również samego kodu JS.
Renderowanie po stronie klienta
W przypadku renderowania po stronie klienta całość wczytywania odbywa się w pełni w przeglądarce użytkownika. Po wejściu na stronę użytkownik otrzymuje początkowo „pusty” plik HTML, który następnie przeglądarka pobiera i wykonuje skrypty JavaScript, które generują właściwą treść.
To rozwiązanie pozwala na tworzenie bardzo dynamicznych aplikacji, jednak z perspektywy SEO może być problematyczne. Wyszukiwarki, choć coraz lepiej radzą sobie z wykonywaniem JavaScript, wciąż mogą mieć trudności z prawidłowym odczytem i indeksacją zawartości generowanej po stronie klienta. W efekcie część treści może nie zostać zindeksowana.
Renderowanie po stronie serwera
Renderowanie po stronie serwera polega na tym, że serwer generuje kompletny kod HTML i przesyła go do przeglądarki użytkownika. Dzięki temu zarówno użytkownicy, jak i roboty wyszukiwarek od razu otrzymują gotową treść, bez konieczności wykonywania dodatkowych skryptów.
SSR zapewnia szybsze ładowanie strony i lepszą dostępność treści dla Googlebota oraz innych botów, co przekłada się na wyższą skuteczność SEO i lepsze pozycje w wynikach wyszukiwania.
Renderowanie dynamiczne
Dynamiczne renderowanie to hybrydowe podejście, które polega na serwowaniu różnych wersji strony w zależności od tego, kto ją odwiedza. Użytkownicy otrzymują wersję renderowaną po stronie klienta, natomiast roboty wyszukiwarek – wersję statyczną, wygenerowaną po stronie serwera.
Takie rozwiązanie pozwala zapewnić pełną dostępność treści dla botów (co jest korzystne dla SEO), jednocześnie nie obciążając nadmiernie serwera i zachowując interaktywność strony dla użytkowników.
Dynamiczne renderowanie sprawdza się szczególnie w przypadku serwisów z dużą ilością treści generowanej przez JavaScript, gdzie tradycyjne metody mogą być niewystarczające.
Podsumowanie
Podsumowując, JavaScript może znacząco wpłynąć na SEO, zwłaszcza gdy nie jest prawidłowo zaimplementowany. Kluczowe treści powinny być dostępne w statycznym HTML, a skrypty JS ładowane później.
Warto zadbać o prawidłowe renderowanie, szybkie ładowanie strony oraz dostępność linków i obrazów dla Googlebota. Zaś wybór odpowiedniej metody renderowania, takiej jak renderowanie po stronie serwera lub dynamiczne renderowanie, może znacząco poprawić indeksację i pozycjonowanie stron opartych na JavaScript.
