Generowanie uporządkowanych danych za pomocą kodu JavaScript

Nowoczesne strony internetowe korzystają z kodu JavaScript do wyświetlania obszernej zawartości dynamicznej. Używając go do generowania uporządkowanych danych w swoich witrynach, musisz zwrócić uwagę na kilka kwestii – w tym przewodniku znajdziesz sprawdzone metody i strategie implementacji. Jeśli dopiero zaczynasz, dowiedz się, jak działają uporządkowane dane.

Istnieją różne sposoby generowania uporządkowanych danych za pomocą kodu JavaScript. Oto najczęstsze z nich:

Używanie Menedżera tagów Google do dynamicznego generowania kodu JSON-LD

Menedżer tagów Google to platforma umożliwiająca zarządzanie tagami w witrynie bez edytowania kodu. Aby wygenerować uporządkowane dane za pomocą Menedżera tagów Google:

  1. Skonfiguruj i zainstaluj Menedżera tagów Google w swojej witrynie.
  2. Dodaj do kontenera nowy niestandardowy tag HTML.
  3. Wklej odpowiedni blok uporządkowanych danych w treści tagu.
  4. Zainstaluj kontener, postępując zgodnie z instrukcjami w sekcji Instalowanie Menedżera tagów Google w menu administratora kontenera.
  5. Aby dodać tag do swojej witryny, opublikuj kontener w interfejsie Menedżera tagów Google.
  6. Przetestuj implementację.

Używanie zmiennych w Menedżerze tagów Google

Menedżer tagów Google obsługuje zmienne umożliwiające korzystanie z informacji na stronie w ramach uporządkowanych danych. Zamiast duplikować informacje w Menedżerze tagów Google, używaj zmiennych, aby wyodrębniać uporządkowane dane ze strony. Zduplikowanie informacji w Menedżerze tagów Google zwiększa ryzyko niezgodności treści strony z uporządkowanymi danymi wstawionymi za pomocą Menedżera tagów Google.

Na przykład możesz utworzyć dynamicznie blok JSON-LD Recipe, który używa tytułu strony jako nazwy przepisu kulinarnego, tworząc taką zmienną niestandardową o nazwie recipe_name:

function() { return document.title; }

Następnie możesz użyć zmiennej {{recipe_name}} w niestandardowym tagu HTML.

Zalecamy tworzenie zmiennych i zbieranie za ich pomocą wszystkich potrzebnych informacji ze strony.

Oto przykład zawartości niestandardowego tagu HTML:

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

Generowanie uporządkowanych danych za pomocą niestandardowego kodu JavaScript

Innym sposobem generowania uporządkowanych danych jest użycie kodu JavaScript, za pomocą którego możesz wygenerować wszystkie uporządkowane dane lub dodawać kolejne informacje do uporządkowanych danych renderowanych po stronie serwera. W obu przypadkach wyszukiwarka Google rozpoznaje i przetwarza uporządkowane dane dostępne w DOM podczas renderowania strony. Więcej informacji o przetwarzaniu kodu JavaScript przez wyszukiwarkę Google znajdziesz w przewodniku po podstawach kodu JavaScript.

Oto przykład uporządkowanych danych generowanych za pomocą kodu JavaScript:

  1. Znajdź typ uporządkowanych danych, który Cię interesuje.
  2. Zmodyfikuj kod HTML swojej witryny, dodając fragment kodu JavaScript podobny do tego z przykładu poniżej (postępuj zgodnie z dokumentacją od dostawcy Twojego systemu CMS lub usług hostingowych albo skonsultuj się ze swoimi deweloperami).
    fetch('https://api.example.com/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = structuredDataText;
  document.head.appendChild(script);
});
  3. Sprawdź implementację, przeprowadzając test wyników z elementami rozszerzonymi.

Korzystanie z renderowania po stronie serwera

Jeśli używasz renderowania po stronie serwera, możesz też dołączyć do renderowanego wyniku niezbędne uporządkowane dane. Sprawdź w dokumentacji swojej platformy, jak wygenerować kod JSON-LD odpowiedni do danego typu uporządkowanych danych.

Testowanie implementacji

Aby upewnić się, że wyszukiwarka Google może skanować i indeksować Twoje uporządkowane dane, przetestuj implementację:

  1. Otwórz test wyników z elementami rozszerzonymi.
  2. Wpisz URL, który chcesz przetestować.
  3. Kliknij Sprawdź URL.

    Udało się: jeśli wszystko zostało zrobione prawidłowo, a narzędzie obsługuje określony typ uporządkowanych danych, zobaczysz komunikat „Strona obsługuje wyniki z elementami rozszerzonymi”.
    Jeśli testujesz typ uporządkowanych danych, który nie jest obsługiwany w wynikach z elementami rozszerzonymi, sprawdź wyrenderowany kod HTML. Jeśli wyrenderowany HTML zawiera uporządkowane dane, wyszukiwarka Google będzie mogła go przetworzyć.

    Spróbuj ponownie: jeśli zobaczysz błędy lub ostrzeżenia, najprawdopodobniej wystąpił błąd składni lub brakuje właściwości. Przeczytaj dokumentację dotyczącą Twojego typu uporządkowanych danych i upewnij się, że zostały dodane wszystkie właściwości. Jeśli problem nadal występuje, przeczytaj przewodnik dotyczący usuwania problemów z kodem JavaScript związanych z wyszukiwarką.