Wdrażanie renderowania dynamicznego

Przetwarzanie JavaScriptu nie jest obecnie łatwe i nie wszystkie roboty wyszukiwarek są w stanie zrobić to poprawnie lub niezwłocznie. 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ątkowy kod 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 znacznie się różnią w zależności od implementacji.

  1. Zainstaluj i skonfiguruj mechanizm renderowania dynamicznego, by przekształcić swoje treści w statyczny kod HTML, łatwiej przetwarzany przez roboty. Niektóre z najczęściej używanych mechanizmów renderowania to: Puppeteer, Rendertronprerender.io.
  2. Wybierz klienty użytkownika, które powinny odbierać statyczny kod HTML, i przejrzyj szczegóły konkretnej konfiguracji, by 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',
      'google-structured-data-testing-tool',
      '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 na 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 (np. 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 Narzędzia do testowania uporządkowanych danych, by 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 wykaże błędy w treściach lub jeśli treści nie pojawiają się w wynikach wyszukiwania Google, spróbuj rozwiązać typowe problemy wymienione poniżej. Jeśli to nie poprawi sytuacji, załóż nowy temat na forum dla webmasterów.

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. Użyj Narzędzia do testowania uporządkowanych danych, by sprawdzić, czy strona zawiera takie dane. Następnie skonfiguruj klienta użytkownika, by za pomocą Narzędzia do testowania uporządkowanych danych przetestować wstępnie renderowane treści.
  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.