Meta tagy

Meta tagy jsou umístěny v hlavičce stránky a nejsou běžnému návštěvníkovi zobrazeny. Vyhledávače je v současné době v mnoha případech neberou v potaz. Vhodné je použít pouze ty nejnutnější meta tagy, aby zbytečně nebyla navyšována velikost stránky.

Užitečné meta tagy jsou content-type a content-language, které určují kódování a jazyk stránky. Pomáhají tak správně zobrazovat i indexovat text obsažený na stránce. Oba tagy je vhodné umístit již na začátek hlavičky (head). Dále se ještě používá description, který slouží ke stručnému popisu obsahu stránky. Některé vyhledávače ho zobrazují jako popis odkazu ve výsledcích hledání. Někdy bývá ještě používán meta tag keywords, který by měl obsahovat několik klíčových slov oddělených čárkou charakterizující obsah webu. Používá se také pro zapsání českých klíčových slov bez diakritiky. Každá stránka by měla mít obsah tagů description a keywords jedinečný a dlouhý maximálně 256 znaků.

Meta tagy umístěné v hlavičce stránky by mohly vypadat například takto:

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="cs">
<meta name="keywords" content="klíč,klic,klicova fraze">
<meta name="description" content="Stručný popis tématiky stránky.">

Pomocí meta tagů lze také určit autora stránky, kontakt na autora apod. Někdy se také využívají pro zadávání příkazů crawlerovi například takto:

<meta name="robots" content="noindex,nofollow">

Pomocí tagu robots lze zakázat indexaci stránky a následování odkazů z ní robotům vyhledávačů, které ho podporují. Pokud tento tag schází, je standardně vše povoleno.

Open Graph

V poslední době se do popředí dostávají také meta tagy využívané protokolem Open Graph od společnosti Facebook. Ty by měly pomáhat především pro načtení vhodných dat při sdílení stránek. Příklad by mohl být takovýto:

<meta property="og:title" content="Název stránky">
<meta property="og:description" content="Popis stránky">
<meta property="og:site_name" content="Název-webu.cz">
<meta property="og:url" content="http://nazev-webu.cz/stranka/">
<meta property="og:image" content="http://nazev-webu.cz/obrazek.jpg">
<meta property="og:type" content="article">

Protože Open Graph protokol dosud není validním standardem, je možné trvalou URL (og:url) a související obrázek (og:image) nahradit pomocí validních tagů link atributu rel takto:

<link rel="canonical" href="http://nazev-webu.cz/stranka/">
<link rel="image_src" href="http://nazev-webu.cz/obrazek.jpg">

V poslední době se také začíná využívat tag previewimage:

<link rel="previewimage" href="http://nazev-webu.cz/obrazek.jpg">

Související odkazy

Autorem je

Autor je hlavním administrátorem a zároveň provozovatelem internetové společnosti WebČesky.cz a celého jejího portfolia. V současné době je také lektorem na Katedře informačního inženýrství, PEF, ČZU v Praze.

5 komentářů na “Meta tagy”

  1. Petr Turek napsal:

    Nevíte náhodou jak donutit FB aby linkoval obrázek (og:image) jen na adresa.cz a vynechal adresa.cz/…? Jedná se o shop na RS PrestaShop… meta i link fungují skvěle, ale u produktů schazuje obrázek produktu což na sdílení na fb není nic moc. Děkuji předem za jakékoliv rady

    • Tomáš Martínek napsal:

      Facebook vždy stahuje celou adresu k obrázku, protože ho poté načítá z Vašeho serveru. Proto je nejlepší možností zadat přímo celou cestu k obrázku, který si má Facebook na konkrétní stránce uložit.

      • Petr Turek napsal:

        Jsem to blbě popsal 🙂 Hlavní stránka přijme og:image bez problémů, ale i s ní stránky produktů. Poněvadž hlavička je na všech stránkách webu stejná, díky RS. Ale jde to udělat na hlavní stránce jen mimo head? Aby se obrázek načítal jen pro hlavní stranu a né pro ostatní na webu? Díky

        • Tomáš Martínek napsal:

          To je záležitost redakčního systému. Pokud systém není schopen generovat unikátní metatagy pro každou stránku, tak to není ideální. Můžete zkusit využít atributu rel=“icon“ nebo rel=“image_src“ přímo u daného obrázku, v tomto případě ale není jisté, že to Facebook bude akceptovat…

          • Petr Turek napsal:

            Děkuji za radu, zkusím jakmile se zase budu hrabat v šabloně

Přidání komentáře

Komentář