Współczesne strony internetowe coraz bardziej zaskakują nas elementami interaktywnymi, które zmieniają się na naszych oczach. Do ich budowy w dużej mierze wykorzystuje się język programowania o nazwie JavaScript. Jaki wpływ ma on na indeksowanie i pozycję naszej strony w Google? Na to pytanie odpowiedź w dzisiejszym artykule.
Na początek, warto powiedzieć coś więcej o tym, czym jest właściwie JavaScript. To skryptowy język programowania służący do tworzenia dynamicznych i interaktywnych elementów na stronie internetowej. Dzięki niemu możemy zwiększać interakcję użytkownika z witryną.
Używając JavaScript na naszej stronie będziemy w stanie manipulować drzewem DOM (Document Object Model), które jest tworzone przez naszą przeglądarkę na podstawie kodu HTML pobieranego z serwera. Dzięki temu interfejsowi mamy dostęp do każdego elementu poprzez odpowiednie obiekty w JavaScript.
Niewątpliwą zaletą tego języka jest możliwość odciążenia serwerów i przeniesienie „kosztu” wyrenderowania strony na użytkownika. Problemem może być natomiast kompatybilność witryn opartych o JS z przeglądarkami oraz ich poprawne odczytywanie przez roboty indeksujące.
W raporcie udostępnionym przez firmę Statista widać, że z początkiem 2019 roku ponad 65% z 88 tysięcy ankietowanych uznało JavaScript jako najczęściej używany język programowania. Tak wysokie wartości dowodzą tego, że znajomość JS jest coraz bardziej istotna w kontekście prowadzenia działań SEO.
JavaScript a Google
Google to wyszukiwarka, która zdecydowanie najlepiej radzi sobie z indeksowaniem dynamicznie generowanych treści. Gigant cały czas pracuje nad tym, aby usprawnić algorytmy pod kątem poprawnego rozumienia zawartości stron.
Publikowane są materiały dla webmasterów, które mają pomóc w rozwiązywaniu problemów związanych z JS. Na oficjalnym profilu Google Webmasters znajdziemy serię filmów poświęconą JavaScript SEO prowadzoną przez Martina Splitta (Webmaster Trends Analyst w Google), która ma już 8 odcinków. Na stronie developers.google.com jest nawet cała sekcja poświęcona temu tematowi, a bardziej złożone przypadki możemy poruszyć na specjalnej grupie dyskusyjnej pod adresem https://groups.google.com/forum/#!forum/js-sites-wg.
Duży przełom w podejściu Google do tematu JS nastąpił w maju 2014, gdy podjęto decyzję o renderowaniu JavaScript podczas indeksowania stron.
In order to solve this problem, we decided to try to understand pages by executing JavaScript. It’s hard to do that at the scale of the current web, but we decided that it’s worth it.Źródło: https://webmasters.googleblog.com/2014/05/understanding-web-pages-better.html
Kolejną istotną wiadomością dla webmasterów była informacja, którą podzielono się podczas konferencji I/O w 2019 roku. Ogłoszono wówczas,że przy renderowaniu stron Googlebot będzie korzystał z najnowszego silnika Chromium. Przeskok z mechanizmów opartych o przeglądarkę Chrome w wersji 41 był ogromny. Dzięki temu Googlebot został wyposażony w ponad 1000 nowych funkcji w tym te związane z rozumieniem ECMAScript 6.
Jak Googlebot procesuje JS?
Należy zdawać sobie sprawę, że procesowanie stron w JavaScript, które renderowane są po stronie klienta (CSR) jest dużo bardziej zasobożerne niż w przypadku tradycyjnych stron opartych o HTML. Większe zużycie zasobów dotyczy zarówno użytkownika, jak i Googlebota (Crawl Budget).
W procesie indeksowania witryn wykorzystywany jest mechanizm zwany Caffeine. Zawiera on w sobie szereg usług takich jak WRS (Web Rendering Service).
Indeksowanie stron opartych o JavaScript odbywa się dwuetapowo.
Początkowo Googlebot wysyła żądanie HTTP do serwera i sprawdza czy pobranie zasobu jest możliwe. Kolejnym etapem jest wykonanie kodu JavaScript przez usługę WRS będącej częścią Caffeine. Jeżeli zasoby Googlebota na to nie pozwalają, renderowanie strony może zostać odłożone w czasie. Gdy zasoby na to pozwolą, kod JS jest wykonywany, a Googlebot ponownie analizuje wyrenderowany kod HTML w celu znalezienia nowych linków, które umieszcza w kolejce do crawlowania. W ostatnim etapie wyrenderowany HTML jest indeksowany.
Problemy z indeksowaniem stron w JavaScript
Pierwszym krokiem, który należy wykonać jest sprawdzenie, czy dostęp do skryptów nie jest blokowany za pomocą pliku robots.txt. Zablokowanie pliku, który modyfikuje zawartość strony spowoduje, że nie zostanie ona prawidłowo wyrenderowana.
Problemy z indeksowaniem JavaScript wynikają z tego, że Googlebot nie zachowuje się tak samo jak użytkownik i nie może wykonać pewnych interakcji. Dodatkowo, jego zasoby są ograniczone.
Jeżeli dostęp do treści wymaga interakcji użytkownika (na przykład kliknięcia) to nie będą one uwzględnione przy indeksowaniu. Chodzi tutaj o treści, które są doczytywane dopiero po akcji np. kliknięciu w button.
Ponadto, Googlebot może nie być w stanie pobrać wszystkich zasobów. Algorytm decyduje o tym, które z nich będą miały faktyczny wpływ na zawartość strony.
Googlebot and its Web Rendering Service (WRS) component continuously analyze and identify resources that don’t contribute to essential page content and may not fetch such resources.Źródło: https://developers.google.com/search/docs/guides/fix-search-javascript
W przypadku gdy wykonanie skryptu będzie zajmować zbyt dużo czasu, mogą one zostać pominięte. Zostało to potwierdzone przez Martina Splitt na Twitterze.
That's a good question. If your setup takes too long to respond, Googlebot might time out. It does affect your pages, so you wanna take a careful look at potential caching options.
— Martin Splitt at 🏡🇨🇭 (@g33konaut) June 7, 2019
Jak zweryfikować czy strona w JavaScript jest prawidłowo renderowana i indeksowana?
Jeżeli Twoja strona korzysta z JavaScript, poniżej przedstawiono pierwsze kroki, które należy wykonać w celu upewnienia się, że zawartość strony renderowana i indeksowana jest w prawidłowy sposób.
Weryfikacja witryny narzędziem URL Inspection w Google Search Console
Jeżeli jesteśmy w posiadaniu dostępu do GSC analizowanej strony, należy w pierwszej kolejności wykorzystać narzędzie URL Inspection. W tym celu wklejamy adres naszej strony w górnej części witryny.
Po krótkiej chwili, w odpowiedzi powinniśmy otrzymać informację o analizowanym adresie URL, jednak w celu sprawdzenia aktualnej wersji podstrony musimy kliknąć jeszcze na przycisk Sprawdź URL wersji aktywnej.
Po pobraniu adresu musimy wybrać Wyświetl przetestowaną stronę i zweryfikować następujące elementy:
- czy na zrzucie widoczna jest zawartość podstrony?
Zrzut nie zawiera całej podstrony a jedynie fragment.
- czy kod z zakładce HTML uwzględnia wyrenderowane treści?
Jest to najistotniejsza kwestia. Musimy zweryfikować czy elementy takie jak treść, linki, znaczniki meta oraz nagłówki zostały wygenerowane prawidłowo.
- w zakładce Więcej informacji sprawdzamy czy kod odpowiedzi jest prawidłowy oraz jakie zasoby zostały pobrane/zablokowane.
Skorzystanie z narzędzia do testu optymalizacji mobilnej
W przypadku braku dostępu do GSC możemy także wykorzystać narzędzie https://search.google.com/test/mobile-friendly. Dzięki niemu zobaczymy jak Google widzi naszą witrynę na urządzeniu mobilnym.
Podobnie jak w przypadku GSC otrzymamy takie informacje jak:
- zrzut strony,
- kod HTML uwzględniający wykonane skrypty,
- lista niewczytanych zasobów.
Upewniamy się, że w kodzie witryny znajdują się wszystkie elementy, na których indeksowaniu nam zależy (treść, linkowanie, zawartość znaczników meta).
Ręczna weryfikacja za pomocą komendy site w Google
Najszybszą metodą, aby sprawdzić czy Google dotarł do naszych treści jest sprawdzenie, czy strona wyświetla się po wpisaniu w Google komendy site:http://twojastrona.pl
Aby upewnić się, że dynamicznie ładowana treść została uwzględniona przy indeksowaniu musimy rozszerzyć nasze zapytanie o fragment tekstu w cudzysłowie.
Jeżeli w description widoczny jest wyszukiwany fragment treści oznacza to, że podstrona została prawidłowo zaindeksowana.
Weryfikacja zawartości podstrony korzystając z cache
Warto podkreślić, że posiłkowanie się zrzutem z pamięci podręcznej Google nie jest dobrym pomysłem.
Kod HTML, który jest tam widoczny bazuje tym co zostało pobrane ze strony przez Googlebota podczas ostatniej wizyty. Renderowanie elementów zostanie jednak wykonane przy użyciu naszej przeglądarki.
Podsumowując – nie dowiemy się na podstawie cache, w jaki sposób Google wyrenderował stronę.
Renderowanie JavaScript na wiele sposobów
Kod JavaScript niekoniecznie musi być renderowany po stronie użytkownika czy Googlebota. Pomimo, że jest to bardzo częsta praktyka to możliwości w tym zakresie mamy więcej.
W sytuacji, kiedy kod jest bardzo złożony i może stanowić problem dla wyszukiwarek, warto rozważyć SSR, czyli renderowanie po stronie serwera. W praktyce wygląda to tak, że klient otrzymuje już wyrenderowany kod. Rozwiązanie to, jest stosowane szczególnie chętnie w przypadku projektów zbudowanych na frameworkach opartych o JavaScript.
Poza wyżej wymienionymi rozważać możemy także renderowanie hybrydowe oraz dynamiczne, które polega na serwowaniu treści zależnie od określonych klientów użytkownika.
Podsumowanie
Warto mieć świadomość, że JavaScript jest bardzo złożonym mechanizmem zarówno dla deweloperów jak i robotów Google. Bardzo często jest on źródłem problemów związanych z wyszukiwarkami, dlatego ich wczesna identyfikacja i dostosowanie witryny do wyszukiwarki może być kluczem do sukcesu.
W życiu agencyjnym coraz częściej wykorzystujemy JS do optymalizacji witryn E-commerce opartych o zamknięte platformy SaaS. Bardzo często jest to jedyna opcja na techniczną optymalizację w sytuacjach, gdy nie ma wsparcia supportu.