Strukturovaná data a jejich zpracování ve Vyhledávání – 10. díl: Snippety k návodům

28. dubna 2023

Spravujete stránky obsahující dobré rady ve formě návodů? A líbilo by se vám, kdyby se tyto návody zobrazovaly přímo ve výsledcích vyhledávání? Stačí využít strukturovaná data. Co strukturovaná data jsou a jak je na svých stránkách pro tento účel využít, se dočtete v dalším článku ze série.

Právě čtete již 10. jubilejní díl naší série o strukturovaných datech a jejich využití ve Vyhledávání. V prvním dílu série jsme vám obecně představili typy strukturovaných dat. V následujících dílech jsme se blíže podívali na strukturovaná data ve snippetech k produktům, videím, článkům, receptům, eventům, diskuzním vláknům, filmům/seriálům a FAQ stránkám.

Jak rozšiřujeme snippety k návodům?

Snippety k návodům zobrazujeme ve výsledcích přirozeného hledání. Zaměřujeme se na dokumenty obsahující popis pracovního postupu nebo rady a doporučení. Nikoli však recepty, které mají v rámci schema.org vlastní typ. Snippety rozšiřujeme díky strukturovaným datům o následující parametry:

  • Jméno návodu
  • Popis návodu
  • Obrázek k návodu
  • Datum publikace návodu
  • Text jednotlivých kroků
  • Počet kroků

Jak získáváme strukturovaná data k návodům?

Strukturovaná data pro zmíněné parametry parsujeme přímo ze zdrojového kódu konkrétní stránky. Získáváme je z anotací typu schema.org/HowTo, schema.org/HowToSection a schema.org/HowToStep. O zpracování dat podle standardů schema.org jsme psali v prvním dílu této série.

Jak správně vyplnit strukturovaná data?

Aby se v našem Vyhledávání strukturovaná data zobrazila, je potřeba je správně vyplnit. V ukázce kódu, který můžete přidat do zdrojového kódu své stránky, vidíte, jak nadefinovat parametry stránky s návodem. U detailu každého parametru najdete informace o tom, v jakém formátu by měl být.

Ukázka schema.org

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "HowTo",
"name": "Jak uvolnit ucpaný kuchyňský dřez - wikiHow",
"image": {
  "@type": "ImageObject",
  "url": "https://www.wikihow.com/Version-4.jpg"
 },
"datePublished": "2014-09-19",
"step": [
  {
   "@type": "HowToSection",
   "name": "Uvolnění ucpaného dřezu zvonem",
   "itemListElement": [
     {
       "@type": "HowToStep",
       "text": "Naplňte částečně dřez horkou vodou."
      },
     {
       "@type": "HowToStep",
       "text": "Dejte zvon nad výpusť. Pokud máte dvojitý dřez, nacpěte do neucpané výpusti žínku, abyste zajistili, že tlak zvonu bude soustředěn na ten ucpaný."
     },
     {
        "@type": "HowToStep",
        "text": "Rychle pohybujte zvonem nahoru a dolů. Sundejte zvon z otvoru výpusti a podívejte se, jestli voda začne odtékat."
     },
     {
        "@type": "HowToStep",
        "text": "Pokračujte v použití zvonu, dokud se ucpávka neuvolní."
     }
   ]
}
</script>

Name (name)

  • Téma návodu. 
  • Například “Jak vyměnit pneumatiku”.

Description (description)

  • Popis k návodu. 
  • Například se může jednat o krátký souhrn toho, čeho se návod týká.

Obrázek k návodu (image)

  • Hlavní obrázek k návodu.
  • Podporujeme více možností zápisu:
  • https://schema.org/thumbnailUrl obsahující jenom odkaz na obrázek.
  • https://schema.org/image obsahující buď přímo odkaz nebo ImageObject.
  • Náhledy upravujeme na formát 16:9, pokud v něm už nejsou.
  • Ideální velikost obrázku je 320×180 pixelů a vyšší.
  • Obrázky větší než 3200×3200 pixelů vyřazujeme.

Datum publikace (datePublished)

Jednotlivé kroky (HowToStep)

  • Definice jednotlivých kroků návodu.
  • Každý krok má vlastní text.

Počet kroků

  • Počet kroků vypočítáme u nás, není třeba speciálně anotovat.

Za zmínku jistě stojí i jiné parametry, které sice aktuálně ve snippetech nezobrazujeme, ale do budoucna by se to mohlo změnit. Jedná se například o autora, celkovou dobu přípravy, hodnocení, seznam materiálů, seznam nástrojů nebo odhad celkových nákladů.

NÁŠ TIP: Pokud má návod několik samostatných sekcí, je možné každou definovat pomocí schema.org/HowToSection a přiřadit jí speciání jméno (schema.org/name). Aktuálně pracují naše snippety jen s jednou sekcí, ale v budoucnu by se to mohlo změnit. Stejně tak lze definovat pro každou sekci nebo dokonce krok vlastní obrázek pomocí schema.org/image.

Jak otestovat, že jste strukturovaná data vyplnili správně?

Pokud jsou strukturovaná data správně vyplněná, časem se zobrazí v našich návodových snippetech. Správnou implementaci si můžete zkontrolovat hned přes validátor. Můžete sem zadat fragment vašeho kódu obsahující schema.org anotaci a zkontrolovat, že se detekuje anotace správného typu se správně vyplněnými parametry.

V případě, že narazíte na jakékoliv problémy se strukturovanými daty ve snippetech k návodům, můžete nám je oznámit pomocí tlačítka Zpětná vazba přímo ve výsledcích vyhledávání nebo zaslat poznámku na e-mail vyhledavani@firma.seznam.cz.

Za tým Vyhledávání Petra Kubernátová

Sdílet na sítích