Rich Snippets

Česky také struktrované úryvky. Prostě graficky zajímavý obsah, který se zobrazuje ve výsledcích vyhledávání Google.

A zároveň samozřejmě jeden z nejsilnějších nástrojů z pohledu HTML kódu jednotlivých stránek pro získávání konkurenční výhody ve vyhledávači.

Rich Snippets dostupné na českém Google

Jak je z obrázku patrné, máte na českém Google šanci nechat zobrazovat recenze, recepty, události a třeba informaci zda je produkt na skladě.

Podle Google pak teoreticky ještě lidi, produkty, firmy a organizace, hudbu, ale u těch nevím jaký to bude mít vzhled ve výsledcích vyhledávání.

Chystají se ještě také výpisy pracovních pozic.

Microdata a další způsoby značení

Jsou tři možnosti jak Google poprosit o zobrazování vašeho obsahu v úryvcích. Pro nekódery je tu klikací Zvýrazňovač dat a někde na půl cesty mezi klikáním a kódem pak Pomocník, který zároveň umí vygenerovat strukturované úryvky pro e-mailové klienty (asi jen Gmail).

Protože jsme ale na kodérském webu, ukážeme si jak lze strukturované úryvky vyznačit přímo v kódu. Google doporučuje použít technologii mikrodata ve struktuře vlastní specifikace Schema.org.

Příklad – událost

Pojďme si zápis demonstrovat na schématu Event, které může označovat sportovní nebo kulturní události. Nebo taky školení:


<div itemscope itemtype="http://schema.org/Event">
  <h3 itemprop="name">
    <a href="/kurzy/webovy-frontend" itemprop="url">
          Dnešní webový frontend
      </a>
  </h3>
  <p itemprop="description">
    „Frontend update“ kurz, který citlivě mixuje novinky a osvědčené postupy webového frontendu. Ty nejdůležitější části si sami&nbsp;vyzkoušíte.
  </p>
  <p itemprop="startDate" content="2015-01-22T10:00">
    22. 1.
  </p>
  <p itemprop="location" itemscope itemtype="http://schema.org/Place">
    KC Greenpoint, Praha
  </p>
  <p itemscope itemtype="http://schema.org/Offer">
    <span itemprop="price" content="3900.00">
      3 900 Kč
      <meta itemprop="priceCurrency" content="CZK">
    </span>
  </p>
</div>

Všimněte si několika věcí:

  • startDate a jakékoliv datumy je potřeba stroji poskytnout v ISO formátu.
  • Schémata je do sebe možné zanořovat – viz zde vložené typy obsahu Place a Offer.
  • Pro vypisování informací, které nejsou v uživatelském obsahu vidět, Google doporučuje používat <meta> značku – viz priceCurrency.

Pokud se vám mikrodata v HTML úplně nelíbí (což bych se vám nedivil), můžete použít JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Event",
  "name": "Mistrovský vývoj webů na WordPressu",
  "description": "Vyvíjet weby na míru s WordPressem může být fajn zážitek. Na našem kurzu proniknete do jeho principů, chytnete jej za správný konec a vytěžíte z něj maximum.",
  "startDate": "2017-09-14T09:30",
  "url": "http:\/\/www.vzhurudolu.cz\/kurzy\/wordpress",
  "location": {
    "name": "KC Greenpoint",
    "url": "http://www.kc-greenpoint.cz",
    "@type": "Place",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Praha",
      "streetAddress": "Dvouletky 529/ 42",
      "postalCode": "100 00"
    }
  },
  "offers": {
    "@type": "Offer",
    "price": "4490",
    "priceCurrency": "Kč",
    "url": "http:\/\/www.vzhurudolu.cz\/kurzy\/wordpress"
  }
}
</script>

Data se pak nepletou s vaší HTML strukturou. JSON-LD začal Google v poslední době doporučovat.

Otestování a zobrazování v Google

Velmi vám pomůže Nástroj pro testování strukturovaných dat.

I tak je ovšem zobrazování na Google dost ve hvězdách. Kdy a zda se Rich Snippets začnou zobrazovat nemůžete nikomu garantovat, protože Google to nijak negarantuje vám. Někdy se zobrazí za pár dní, někdy to trvá měsíce, někdy se vůbec nedočkáte.

Přesto ale doporučuji úryvky připravovat. Za zkoušku dáte jen pár desítek minut svého času a efekt může být výrazný.

Komentáře