Co vás v článku čeká?
- V čem mi pomohou strukturovaná data
- Implementace strukturovaných dat
- Analyzování současné šablony webu
- Výběr témat ze Schema.org
- Zadání pro programátory
- Nasazení strukturovaných dat
- Kontrola nasazení
Ačkoli se vyhledávače stále vyvíjí, ne vždy je jim jasné, co se na webových stránkách nachází. Abychom jim usnadnili práci s pochopením obsahu, můžeme používat právě tzv. strukturovaná data – ty se nasazují do zdrojového kódu a slouží, aby si jej mohli vyhledávače mohli přečíst a poznamenat. Získají tak přehled, jak máte webové stránky strukturizovány – označíte si např. ve zdrojovém kódu, kde se vyskytují nadpisy, podnadpisy, obrázky produktů, ceny produktů, termíny školení, adresa firmy a mnoho dalšího. Odvětví je v dnešní době už opravdu hodně, strukturovaná data se stále zlepšují a vyvíjí. Podívejte se na přehled těch nejpoužívanějších oblastí, kde se strukturovaná data nasazují:
- struktura stránek (webpage)
- osoby/lidi
- produkty / ecommerce
- firmy, organizace
- recepty
- události/novinky
- multimediální obsah
- hudba
- video obsah
Příklad - Strukturovaná data u produktů ve výsledcích vyhledávání pro dotaz “iphone 6s 64gb":
V čem mi pomohou strukturovaná data
Jak jsem již zmínil, strukturovaná data především pomohou vyhledávačům aby pochopily strukturu vašich webových stránek a de facto obecně tak zjistí, o čem přibližně píšete (je např. jasné, že když budete mít nasazeny strukturovaná data na produktech, vyhledávač pozná, že se jedná o e-shop).
Ale to není vše. Strukturovaná data vám pomohou se odlišit ve výsledcích vyhledávání (v SERPu) od konkurence. Můžete být daleko výraznější, pokud konkurence tyto značky nepoužívá. Hledající člověk si vás může daleko více všimnout, když budete mít ve výsledku vyhledávání další údaje – např. hvězdičky (hodnocení) u produktů/článků. U e-shopu dokonce hledající člověk může zjistit dostupnost či cenu.
Pokud byste se rozhodli pro nasazení strukturovaných dat, určitě byste měli vědět i o studii, která prokázala, že nasazení strukturovaných dat na webové stránky zvýšilo proklikovost ze SERPu až o 30% – Search Engine Land.
Jedinou nevýhodou strukturovaných dat je, že s nimi dokáže pracovat Google. Seznam je ještě na začátku a zatím nám dokáže zobrazit ve výsledcích vyhledávání drobečkovou navigaci – resp. osnovu stránky.
Implementace strukturovaných dat
Pokud se rozhodnete nasadit strukturovaná data, pak jsem pro vás sepsal krátký návod, který vám může pomoci. Nejdříve je nutné si uvědomit, jakými kroky budeme postupovat:
- analyzování současné šablony webových stránek
- výběr relevantních témat ze Schema.org
- zadání pro programátory
- nasazení strukturovaných dat
- kontrola nasazení strukturovaných dat
Analyzování současné šablony webu
Nejdříve je zapotřebí se podívat, jak máte navrženou šablonu webových stránek. Pokud používáte např. WordPress, určitě je vaše šablona rozdělena podle toho, co má zobrazovat. Ve většině WordPress šablon naleznete šablonu pro výpis článků, šablonu pro výpis detailu článku, šablonu pro zobrazení statických stránek, ale např. i šablonu s výpisem produktů nebo nebo detailu produktu.
My se zaměříme typologicky na nasazení strukturovaných dat na e-shop. Už je vám možná jasné, že v šabloně pro detail produktu můžete označit např. cenu, skladovost nebo hodnocení produktu, Proto je důležité si nejdříve zmapovat/analyzovat, jak pracuje vaše současná šablona. Když už jsme u WordPressu, je důležité zmínit, že některé šablony již mají strukturované data nasazeny.
Podívejte se, jak např. může vaše šablona být rozvržena:
- hlavní stránka
- statické stránky (stránka Kontakt, O nás,…)
- výpisy (výpisy produktů, výpisy článků, výpisy akcí,…)
- detaily (detail článku, detail produktu, detail školení,…)
- hlavička stránky (nejspíš zde bude logo, interní vyhledávání, drobečková navigace)
Výběr témat ze Schema.org
Nyní se zaměříme, co vlastně budeme pomocí strukturovaných dat označovat. Celý přehled dostupných parametrů můžete vidět na Schema.org v dokumentaci. Jelikož se Schema.org stále rozvíjí, vyplatí se sledovat i blog, kde můžete zjistit např. nově přidané strukturované data. Jelikož jsme si dali jako příklad nasazení strukturovaných dat do e-shopu, pak se zaměříme na toto schéma – http://schema.org/Product. Jak je vidět, data v Product mají hned několik vlastností, které můžete použít. U většiny e-shopů nasazuji:
- název produktu
- obrázek produktu
- cena produktu (http://schema.org/Offer)
- dostupnost produktu (http://schema.org/Offer)
- skladovost produktu (http://schema.org/Offer)
- popis produktu
- hodnocení produktu
- případně pak další vlastnosti – záleží na zaměření e-shopu (výrobce – http://schema.org/Organization; váha – http://schema.org/QuantitativeValue;…)
Jestliže jste si již našli všechny potřebné údaje ke strukturovaným datům, které chcete nasazovat, pak můžeme začít s umístěním značek do HTML kódu.
Zadání pro programátory
Máme tedy přehled stránek (šablon), které typologicky používáme. Také už víme, jaké jsou současná schémata na Schema.org, a tak můžeme začít s přípravou zadání pro programátory (či sami pro sebe si můžete udělat menší přehled) – resp. pokud jste si již vybrali údaje, které budete chtít označkovat.
Abychom vytvořili zadání pro programátory, pak máme hned dvě možnosti. Buď sáhneme po nástroji, který nám pomůže s označením dat na stránkách s následným stažením zdrojového kódu včetně označkování (v HTML kódu) nebo můžeme šablony vlastnoručně nakódovat podle příkladů na Schema.org.
Pokud chcete raději použít nástroj, pak musíte být přihlášený do Google Search Console. V levém menu pod položkou “Vzhled vyhledávání” je odkaz na “Zvýrazňovač dat”. Do nástroje poté stačí zadat URL adresa stránky, kterou budete chtít značkovat a díky přehlednému rozhraní si můžete značky jednoduše naklikat. Pak už stačí stáhnout vygenerovaný zdrojový kód a přeposlat ho programátorům.
My se však podíváme i na druhou variantu – označíme si strukturovaná data sami. Jelikož tato činnost je mi blízká – v rámci dílčích úprav se na mne obracejí klienti s poptávkou na nasazení strukturovaných dat. Proto jsem se rozhodl napsat obecný návod, který vám může pomoci (níže).
Nasazení strukturovaných dat
Za svoji působnost jsem se setkal s programátory, kteří mi řekli, že nasazení bude trvat několik desítek hodin, někteří však úpravu provedli během pár hodin či dokonce u některých projektů na WordPress nasazuji strukturovaná data pro e-shop řádově v minutách – vždy záleží na vašem použitém systému či případně pak na šabloně.
Aby byl příklad jednoduchý a lehce pochopitelný, rozhodl jsem se nasadit strukturovaná data na stránku “Kontakt”, kde jsou základní údaje o mně (nicméně stejným způsobem můžete označit produktovou stránku). Na Schema.org jsem si vybral, že na tuto stránku použiji schéma “LocalBusiness”. Jak již můžete vidět, díky tomuto schématu můžete např. označit – otevírací dobu, adresu, jméno/název firmy, propojit s Google My Business mapou, telefonním číslem a mnoho dalšího. Podíváme se podrobněji na označení adresy (myslím si, že ta se vyskytuje na všech důvěryhodných webových stránkách, tudíž pokud nemáte nasazeno, můžete vyzkoušet).
Na stránce máme tabulku, která před nasazením strukturovaných dat vypadá následovně:
A po nasazení strukturovaných dat, resp. označení dat v HTML kódu pak vypadá výstup takto:
Pokud tedy např. máte WordPress a vytvořenou stránku kontakt podobně jako já, vidíte, že nasazení je celkem jednoduché. Stačí si přepnout při editaci stránky na HTML kód a data si označkovat.
Kontrola nasazení
Pokud jste si nasadili strukturovaná data na váš web, pak je vždy dobré si je zkontrolovat – zda při implementaci nedošlo k nějaké závažné chybě či nám vyhledávač nedá případné další doporučení.
Kontrolu nasazení můžeme udělat 2 postupy. Buď použijete nástroj od Google – Test strukturovaných dat, nebo použijete Google Search Console. U druhého postupu se nebudu rozepisovat, v rámci GSC je pro vás připravena sekce “Jak na Google Search Console”.
Podívejme se tedy na první způsob kontroly. Stačí přejít do nástroje “Test strukturovaných dat” a zadat URL adresu, na které chcete zkontrolovat nasazení. Případně pak můžete vložit zdrojový kód stránky (hodí se, pokud stránka není zatím přístupná veřejnosti).
Nástroj vám po analyzování zobrazí, jaká strukturovaná data jsou na konkrétní URL (případně v kódu) implementovány a zda neobsahují chyby.
Článek budu nadále aktualizovat, určitě ještě udělám rozbor podporovaných formátů. Ačkoli jsme si v tomto článku ukázali jak nasadit strukturovaná data do HTML kódu, existují i další řešení (např. JSON-LD).
