Generování strukturovaných dat pomocí JavaScriptu

Moderní webové stránky používají JavaScript k zobrazování velkého množství dynamického obsahu. Při používání JavaScriptu ke generování strukturovaných dat na webových stránkách je třeba dát pozor na několik věcí a tento průvodce se zabývá osvědčenými postupy a strategiemi implementace. Pokud se strukturovanými daty teprve začínáte, můžete se dozvědět více o tom, jak strukturovaná data fungují.

Existují různé způsoby generování strukturovaných dat pomocí JavaScriptu, ale nejčastější jsou tyto:

• Google Tag Manager
• Vlastní JavaScript

Použití nástroje Google Tag Manager k dynamickému generování JSON-LD

Google Tag Manager je platforma, která umožňuje spravovat značky na webových stránkách bez nutnosti upravovat kód. Chcete-li pomocí nástroje Google Tag Manager generovat strukturovaná data, postupujte podle následujících kroků:

1. Nastavte a nainstalujte Google Tag Manager na svůj web.
2. Do kontejneru přidejte novou vlastní značku HTML.
3. Do obsahu značky vložte požadovaný blok strukturovaných dat.
4. Nainstalujte kontejner podle pokynů v části Nainstalovat Google Tag Manager v nabídce správce kontejneru.
5. Chcete-li tag přidat na web, publikujte kontejner v rozhraní Google Tag Manager.
6. Otestujte svou implementaci.

Používání proměnných v aplikaci Google Tag Manager

Správce značek Google (GTM) podporuje proměnné pro použití informací na stránce jako součásti strukturovaných dat. Pomocí proměnných získáte strukturovaná data ze stránky namísto duplikování informací v GTM. Duplikování informací v GTM zvyšuje riziko nesouladu mezi obsahem stránky a strukturovanými daty vloženými prostřednictvím GTM.

Můžete například dynamicky vytvořit blok Recept JSON-LD, který používá název stránky jako název receptu, vytvořením následující vlastní proměnné s názvem recipe_name:

function() { return document.title; }

Ve vlastním tagu HTML pak můžete použít {{název_receptu}}.

Doporučujeme vytvořit proměnné, které budou shromažďovat všechny potřebné informace ze stránky pomocí proměnných.

Zde je příklad obsahu vlastní značky 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>

💡Poznámka: Předchozí ukázka předpokládá, že jste v GTM definovali proměnné recipe_name, recipe_image a recipe_author.

Generování strukturovaných dat pomocí vlastního JavaScriptu

Dalším způsobem, jak můžete generovat strukturovaná data, je použití JavaScriptu, který buď generuje všechna strukturovaná data, nebo přidává další informace k vykresleným strukturovaným datům na straně serveru. V obou případech může vyhledávač Google při vykreslování stránky porozumět strukturovaným datům, která jsou k dispozici v DOM, a zpracovat je. Chcete-li se dozvědět více o tom, jak vyhledávač Google zpracovává JavaScript, přečtěte si průvodce základy JavaScriptu.

Zde je příklad strukturovaných dat generovaných JavaScriptem:

1. Najděte typ strukturovaných dat, která vás zajímají.
2. Upravte kód HTML své webové stránky tak, aby obsahoval fragment jazyka JavaScript, jako je následující příklad (nahlédněte do dokumentace svého systému CMS nebo poskytovatele hostingu nebo se zeptejte svých vývojářů).

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. Otestujte svou implementaci pomocí testu bohatých výsledků.

Vykreslování na straně serveru

Pokud používáte vykreslování na straně serveru, můžete do vykresleného výstupu zahrnout také požadovaná strukturovaná data. V dokumentaci k vašemu frameworku zjistíte, jak vygenerovat JSON-LD pro typ strukturovaných dat, o který máte zájem.

Otestujte svou implementaci

Chcete-li se ujistit, že vyhledávač Google může procházet a indexovat vaše strukturovaná data, otestujte svou implementaci:

1. Otevřete test bohatých výsledků.
2. Zadejte adresu URL, kterou chcete otestovat.

💡Doporučujeme používat vstup URL místo vstupu kódu, protože při použití vstupu kódu existují omezení JavaScriptu (například omezení CORS).

3. Klikněte na tlačítko Test URL.

Úspěch: Pokud jste vše provedli správně a váš typ strukturovaných dat je v nástroji podporován, zobrazí se zpráva “Page is eligible for rich results”. Pokud testujete typ strukturovaných dat, který není testem bohatých výsledků podporován, zkontrolujte vykreslený HTML. Pokud vykreslené HTML obsahuje strukturovaná data, vyhledávač Google je bude schopen zpracovat.

Zkuste to znovu: Pokud se zobrazí chyby nebo varování, jedná se s největší pravděpodobností o chybu syntaxe nebo chybějící vlastnost. Přečtěte si dokumentaci ke svému typu strukturovaných dat a ujistěte se, že jste přidali všechny vlastnosti. Pokud problém přetrvává, nezapomeňte se podívat také do příručky o opravě problémů souvisejících s vyhledáváním v JavaScriptu.

Překlad, odborná a obsahová korektura: SEOPRAKTICKY.CZ

Použité zdroje

1. Generate Structured Data with JavaScript | Google Search Central | Documentation | Google for Developers. (n.d.). Google for Developers. [online]. Dostupné z:  https://developers.google.com/search/docs/appearance/structured-data/generate-structured-data-with-javascript