Produktové snippety

Použití struktrurovaných dat v e-shopu umožňuje ve výsledcích vyhledávání zobrazit podrobnější informace o prodávaných produktech. Produktové snippety rozšiřujeme díky strukturovaným datům o tyto parametry:

  • Obrázek produktu
  • Cena (částka a měna)
  • Hodnocení (hodnota a počet hodnocení)
  • Skladovost
  • Hodnocení e-shopu

Získávání strukturovaných dat pro produkty

Strukturovaná data pro zmíněné parametry parsujeme přímo ze zdrojového kódu konkrétní stránky. Většinu jich získáváme z anotací typu schema.org. Výjimku tvoří obrázky produktů, které v některých případech získáváme také z anotací typu Open Graph.

Evidujeme však některé webové stránky, které stále používají staré standardy typu data-vocabulary. V rámci revize práce se strukturovanými daty postupně přecházíme pouze na standard schema.org, na který doporučujeme přejít.

Správně vyplněná strukturovaná data

Mít správně vyplněná produktová strukturovaná data je důležité pro jejch zobrazení ve výsledcích vyhledávání. V ukázce kódu vidíte, jak lze nadefinovat parametry produktu. U detailu každého parametru najdete informace o tom, v jakém formátu by měl být.

Zobrazení produktových strukturovaných dat ve výsledcích vyhledávání

Zvýrazněné parametry

Ukázka schema.org

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "iPhone 12 128GB černá",
    "description": "Mobilní telefon - interní paměť 128 GB...",
    "image": "https://cdn.alza.cz/Foto/f5/RI/RI032c2.jpg",
    "aggergateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.8",
        "ratingCount": "126"
    },
    "offers": {
        "@type": "Offer",
        "priceCurrency": "CZK",
        "price": "22990",
        "itemCondition": "http://schema.org/NewCondition",
        "availability": "http://schema.org/InStock"
    },
    "brand": "Apple"
  }
</script>

Ukázka OpenGraph (jen pro obrázky produktů)

<script>
  <meta property="og:image" content="https://test.cz/obrazek.jpg" />
</script>

Formáty parametrů

Cena (price)

  • Musí být vždy číslo.
  • Pokud potřebujete použít desetinná místa, používejte prosím desetinnou tečku místo čárky.

Skladovost (availability)

  • Musí nabývat jedné z hodnot uvedených na schema.org.

Měna (priceCurrency)

  • Měla by mít formát dle standardu ​​ISO 4217.
  • Pokud uvedete jen cenu bez měny, ve snippetu nic nezobrazíme.
  • Pokud uvedete jen měnu bez ceny, ve snippetu nic nezobrazíme.

Hodnocení (ratingValue)

  • Číselné hodnocení na stupnici od 0.0 do 5.0.
  • Pokud hodnocení není v rozsahu 0.0–5.0, na tento rozsah ho převádíme.
  • Při použití desetinných čísel používejte desetinnou tečku místo čárky.

Počet hodnocení (ratingCount)

  • Musí být celé číslo.

Obrázek (image)

Obrázky jsou nejnovějším prvkem našich produktových snippetů. Pro jejich zobrazení v našich výsledcích vyhledávání je třeba vyplnit atribut image nebo og:image. Avšak pozor: obrázky prochází naším procesem kontroly kvality, proto musí splňovat následující podmínky:

  1. Jde skutečně o obrázek produktu, který:
    • je reprezentativní,
    • ukazuje produkt, nikoli jeho okolí,
    • nemá barevné rámečky, nápisy, vodoznaky a další podobné prvky (viz ukázky).
  2. Jeho velikost je ideálně 200×200 px, nebo:
    • není větší než 3200×3200 pixelů a 5MB,
    • není menší než 120×120 pixelů,
    • nemá extrémní poměr stran (viz ukázky).
  3. Je ve formátu JPEG, PNG nebo WEBP,
  4. Náš Seznambot má přístup k jejich stažení (občas se stává, že obrázky jsou nedostupné kvůli zákazu v robots.txt.).
  5. Na prvním místě by měl být co nejlepší obrázek produktu (respektujeme pořadí odkazů na obrázky na stránce).

Stažené obrázky dále zpracováváme. Odstraňujeme různé rámečky, bílá pozadí a celkově přizpůsobujeme obrázek našim potřebám. Nemůžeme tedy garantovat, že se všechny aspekty původního obrázku zachovají.

Ukázky nevhodných obrázků

Obrázky neobsahují produkt

Obrázky neobsahují produkt Obrázky neobsahují produkt Obrázky neobsahují produkt

Obrázky jsou moc úzké (mají moc extrémní poměr stran), nebudou v náhledu vidět

Příliš úzké obrázky Příliš úzké obrázky

Ukázka nesprávného pořadí odkazů na obrázky

Pořadí obrázků Pořadí obrázků

První odkaz vede na obrázek vlevo, kde není vůbec jasné, že se jedná o hodinky. Naopak na obrázku vpravo jsou hodinky jasně vidět.

Hodnocení e-shopů

Hodnocení e-shopů v našich snippetech přebíráme ze Zboží.cz. Aby se hodnocení mohlo ve snippetu zobrazit, musí splňovat několik podmínek. Jednou z nich je například to, že hodnocení musí být od ověřených uživatelů. Pokud chcete, aby se hodnocení vašeho e-shopu ve snippetu zobrazovalo, je potřeba nejprve svůj e-shop registrovat jako obchod na Zboží.cz. Poté nasaďte měření konverzí, aby bylo možné zjistit, zda je zákazník ověřený či nikoliv.

Ukázka hodnocení e-shopu

E-shop

 

Časté problémy při zpracovávání strukturovaných dat

Na stránce by se měla nacházet pouze strukturovaná data pro jeden odpovídající produkt. V případě, že je nutné, aby obsahovala přidružené produkty, je na místě použít vazbu isRelatedTo nebo isSimilarTo. Pokud dokument obsahuje několik různorodých produktů, může dojít k problémům při zpracování (např. nemusí obsah snippetu sedět s náhledovým obrázkem).

Cena by měla být popsána strukturou Offer, ve které je třeba vyplnit price pro hodnotu ceny a priceCurrency pro měnu. Cena ani měna by se neměly nacházet přímo v Product. Je ideální struktury definované ve schema.org neohýbat, ani nepřizpůsobovat vlastním potřebám.

Ověření správného vyplnění strukturovaných dat

Pokud jsou strukturovaná data správně vyplněna, časem se zobrazí v našich produktový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.

Pomohl Vám tento článek? Ne

Kontaktujte nás