JavaScript a SEO – co należy wiedzieć?

JavaScript to język programowania pozwalający na tworzenie interaktywnych stron internetowych. Jego popularność zawdzięczana jest możliwości tworzenia dynamicznych i przyjaznych dla użytkownika witryn. Czy jest on jednak przyjazny dla wyszukiwarek internetowych i wpływa pozytywnie na SEO? W tym artykule dowiesz się, jak Google przetwarza strony z JavaScript i jakie problemy w związku z tym mogą pojawić się po drodze, a także jak sobie z nimi radzić. 

Czym jest JavaScript?

JavaScript to popularny język programowania stosowany do tworzenia stron internetowych. Bardzo chętnie korzystają z niego sklepy internetowe. Wykorzystywany jest do projektowania dynamicznych i interaktywnych serwisów.  Dzięki temu na stronie mogą pojawić się takie elementy jak galerie zdjęć, formularze, pop-upy czy animowane grafiki. JavaScript pozwala na reakcję strony na działania użytkownika, np. wypełnienie formularza, scrollowanie strony. Stosowanie JavaScriptu może pozytywnie wpływać na UX strony i zachęcać użytkowników do korzystania z niej.

Skrypty JavaScript można umieścić bezpośrednio w kodzie HTML, w odrębnym pliku .js z odnośnikiem w sekcji head lub na zewnętrznym serwerze.  

Język JavaScript stał się bardzo popularny i chętnie stosowany na stronach. Jeśli jednak zależy nam na wysokich pozycjach w wyszukiwarce, należy używać skryptów z rozwagą. Powodem jest sposób, w jaki Google przetwarza i renderuje strony z JavaScript. 

Jak Google przetwarza strony z JavaScript?

Aby pozycjonowanie stron internetowych przeprowadzone było prawidłowo, należy zapoznać się z tym, w jaki sposób Googlebot przetwarza kod JavaScript. Proces przetwarzania stron dzieli się na trzy etapy: skanowanie, renderowanie i indeksowanie.

Źródło: https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics

Droga robota Google rozpoczyna się od pobrania adresu URL z kolejki i wysłania żądania http. Przed rozpoczęciem skanowania, robot wchodzi do pliku robots.txt, aby sprawdzić, czy może pobrać dane zasoby. Następnie bot sprawdza odpowiedzi z innych adresów URL w atrybucie href i dodaje je do kolejki indeksowania. 

Strony zawierające jedynie HTML i CSS nie stanowią problemu dla Googlebota. Roboty czytają i przetwarzają kod, a następnie indeksują adresy URL. Gdy serwis jednak zawiera dodatkowo JavaScript, bot musi wyrenderować kod. Systemem obsługującym renderowanie jest Web Rendering Service (WRS). Renderowanie JavaScript może trwać długo, przez co Google może nie przetworzyć wszystkich informacji i je pominąć. Wynika to z tego, że robot może jednorazowo crawlować określoną ilość adresów – istotne jest zatem crawl budget naszej strony. Nawet jeśli Google nie jest w stanie w pełni wyrenderować witryny, nadal może zaindeksować tylko początkowy kod HTML.

JavaScript a pozycjonowanie stron – jakie problemy mogą wystąpić?

Javascript SEO wpisuje się w działania technicznego SEO mające usprawnić crawlowanie, renderowanie i indeksowanie stron zawierających JavaScript, a także pozwalające na lepsze pozycje w wyszukiwarce. 

Google dokłada wszelkich starań, aby strony używające JavaScriptu były bezproblemowo indeksowane. Aktualnie nie jest to jednak odpowiednio dopracowane i nadal mogą pojawić się błędy podczas przetwarzania skryptów. Jeśli chcemy zatem osiągać wysokie pozycje w wyszukiwarkach stosując JavaScript, należy zadbać o prawidłową optymalizację. 

Jakie problemy mogą wystąpić, stosując JavaScript na stronie?

• Przetwarzanie i uruchamianie plików JavaScript bywa bardzo czasochłonne nie tylko dla robotów Google, ale także dla użytkowników. Duża ilość skryptów na stronie może znacznie ją spowolnić.
• Gdy witryna posiada dużą zawartość kodu JavaScript, Google może mieć problem z zaindeksowaniem treści, dopóki strona nie zostanie w pełni wyrenderowana
• Zdarza się, że Google nie widzi linków na stronie dopóki nie zostanie wyrenderowana.
• Jak wspomniano wcześniej, każda strona posiada ograniczony crawl budget, przez co długie renderowanie może skończyć się niepełnym przetworzeniem zawartości strony.

Należy mieć na uwadze, że Googlebot nie zachowuje się jak przeglądarka, która pobiera wszystkie zasoby strony internetowej. Celem bota jest przeszukiwanie istotnych zasobów w całym Internecie. Ze względu na ilość zasobów w sieci, Googlebot aby zoptymalizować swoją wydajność nie pobiera ich wszystkich z serwera. Algorytmy Google starają się wykryć, czy dany zasób jest istotny i decydują, czy warto go pobrać czy też nie. Ponadto, jeśli po wyrenderowaniu zawartości Google stwierdzi, że strona niewiele się zmieniła, może przestać renderować ją w przyszłości. 

Googlebot nie zachowuje się również jak użytkownik. Jeśli jakaś treść jest dostępna po kliknięciu, scrollowaniu lub innej interakcji,  nie zostanie ona zaindeksowana. 

Jak tworzyć strony z JavaScript przyjazne SEO?

Czasem roboty Google mogą nie przetworzyć niektórych fragmentów JavaScript, dlatego należy unikać zawierania w skrypcie istotnych elementów wspomagających pozycjonowanie stron internetowych. Oto miejsca, na które należy zwrócić szczególną uwagę na JavaScript pod kątem SEO:

• Kod strony – warto zwrócić uwagę, czy większość kodu napisana jest w JavaScript, czy są to jedynie pojedyncze skrypty. Duża ilość skryptów może spowalniać stronę, co również wpływa na SEO.
• Linki wewnętrzne – często w przypadku stron e-commerce, linki są umieszczone w JavaScript (np. podobne produkty, inni wyświetlili również itp.), przez co Google może nie widzieć tych adresów – skutkuje to tym, że reputacja strony nie będzie przechodzić na linkowaną stronę i nie będą widoczne anchor teksty adresów. Linki powinny być wstawione na stronę z użyciem a href.
• Treść – niekiedy opis strony głównej lub kategorii umieszczane są w JavaScript. Opisy te mogą posiadać istotne słowa kluczowe, przez co brak widoczności przez bota może wpłynąć negatywnie na pozycje strony. 
• Paginacja strony – W przypadku paginacji polegającej na klikaniu w przycisk, aby wczytać większą zawartość strony, (np. w sklepach internetowych możliwość wczytania większej ilości produktów bez przechodzenia na kolejną stronę) istnieje zagrożenie, że roboty nie zobaczą tej zawartości, ponieważ potrzebna jest interakcja (kliknięcie w przycisk). 
• Opinie i komentarze – bloczki z opiniami użytkowników często są umieszczane w JavaScript. Opinie i komentarze mogą być dobrym uzupełnieniem treści na naszej stronie oraz zawierać istotne słowa kluczowe, dlatego warto, aby były one widoczne dla Google. 
• Adresy URL z # – takie adresy nie zostaną zaindeksowane przez Google. 

Istotne jest, aby skrypty JavaScript nie były zablokowane w pliku robots.txt, ponieważ uniemożliwia to renderowanie, a zawartość strony nie zostanie w pełni odczytana.

Warto również używać cache dla zasobów, co wspomoże renderowanie, a także zastosować asynchroniczne ładowanie skryptów w celu przyspieszenia wczytywania strony.

Sposoby renderowania stron internetowych

Istnieje wiele opcji renderowania JavaScript. Warto skupić się na dwóch z nich– renderowanie po stronie klienta oraz renderowanie po stronie serwera. 

Renderowanie po stronie klienta (CSR) odbywa się w pełni w przeglądarce. Może to stanowić problem dla wyszukiwarek, ponieważ niektóre funkcje JavaScript mogą być objęte ograniczeniami, przez co Google może mieć problem z odczytaniem całego kodu. Niektóre wyszukiwarki mogą nawet całkowicie pominąć kod i nie wykryć treści. 

Renderowanie po stronie serwera (SSR) może być dobrym rozwiązaniem dla rozbudowanych stron posiadających wiele skryptów JavaScript. Serwer renderuje stronę i zamienia w plik HTML. Jest jednak minus tego rozwiązania – takie renderowanie mocno obciąża serwer. 

Dobrym sposobem na zadowolenie zarówno użytkowników, jak i robotów jest renderowanie dynamiczne, które polega na połączeniu dwóch powyższych sposobów. Serwer renderowania dynamicznego udostępnia robotom mającym problem z przetworzeniem JavaScriptu wersję statyczną renderowaną przez serwer, a użytkownikom stronę wyrenderowaną po stronie klienta. Dzięki temu roboty są w stanie odczytać cały kod, a serwer jest mniej obciążony. Aktualnie Google zaleca używanie renderowania dynamicznego jako tymczasowe rozwiązanie dla szybko zmieniających się treści wykorzystujące JavaScript. Renderowanie dynamiczne można włączyć na wszystkich lub pojedynczych stronach w witrynie.

Źródło: https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering?hl=pl 

Jak sprawdzić, w których elementach na stronie używany jest JavaScript?

Sprawdzenie elementów opartych na JavaScript na stronie możemy sprawdzić za pomocą wyłączenia w przeglądarce Chrome obsługi JavaScript. Aby to zrobić, otwórz Chrome i kliknij trzy kropki w prawym górnym rogu, a następnie Ustawienia. Przejdź do Prywatność i bezpieczeństwo, a następnie kliknij Ustawienia witryn. Na dole w zakładce Treść wybierz JavaScript. Oznacz „Nie zezwalaj witrynom na używanie JavaScriptu”. Wchodząc na stronę, zobaczymy jak wygląda strona bez wygenerowanego JavaScriptu – w ten sposób dowiemy się, które elementy na stronie obsługiwane są za pomocą skryptów. 

Elementy JavaScript na stronie sprawdzisz również za pomocą darmowego narzędzia WWJD (What Would JavaScript Do?). Wystarczy wpisać adres URL strony, aby zobaczyć zrzuty ekranu strony z wyłączonym i włączonym JavaScriptem.

Analizę JavaScript na stronie można przeprowadzić również za pomocą narzędzia Screaming Frog SEO Spider. Należy wejść kolejno w zakładki Configuration > Spider > Extraction, przescrollować na sam dół i zaznaczyć „Store HTML” oraz „Store rendered HTML”. Następnie należy przejść do zakładki Rendering i w liście rozwijanej wybrać JavaScript. 

Po przeskanowaniu strony w dolnej zakładce kliknij View Source i wybierz adres, który chcesz sprawdzić. Zobaczysz dwa okna – jedno z oryginalnym HTML, a drugie z wyrenderowanym HTML. Możesz sprawdzić różnice w obu kodach klikając „Show Differences”.

JavaScript wykryjesz również za pomocą wtyczek do przeglądarek. Za pomocą wtyczki Web Developer możesz wyłączyć JavaScript i zobaczyć, które elementy znikną ze strony. 

Jak sprawdzić, czy występują problemy z indeksowaniem stron z JavaScript?

Istnieje kilka sposób na zweryfikowanie, czy wyszukiwarka posiada problemy z przetworzeniem JavaScriptu na stronie. Opcją, od której warto rozpocząć weryfikację problemów, jest skorzystanie z narzędzia Google Search Console. W pasku wyszukiwarki wklejamy adres strony, który chcemy sprawdzić. Następnie po prawej stronie klikamy Sprawdź opublikowaną stronę. Po załadowaniu należy kliknąć w test wersji opublikowanej, gdzie można sprawdzić kod HTML, zrzut ekranu oraz jakich zasobów nie udało się pobrać. 

Można również skorzystać z testu optymalizacji mobilnej znajdującym się pod adresem https://search.google.com/test/mobile-friendly. Po wpisaniu interesującego nas adresu URL zostanie on sprawdzony i wyświetli nam się w jaki sposób Google widzi naszą stronę w wersji mobilnej. Klikając „Wyświetl przetestowaną stronę” dostaniemy taki sam panel jak w Google Search Console z kodem HTML, zrzutem ekranu oraz innymi informacjami. 

Innym sposobem na sprawdzenie problemów z indeksowaniem JavaScript jest użycie w wyszukiwarce Google operatora Site:https://twojadomena.pl i wpisanie interesującej nas treści, którą chcemy sprawdzić. Chcąc wyszukać pełne zdanie w niezmienionej formie, należy zastosować cudzysłowów. Jeśli w wynikach wyszukiwania ukaże nam się strona ze sprawdzanym elementem, będzie to znaczyło, że została ona pomyślnie zaindeksowana. 

O tym, jak Google radzi sobie z JavaScript, możesz dowiedzieć się, porównując kod strony z DOM. W przeglądarce Chrome źródło strony znajdziesz klikając prawym przyciskiem myszy i wybierając „Wyświetl źródło strony” lub za pomocą przycisków CTRL+U. DOM wyświetlisz klikając prawy przycisk myszki i wybierając „Zbadaj”.

Nie należy używać pamięci podręcznej Google do sprawdzenia, jak Google indeksuje JavaScript. Wskazuje to jedynie w jaki sposób przeglądarka zinterpretowała kod HTML, który zebrał Googlebot. Nie pokazuje to, w jaki sposób wyszukiwarka przetwarzała treści. 

JavaScript a SEO – podsumowanie

JavaScript jest niewątpliwie istotnym elementem nowoczesnych i interaktywnych stron. Należy jednak pamiętać, że może spowalniać stronę, a źle wprowadzony, niekorzystnie wpłynąć w szczególności na pozycjonowanie sklepów internetowych. Oczywiście nie oznacza to, że powinniśmy całkowicie zrezygnować ze stosowania JavaScriptu – warto jednak być uważnym i stosować się do rozwiązań służącym robotom. Odpowiednia optymalizacja przyniesie korzyści zarówno użytkownikom, jak i wyszukiwarkom.