
Case study: lokalna firma budowlana
25 czerwca 2024
Strategia link buildingu – istotne czynniki przy jej tworzeniu
5 sierpnia 2024Renderowanie strony internetowej przez Google to proces w który robot wyszukiwarki pobiera zawartość (kod) strony www i poddaje ją analizie, aby wyświetlać ją w wynikach organicznych. Jest to proces związany z indeksowaniem witryny przez Google.
W czynności tej Googlebot analizuje kod HTML oraz JavaScript witryny, aby zrozumieć jakiego tematu dotyczy oraz jakie słowa kluczowe zawiera, jak wygląda struktura serwisu i jego warstwa graficzna.
Poprawna analiza renderowania zawartości w Google jest bardzo istotnym elementem SEO, ponieważ to jak Google „widzi” naszą witrynę wpływa na jej późniejsze rankingi w wyszukiwarce.
Dlaczego proces renderowania strony przez Google jest tak ważny?
Renderowanie jest kluczowym etapem SEO, ponieważ decyduje o tym jak wyszukiwarki „interpretują” witrynę oraz czy uznają ją za wartościową dla użytkowników. Proces ten jest istotny z kilku powodów:
- Interpretacja dynamicznych treści
Współczesne strony internetowe coraz częściej wykorzystują zaawansowane technologie, takie jak JavaScript, do dynamicznego generowania treści. Googlebot musi być w stanie prawidłowo zinterpretować i wyrenderować te treści, aby móc je uwzględnić w wynikach wyszukiwania. Jeśli Googlebot nie zdoła prawidłowo wyrenderować strony, ważne elementy zawartości mogą zostać pominięte, co może negatywnie wpłynąć na widoczność strony w wynikach wyszukiwania.
- Zrozumienie układu strony i nawigacji
Renderowanie pozwala Googlebotowi zrozumieć strukturę i układ strony. Poprzez renderowanie, Googlebot może ocenić, jak różne elementy strony są rozmieszczone i jak użytkownicy mogą się po niej poruszać. To zrozumienie jest kluczowe dla prawidłowego indeksowania stron oraz oceny ich użyteczności i jakości.
- Wykrywanie ukrytych problemów technicznych
Podczas renderowania Googlebot jest w stanie zidentyfikować problemy techniczne, które mogą nie być widoczne na pierwszy rzut oka. Może to obejmować błędy w kodzie JavaScript, problemy z ładowaniem zasobów, takie jak obrazy czy pliki CSS, oraz inne problemy, które mogą negatywnie wpływać na wydajność strony. Wczesne wykrycie tych problemów pozwala na ich szybkie rozwiązanie, co z kolei poprawia doświadczenie użytkowników oraz pozycje strony w wynikach wyszukiwania.
- Optymalizacja doświadczenia użytkownika
Renderowanie przez Google pozwala na ocenę, jak strona działa na różnych urządzeniach i przeglądarkach. Dzięki temu możliwe jest zidentyfikowanie potencjalnych problemów z responsywnością strony i jej dostępnością na różnych platformach. Optymalizacja pod kątem doświadczenia użytkownika jest kluczowa, ponieważ Google coraz bardziej skupia się na wskaźnikach takich jak Core Web Vitals, które mierzą jakość doświadczenia użytkownika na stronie.
Jeśli Googlebot nie może poprawnie zrenderować Twojej witryny – nie zostanie ona zaindeksowana. Tym samym wszystkie inne czynności związane z pozycjonowaniem takie jak linkbuilding czy optymalizacja tekstów zwyczajnie nie przyniosą żadnych korzyści. Renderowanie jest więc ściśle powiązane z indeksowaniem.
Bez poprawnego renderowania Twoja strona internetowa dla Google nie będzie istnieć!
Jak Google renderuje stronę?
Renderowanie strony przez Google to skomplikowany proces, który jest kluczowy dla prawidłowego indeksowania i rankingowania treści w wynikach wyszukiwania. Google stosuje zaawansowane technologie, aby odwiedzać, interpretować i indeksować zawartość stron internetowych. Oto szczegółowy opis tego procesu:
- Crawling (skanowanie)
Proces renderowania strony przez Google zaczyna się od skanowania. Googlebot, robot wyszukiwarki, regularnie odwiedza strony internetowe w celu zebrania informacji o ich zawartości.
- Wysłanie żądania: Googlebot wysyła żądanie HTTP do serwera, prosząc o dostęp do strony.
- Pobranie zawartości: Serwer zwraca dokument HTML, który jest podstawową wersją szkieletu strony.
- Analiza zawartości
Po pobraniu dokumentu HTML Googlebot przystępuje do jego analizy.
- Analiza HTML: Googlebot przetwarza kod HTML, analizując strukturę strony, linki, meta tagi oraz inne elementy.
- Pobieranie zasobów: Googlebot (w drugim obiegu) pobiera dodatkowe zasoby, takie jak pliki CSS, JavaScript, obrazy, aby mieć pełny obraz strony.
- Wstępne indeksowanie: Googlebot tworzy wstępną wersję indeksu strony na podstawie pobranej zawartości.
- Renderowanie
Renderowanie jest kluczowym etapem, w którym Googlebot interpretuje stronę w sposób zbliżony do tego, jak robi to przeglądarka internetowa użytkownika.
- Wykonanie JavaScriptu: Googlebot wykonuje skrypty JavaScript, które mogą modyfikować lub generować dodatkową zawartość strony. To kluczowy etap dla stron, które korzystają z dynamicznego ładowania treści.
- Budowanie DOM: Googlebot tworzy Document Object Model (DOM), który reprezentuje strukturę strony po wykonaniu wszystkich skryptów.
- Pobieranie dodatkowych zasobów: Jeśli podczas renderowania okaże się, że potrzebne są dodatkowe zasoby (np. obrazy ładowane dynamicznie), Googlebot ponownie je pobiera.
- Tworzenie widoku strony: Na podstawie DOM i pobranych zasobów Googlebot tworzy widok strony, podobnie jak przeglądarka wyświetla stronę użytkownikowi.
- Indeksowanie po renderowaniu
Po renderowaniu Googlebot przechodzi do finalnego etapu indeksowania.
- Analiza treści: Googlebot analizuje pełną treść strony, uwzględniając wszystkie zmiany wprowadzone przez skrypty JavaScript.
- Aktualizacja indeksu: Googlebot aktualizuje indeks wyszukiwarki o nowe informacje i treści uzyskane podczas renderowania.
- Ocena SEO: Googlebot ocenia jakość strony, analizując elementy takie jak szybkość ładowania, responsywność, dostępność i inne wskaźniki Core Web Vitals.
- Ranking
Na podstawie zindeksowanych danych, Googlebot ocenia wartość strony i ustala jej pozycję w wynikach wyszukiwania.
- Analiza jakości: Googlebot ocenia jakość strony na podstawie wielu czynników, takich jak treść, linki, struktura, wydajność.
- Algorytmy rankingowe: Googlebot stosuje zaawansowane algorytmy, aby ustalić ranking strony w wynikach wyszukiwania.
- Wyświetlanie w wynikach: Na koniec procesów renderowania i indeksowania strona jest gotowa do wyświetlania w wynikach wyszukiwania Google.
Jak widzisz podczas renderowania Googlebot interpretuje zawartość strony, podobnie jak przeglądarka użytkownika, aby zrozumieć jej strukturę i treść. Istnieją dwie główne metody renderowania: po stronie serwera (SSR – Server-Side Rendering) i po stronie klienta (CSR – Client-Side Rendering). Obie metody mają swoje zalety i wady oraz różne zastosowania w kontekście SEO.
Renderowanie po stronie serwera polega na generowaniu kompletnej strony HTML na serwerze i przesyłaniu jej do przeglądarki użytkownika lub Googlebota. Proces ten wygląda następująco:
- Żądanie strony: Użytkownik lub Googlebot wysyła żądanie HTTP do serwera.
- Generowanie strony: Serwer przetwarza żądanie, wykonuje wszelkie niezbędne skrypty i generuje pełny dokument HTML.
- Przesyłanie strony: Serwer przesyła gotowy dokument HTML do przeglądarki użytkownika lub Googlebota.
- Wyświetlanie strony: Przeglądarka wyświetla gotową stronę użytkownikowi.
Źródło: https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering?hl=pl
Zalety SSR:
- Szybsze pierwsze załadowanie: Użytkownik od razu otrzymuje pełny dokument HTML, co skraca czas do pierwszego wyświetlenia treści (Time to First Byte – TTFB).
- Lepsza indeksacja przez Google: Ponieważ cała treść jest dostępna w dokumencie HTML, Googlebot może łatwiej i szybciej zindeksować stronę.
- SEO i dostępność: Lepsza widoczność dla botów wyszukiwarek i poprawa dostępności dla użytkowników, którzy mają wyłączony JavaScript.
Wady SSR:
- Obciążenie serwera: Większe obciążenie serwera, ponieważ musi on generować pełne strony HTML dla każdego żądania.
- Skalowalność: Może być mniej skalowalne w porównaniu z CSR, zwłaszcza przy dużym ruchu.
Renderowanie po stronie klienta (CSR)
Renderowanie po stronie klienta polega na przesyłaniu minimalnego HTML i pobieraniu oraz wykonywaniu skryptów JavaScript na urządzeniu użytkownika, które następnie generują pełną stronę. Proces ten wygląda następująco:
- Żądanie strony: Użytkownik lub Googlebot wysyła żądanie HTTP do serwera.
- Przesyłanie szkieletu strony: Serwer przesyła minimalny dokument HTML oraz pliki JavaScript do przeglądarki.
- Wykonywanie skryptów: Przeglądarka pobiera i wykonuje skrypty JavaScript, które generują pełną stronę.
- Wyświetlanie strony: Przeglądarka wyświetla wygenerowaną stronę użytkownikowi.
Zalety CSR:
- Mniejsze obciążenie serwera: Serwer przesyła tylko minimalny HTML, co zmniejsza jego obciążenie.
- Dynamiczne aplikacje: Lepsze wsparcie dla dynamicznych aplikacji i interaktywnych elementów.
Wady CSR:
- Dłuższy czas do interaktywności: Większy czas do pierwszego wyświetlenia treści (TTFB), ponieważ przeglądarka musi pobrać i wykonać skrypty JavaScript.
- Problemy z indeksacją: Googlebot może mieć trudności z pełnym renderowaniem stron, jeśli skrypty JavaScript są źle napisane lub opóźniają się w ładowaniu.
- Zależność od JavaScript: Strona może być niedostępna lub niekompletna dla użytkowników, którzy mają wyłączony JavaScript.
Co ważne – wyniki renderowania strony między przeglądarką a Googlebotem mogą się różnić. Wpływ na to mają różnego rodzaju czynniki takie jak zablokowanie dostępu do JavaScript przez Googlebota lub plików CSS. Dlatego istotnym jest, aby przeanalizować stronę główną oraz pozostałe podstrony serwisu pod kątem renderowania przez Googlebota. W dalszej części artykułu opisałem 3 darmowe narzędzia dzięki którym możesz skutecznie przeprowadzić ten proces.
Jaki wpływ na renderowanie strony ma JavaScript?
Aby jak najlepiej odpowiedzieć na powyżej postawione pytanie poprosiłem o odniesienie do tematu mojego branżowego kolegę i uznanego eksperta SEO Grzegorza Strzelca – twórcę działów SEO w Onet i TVN oraz autora popularnego kursu o pozycjonowaniu PapaSEO.com.
„Przede wszystkim musimy zdać sobie sprawę, że kod JS na stronie wymaga od Google dodatkowej pracy. Strukturalnie wygląda to tak, że Google gdy odwiedza dowolny adres URL, pobiera z niego cały kod HTML. Jego analiza przez program wykrywa wszelkie elementy sekcji <head> oraz <body>. W sekcji <head> oprócz różnych meta danych i dyrektyw, zazwyczaj znajdują się też linki do plików zasobów koniecznych do wyrenderowania strony, które też Google musi pobrać. W sekcji <body> znajduje się natomiast cała wyświetlana zawartość naszej strony.
I teraz, w obu tych sekcjach czyli <head> i <body> mogą i zazwyczaj znajdują się style, pliki obrazów, fontów, a w <body> elementy kontenerów i całej semantyki, jak nagłówki wraz z ich treścią, paragrafy, linki itd. Z nimi sprawa jest prosta. Nie są to elementy języka programowania, tylko kodu wynikowego jakim jest html. Renderowanie strony na ich bazie jest proste i relatywnie tanie. Zresztą wielu z nas w branży SEO, robiło najróżniejsze scrapery, analizery kodu itd. To naprawdę prosta sprawa.
Jednak w obu tych sekcjach mogą i zazwyczaj znajdują się też skrypty oraz pliki z kodem JS. One już nie są prostym wskazaniem <p>, <a> czy <h1>. Wymagają wykonania, bo JS, to w przeciwieństwie do HTML, język programowania. Czyli, aby zobaczyć co się zadzieje na stronie z jego użyciem, należy ten kod JS wykonać. To wymaga dodatkowych zasobów i Google taki kod wykonuje w mówiąc kolokwialnie – dodatkowym obiegu. Czyli najpierw trawiony jest kod HTML i analizowana jego zawartość i cała dostępna treść strony, a następnie kod JS trafia do dodatkowej kolejki, gdzie musi zostać wykonany i nasza strona zostaje przez program uzupełniona o to, co wyrenderowało się po wykonaniu JS.
I teraz, problemy jakie to może stworzyć czy stwarza. Taki kod JS może robić różne rzeczy. Od aspektów dekoracyjnych i stylistycznych, gdzie jest zresztą najczęściej stosowany, do ładowania wręcz całości kodu HTML strony. W tym pierwszym przypadku zazwyczaj nie ma żadnego problemu. W takim podejściu, cała treść naszej strony jest już w kodzie HTML i dostępna dla bota przed renderowaniem JS. JS nie ma tu wpływu na to, że znów używając kolokwializmu, bot będzie zaskoczony, że strona nagle zostaje uzupełniona o dodatkową treść.
Istnieje natomiast możliwość i czasem jest to stosowane przez projektantów i koderów, że taki kod JS, ładuje część, albo czasem wręcz całość kodu HTML, za pomocą skryptów. W skrajnych przypadkach, powoduje to, że kod HTML naszej strony wygląda wręcz tak, że nie ma w nim nic, oprócz odesłania do pliku JS. Po prostu HTML bez żadnej treści, którą finalnie widzi użytkownik. Takie podejście powoduje, że cała nasza strona musi być renderowana we wspomnianym drugim obiegu. To może wpływać i wpływa np. na czas indeksowania naszej strony a czasem wręcz na w ogóle możliwość indeksowania.
Wyobraźmy sobie hipotetycznie, że świat Internetu, składa się tylko z kodu HTML, CSS i multimediów. Google ma zasoby, aby skanować ten świat na bieżąco. I nagle cały świat zaczyna używać JS. Czyli Google musi albo mieć przynajmniej dwa razy więcej zasobów (choć raczej więcej, bo renderowanie JS jest o wiele bardziej skomplikowane niż renderowanie HTML), aby przeskanować świat, lub musi zwolnić przynajmniej dwukrotnie, tym samym nie dostarczając tak świeżych danych jak by mógł. To oczywiście pewne uproszczenie, ale myślę, że już wiesz do czego dążę. JS nie ma takiego priorytetu jak kod HTML. Stąd często obserwuje się problemy z indeksowaniem stron, które generują treść i strukturę strony za pomocą JS.
Ponadto, kod JS potrafi być skomplikowany i czasem Google może jak wspomniałem wcześniej, nie podołać w ogóle poprawnemu jego renderowaniu. Przykładowo – Google nie może wykonać żadnych akcji na stronie, jak np. naciśnięcie na button. Jeśli ten button i jego naciśnięcie przez człowieka, jest jedynym sposobem na wykonanie skryptu JS i załadowanie np. sporej części treści w kodzie HTML (np. za jakimś tabem), to Google tego po prostu nie zrobi i o tej treści się nie dowie. Tylko tu od razu wytłumaczenie. Mam na myśli sytuację, w której JS ładuje niedostępny dotąd na stronie kod HTML. Nie pomylmy się z sytuacją, w której ta treść jest w kodzie HTML, a używamy JS tylko do tego aby ją odkryć, bo np. jest schowana stylem CSS.
Oczywiście, to tylko niektóre, a większość z tych niedogodności da się rozwiązać i są na to sposoby. Wiele z nich pokazuję w moim szkoleniu SEO pod nazwą PapaSEO. Nie próbuję więc przekonać, że JS to samo zło, ale do tego, że należy się z nim obchodzić z wiedzą, jakie skutki może powodować, aby móc im przeciwdziałać. Pozdrawiam, Grzegorz Strzelec”
Jak bezpłatnie sprawdzić renderowanie strony w Google – narzędzia
- Google Search Console
Pierwszą metodą weryfikacji poprawności renderowania jaką należy wziąć na tapet jest narzędzie dla webmasterów od Google. Aby sprawdzić renderowanie strony w tym narzędziu powinniśmy posiadać zweryfikowaną stronę.
Następnie w głównym widoku z lewego menu wybieramy funkcję „Sprawdzenie adresu URL”, a w górnym polu podajemy url, który chcemy poddać badaniu.
Następnie klikamy „enter” i czekamy aż Google pobierze informacje o aktualnie zaindeksowanej (lub nie) podstronie.
W kolejnym kroku wybieramy opcję „Wyświetl zaindeksowaną stronę” lub „Poproś o zaindeksowanie”.
Po prawej stronie wysunie się pasek na którym otrzymamy zinterpretowany HTML strony ostatniego indeksowania, zrzut ekranu (wynik renderowania) oraz więcej informacji o zaindeksowanej podstronie.
Wybieramy opcję „Zrzut ekranu” oraz „Sprawdź URL wersji opublikowanej”.
W kolejnym podglądzie otrzymamy zrzut ekranu (wynik renderowania) naszej strony przez Google. Jest to wynik renderowania dla wersji mobilnej. Co ważne – Google pokazuje wyłącznie fragment strony. Jeśli chcemy upewnić się, że nasza strona jest w 100% dobrze renderowana przez Google powinniśmy sprawdzić kod HTML (w menu obok).
- Sitebulb
Sitebulb to jedno z lepszych na rynku narzędzi do analizy SEO serwisów. Szczególnie ciekawa jest warstwa graficzna, która moim zdaniem wyróżnia się na tle konkurencji. Przedstawione przez narzędzie analizy są po prostu ładne.
Sitebulb w wersji trial (do pobrania ze strony https://sitebulb.com/download/) oferuje możliwość przeprowadzania kilku czynności SEO, a w tym analizy renderowania strony już na poziomie pojedynczego adresu URL.
Po zainstalowaniu programu przechodzimy do funkcji „Single Page Analysis”.
Następnie wprowadzamy adres URL, który chcemy poddać analizie, klikamy ikonkę koła zębatego, aby wprowadzić odpowiednie ustawienia naszego crawlera. W tym punkcie wybieramy User Agenta z którego ma korzystać nasza analiza oraz timeout renderowania – zalecany na 5 sekund. Klikamy „Check” i czekamy aż program wykona analizę.
Narzędzie potrzebuję kilka chwil na przeanalizowanie witryny. Po skończonej analizie przechodzi do zakładki „Screenshots”, gdzie możemy podejrzeć to „jak Google widzi moją stronę”.
- Technicalseo.com
Ostatnim narzędziem które wykorzystuję w swojej pracy np. przy audytach SEO jest strona technicalseo.com i narzędzie „Fetch & Render” dostępne bezpośrednie pod adresem URL https://technicalseo.com/tools/fetch-render/.
W narzędziu sprawdzimy renderowanie naszej strony wykorzystując do tej czynności wskazane przez nas roboty wyszukiwarek. Do wyboru mamy między innymi:
– Googlebot smartphone,
– Googlebot,
– Googlebot News,
– Bingbot,
– Yahoo!
Proces weryfikacji renderowania w tym narzędziu jest znacznie uproszczony. Należy w odpowiednich oknach dialogowych podać: adres strony, wybrać robota (User Agent Bot np. Googlebot) oraz zaznaczyć funkcję „Render”. Następnie klikamy przycisk „Fetch & Render”.
Podsumowanie
Dokładne zrozumienie i optymalizacja procesu renderowania pozwala na lepsze indeksowanie treści, zrozumienie struktury strony, wykrywanie problemów technicznych oraz optymalizację doświadczenia użytkownika.
Wszystkie te czynniki razem przyczyniają się do poprawy pozycji strony w wynikach wyszukiwania i zwiększenia jej widoczności w internecie. Renderowanie strony możesz sprawdzić za pomocą kilku narzędzi, w tym również Google Search Console.
Proces renderowania strony przez Google jest fundamentalnym elementem strategii SEO – zadbaj o to, aby Twoja strona poprawnie renderowała się w Google.