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 pośrednictwem mechanizmu renderowania, który konwertuje te kody na statyczny HTML. Następnie mechanizm renderowania przekazuje statyczny kod HTML robotowi.

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, 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 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) }
  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. Oto kilka przykładów:
    • Żą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.

    gotowe Udało się: treści mobilne, które zobaczy użytkownik, odpowiadają Twoim oczekiwaniom.

    błąd 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).

    gotowe Udało się: treści na komputer, które zobaczy użytkownik, odpowiadają Twoim oczekiwaniom.

    błąd 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 poprawnie renderowane.

    gotowe Udało się: uporządkowane dane wyświetlają się zgodnie z Twoimi oczekiwaniami.

    błąd 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

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

gotowe Rozwiązanie problemu: zapoznaj się z dokumentacją konkretnego rozwiązania do renderowania, by debugować konfigurację renderowania dynamicznego.

Długi czas odpowiedzi

błąd Przyczyna problemu: korzystanie z przeglądarki pozbawionej interfejsu do renderowania stron na żądanie często wpływa na wydłużenie czasu 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.

gotowe Rozwiązanie problemu

  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. Sprawdź, czy roboty szybko pobierają Twoje treści, 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). Twoje żądania nie powinny przekroczyć limitu czasu.

Brak uporządkowanych danych

błąd 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.

gotowe Rozwiązanie problemu

  1. Użyj Narzędzia do testowania uporządkowanych danych, by sprawdzić, czy strona zawiera takie dane. Następnie skonfiguruj klienta użytkownika, by przetestować wstępnie renderowane treści za pomocą Narzędzia do testowania uporządkowanych danych.
  2. Upewnij się, że dynamicznie renderowany kod HTML Twoich treści zawiera tagi skryptu JSON-LD. Zapoznaj się z dokumentacją używanego mechanizmu renderowania, by uzyskać więcej informacji.

Wyślij opinię na temat...