Jesteśmy teraz na LinkedIn: aby uzyskać wiadomości i zasoby z wyszukiwarki Google dotyczące tego, jak ułatwić znajdowanie witryny, obserwuj nas na LinkedIn.

Renderowanie dynamiczne jako obejście problemu

W niektórych witrynach kod JavaScript generuje na stronie dodatkową treść, gdy jest wykonywany w przeglądarce. Jest to nazywane renderowaniem po stronie klienta. Wyszukiwarka Google wykonuje JavaScript, ale niektóre funkcje JavaScriptu są w niej objęte ograniczeniami. Na niektórych stronach mogą występować problemy polegające na tym, że treść nie wyświetla się w wyrenderowanym kodzie HTML. Inne wyszukiwarki mogą ignorować kod JavaScript i nie wykrywać treści przez niego generowanej.

Renderowanie dynamiczne to rozwiązanie tymczasowe dla witryn, w przypadku którego treści generowane przez JavaScript nie są dostępne dla wyszukiwarek. Serwer renderowania dynamicznego wykrywa boty, które mogą mieć problemy z treściami wygenerowanymi przez JavaScript, i udostępnia im wersję renderowaną przez serwer bez JavaScriptu, a użytkownikom wyświetla wersję wyrenderowaną po stronie klienta.

Renderowanie dynamiczne, będąc formą obejścia problemu, nie jest rozwiązaniem zalecanym, bo zwiększa złożoność całego procesu i wymaga dodatkowych zasobów.

Witryny, które powinny korzystać z renderowania dynamicznego

Renderowanie dynamiczne jest tymczasowym rozwiązaniem w przypadku możliwych do zindeksowania, publicznych, szybko zmieniających się treści generowanych przy użyciu kodu JavaScript lub treści wykorzystujących funkcje JavaScript, które nie są obsługiwane przez interesujące Cię roboty. Nie wszystkie witryny muszą korzystać z renderowania dynamicznego. Istnieją lepsze rozwiązania, które opisaliśmy w tym artykule o renderowaniu w internecie.

Jak działa renderowanie dynamiczne

W przypadku renderowania dynamicznego serwer WWW musi wykrywać roboty (np. sprawdzając klienta użytkownika). Żądania robotów są przekierowywane do mechanizmu renderowania, a żądania użytkowników są obsługiwane w zwykły sposób. W razie potrzeby mechanizm renderowania dynamicznego wyświetla wersję treści odpowiednią dla robota, na przykład może wyświetlić wersję ze statycznym kodem HTML. Mechanizm renderowania dynamicznego można włączyć na wszystkich lub wybranych stronach.

Diagram pokazujący działanie renderowania dynamicznego. Przedstawia serwer wyświetlający początkową treść HTML i JavaScript bezpośrednio w przeglądarce. Dla kontrastu pokazuje też serwer wyświetlający początkowe kody HTML i JavaScript za pomocą mechanizmu renderowania, który konwertuje te kody na statyczny HTML. Następnie mechanizm renderowania przekazuje statyczny kod HTML robotowi.

Renderowanie dynamiczne to nie maskowanie

Googlebot nie uważa renderowania dynamicznego za maskowanie i nie postrzega go w ten sposób, o ile generuje ono podobną treść.

Podczas konfiguracji renderowania dynamicznego witryna może generować strony błędów. Googlebot nie uważa tych stron błędów za maskowanie i traktuje błąd jak każdą inną stronę błędu.

Za maskowanie można uznać używanie dynamicznego renderowania do wyświetlania użytkownikom i robotom zupełnie innych treści. Na przykład witryna, która użytkownikom wyświetla stronę o kotach, a robotom stronę o psach, może być uznana za maskowanie.

Wdrażanie renderowania dynamicznego

Aby skonfigurować renderowanie dynamiczne na potrzeby swoich treści, postępuj zgodnie z naszymi ogólnymi wskazówkami. Musisz sprawdzić szczegóły konkretnej konfiguracji, bo dane te różnią się znacznie w zależności od implementacji.

Zainstaluj i skonfiguruj mechanizm renderowania dynamicznego (na przykład Puppeteer, Rendertron, lub prerender.io), aby przekształcić swoje treści w statyczny kod HTML, łatwiej przetwarzany przez roboty.
Wybierz klienty użytkownika, które mają odbierać statyczny kod HTML, i przejrzyj szczegóły konkretnej konfiguracji, żeby sprawdzić, jak zaktualizować lub dodać klienty użytkownika. Oto przykładowa lista typowych klientów użytkownika w oprogramowaniu pośredniczącym usługi Rendertron:
```
export const botUserAgents = [
  'googlebot',
  'bingbot',
  'linkedinbot',
  'mediapartners-google',
];
```
Jeśli renderowanie wstępne spowalnia działanie Twojego serwera lub zauważysz dużą liczbę żądań dotyczących renderowania wstępnego, rozważ zapisywanie wstępnie renderowanych treści w pamięci podręcznej lub weryfikowanie, czy żądania są wysyłane przez wiarygodne roboty.
Określ, czy klienty użytkownika wymagają treści na komputery czy urządzenia mobilne. Wykorzystaj dynamiczne wyświetlanie treści, by udostępnić odpowiednią wersję na komputery lub urządzenia mobilne. Oto przykład konfiguracji określającej, czy klient użytkownika wymaga treści na komputery, czy urządzenia mobilne:
```
isPrerenderedUA = userAgent.matches(botUserAgents)
isMobileUA = userAgent.matches(['mobile', 'android'])


if (!isPrerenderedUA) {
} else {
  servePreRendered(isMobileUA)
}
```
W tym przykładzie ciąg if (!isPrerenderedUA) {...} spowoduje użycie zwykłych danych, treści renderowanych po stronie klienta. W razie potrzeby ciąg else { servePreRendered(isMobileUA)} spowoduje wyświetlenie wersji mobilnej.
Skonfiguruj swój serwer, by wybranym robotom dostarczał statyczny kod HTML. W zależności od wykorzystywanej technologii możesz to zrobić na kilka sposobów, np.:
- Żądania serwera proxy wysyłane przez roboty do mechanizmu renderowania dynamicznego.
- Renderowanie wstępne w ramach procesu wdrażania i skonfigurowanie serwera pod kątem wyświetlania robotom statycznego kodu HTML.
- Wbudowanie renderowania dynamicznego w niestandardowy kod serwera.
- Przekazywanie robotom treści statycznych z usługi wstępnego renderowania.
- Wykorzystywanie na potrzeby serwera oprogramowania pośredniczącego (na przykład rendertron).

Weryfikacja konfiguracji

Po zakończeniu implementacji renderowania dynamicznego przeprowadź te testy adresu URL, aby sprawdzić, czy wszystko działa zgodnie z oczekiwaniami:

Przetestuj treści na urządzenia mobilne i komputer za pomocą narzędzia do sprawdzania adresów URL, aby upewnić się, że są one też widoczne na renderowanej stronie (zobaczysz, jak odczytuje ją Google).
Udało się: treści na urządzenia mobilne i komputer, które zobaczy użytkownik, spełniają Twoje oczekiwania.

Spróbuj ponownie: jeśli widoczne treści nie spełniają Twoich oczekiwań, przejdź do sekcji rozwiązywania problemów.
Jeśli korzystasz z uporządkowanych danych, użyj testu wyników z elementami rozszerzonymi, aby sprawdzić, czy są one prawidłowo renderowane.
Udało się: uporządkowane dane wyświetlają się zgodnie z Twoimi oczekiwaniami.

Spróbuj ponownie: jeśli uporządkowane dane nie spełniają Twoich oczekiwań, przejdź do sekcji rozwiązywania problemów.

Rozwiązywanie problemów

Jeśli narzędzie do sprawdzania adresów URL wykazało błędy w treściach lub treści nie pojawiają się w wynikach wyszukiwania Google, spróbuj rozwiązać typowe problemy. Jeśli nadal coś nie działa, załóż nowy temat na Forum pomocy Centrum wyszukiwarki Google.

Treści są niekompletne lub wyglądają inaczej

Przyczyna problemu: mechanizm renderowania może być błędnie skonfigurowany lub aplikacja internetowa może być z nim niezgodna. Nieprawidłowe renderowanie treści może też być niekiedy spowodowane przekroczeniem limitów czasu.

Rozwiązanie problemu: zapoznaj się z dokumentacją konkretnego mechanizmu renderowania, aby debugować konfigurację renderowania dynamicznego.

Długi czas odpowiedzi

Przyczyna problemu: korzystanie z przeglądarki bez interfejsu graficznego do renderowania stron na żądanie często wydłuża czas odpowiedzi, przez co roboty mogą anulować żądanie i nie zindeksować Twoich treści. Długi czas odpowiedzi może też spowolnić indeksowanie treści przez roboty.

Rozwiąż problem

Skonfiguruj pamięć podręczną na potrzeby wstępnie renderowanego kodu HTML lub utwórz statyczną wersję HTML swoich treści w ramach procesu kompilacji.
Włącz pamięć podręczną w konfiguracji (np. kierując roboty do pamięci podręcznej).
Za pomocą narzędzi do testowania takich jak test wyników z elementami rozszerzonymi lub webpagetest (z niestandardowym ciągiem znaków klienta użytkownika uwzględnionego na liście klientów użytkownika robota Google) sprawdź, czy roboty szybko pobierają Twoje treści. Twoje żądania nie powinny przekroczyć limitu czasu.

Komponenty internetowe nie są renderowane zgodnie z oczekiwaniami

Przyczyna problemu: model Shadow DOM jest odizolowany od reszty strony. Rozwiązania do renderowania, takie jak Rendertron, nie widzą treści w odizolowanym modelu Shadow DOM. Aby uzyskać więcej informacji, zapoznaj się ze sprawdzonymi metodami korzystania z komponentów internetowych.

Rozwiąż problem

Załaduj kod polyfill webcomponents.js dla niestandardowych elementów i modelu Shadow DOM.
Aby sprawdzić, czy treść pojawia się w wyrenderowanym kodzie HTML używanego mechanizmu renderowania, użyj testu wyników z elementami rozszerzonymi lub narzędzia do sprawdzania adresów URL.

Brak uporządkowanych danych

Przyczyna problemu: brak klienta użytkownika uporządkowanych danych lub nieuwzględnienie tagów skryptu JSON-LD w plikach wyjściowych może powodować błędy dotyczące uporządkowanych danych.

Rozwiąż problem

Aby mieć pewność, że uporządkowane dane znajdują się na stronie, użyj testu wyników z elementami rozszerzonymi. Następnie skonfiguruj klienta użytkownika, aby przetestować wstępnie wyrenderowaną treść za pomocą Googlebota (na komputerze lub urządzeniu mobilnym).
Upewnij się, że dynamicznie renderowany kod HTML Twoich treści zawiera tagi skryptu JSON-LD. Aby uzyskać więcej informacji, zapoznaj się z dokumentacją używanego mechanizmu renderowania.