Vlk má konečně metatagy

Když jsem programoval nový Vlkův blog, zapomněl jsem na jednu drobnost: metatagy. To jsou HTML tagy, jejichž hlavním účelem je předávání určitých informací prohlížeči.

Klasické metatagy předávají třeba informace o použité znakové sadě, případně nastavují šířku stránky. Hlavním smyslem je ale SEO neboli optimalizace webu pro vyhledávače. Údaje, které zapíšete do metatagů title a description jsou přesně ty, které se zobrazí ve výsledcích vyhledávání Googlu. Pokud nevyplníte metatag title, bude místo něj použit HTML tag title. V případě nevyplnění metatagu description si vyhledávač vybere libovolný text ze stránky a použije ho. To pro nás nemusí být vždy výhodné. Proto se snažte alespoň na tyto dva metatagy nezapomenout…

Pokud ovšem toužíte po krásném náhledu odkazu na váš web z nějaké sociální sítě, dá to trochu více práce. Pro tyto účely Facebook v roce 2010 vymyslel Open Graph protokol. Ten používá klasické metatagy, kterým přidáte atribut property jehož hodnota začíná prefixem og. Mezi základní Open Graph metatagy patří title, type, description, img a url. Vše zde popisovat a vysvětlovat nebudu. Ale například img si pár vět zaslouží. Typicky se do něj vkládá třeba náhledový obrázek článku. U Vlkova webu jsem to ale vyřešil jinak. Jelikož zde každá stránka a dokonce ani článek nemá obrázek, vytvořil jsem jeden obrázek pro všechny. Pokud chcete aby obrázek fungoval jak na Facebooku tak na Twitteru musíte se vejít do rozměrů 1200 x 630 pixelů minimálně a 1MB velikosti maximálně, poměr stran by měl činit 1.91 : 1. Do metatagu url se typicky vlkádá BaseUrl neboli základní a čistá adresa webu. Tedy např. https://vlksamotar.cz.

Měli bychom zmínit ještě jednu věc. Téměř každá sociální síť používá vlastní metatagy pro vytvoření náhledu odkazu. Open Graph protokol by ale měl být kompatibilní s většinou z nich, včetně třeba platformy MS Teams. Pokud je vaším cílem pěkná náhledová karta na Twitteru, musíte použít atribut přímo k tomu určený: twitter:card. Zde můžete nastavit několik hodnot, nejpoužívanější je asi summary_large_image.

Metatagy je dobré si vyzkoušet. Slouží k tomu mnoho aplikací, ať už od samotného Twitteru nebo Facebooku či od samostatných vývojářů, třeba opengraph.xyz.

Tímto jsem zde shrnul úplně základní informace o tématu metatagy. Pokud chcete vědět více, můžete se pustit do samostudia, internet je plný informací. Pro dnešek se tedy loučím a ozvu se zase někdy příště…