Wdrażanie renderowania dynamicznego

Przetwarzanie JavaScriptu nie jest obecnie łatwe i nie wszystkie roboty wyszukiwarek są w stanie zrobić to szybko i poprawnie. Mamy nadzieję, że w przyszłości ten problem zostanie rozwiązany. Na razie w ramach jego obejścia zalecamy renderowanie dynamiczne. Polega ono na przełączaniu się między treściami renderowanymi po stronie klienta i wstępnie wyrenderowanymi w zależności od określonych klientów użytkownika.

Witryny, które powinny korzystać z renderowania dynamicznego

Renderowanie dynamiczne jest dobrym 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. Warto zwrócić uwagę, że ten rodzaj renderowania stanowi obejście dla robotów.

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.

  1. 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.
  2. 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',
    ];
  3. 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.
  4. 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 na urządzenia mobilne:
    isPrerenderedUA = userAgent.matches(botUserAgents)
    isMobileUA = userAgent.matches(['mobile', 'android'])
    
    if (!isPrerenderedUA) { } else { servePreRendered(isMobileUA) }
  5. 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, by sprawdzić, czy wszystko działa zgodnie z oczekiwaniami:

  1. Przetestuj swoje treści mobilne za pomocą testu optymalizacji mobilnej, by sprawdzić, czy Google je widzi.

    Udało się: treści mobilne, 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.

  2. Przetestuj treści na komputer za pomocą narzędzia do sprawdzania adresów URL, by upewnić się, że są one też widoczne na renderowanej stronie (zobaczysz, jak odczytuje ją Googlebot).

    Udało się: treści na komputery, 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.

  3. 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 test optymalizacji mobilnej wykazał 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, by 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

  1. Skonfiguruj pamięć podręczną na potrzeby wstępnie renderowanego kodu HTML lub utwórz statyczną wersję HTML swoich treści w ramach procesu kompilacji.
  2. Włącz pamięć podręczną w konfiguracji (np. kierując roboty do pamięci podręcznej).
  3. Za pomocą narzędzi do testowania takich jak test optymalizacji mobilnej 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

  1. Załaduj kod polyfill webcomponents.js dla niestandardowych elementów i modelu Shadow DOM.
  2. Aby sprawdzić, czy treść pojawia się w wyrenderowanym kodzie HTML używanego mechanizmu renderowania, użyj testu optymalizacji mobilnej 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

  1. 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).
  2. 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.