Co jsou HTML meta tagy a k čemu se používají?
Základní informace o meta tazích
- Meta tagy jsou klíčové pro poskytování informací o webové stránce vyhledávačům, prohlížečům a různým webovým službám.
- Mezi nejdůležitější meta tagy patří popis (description), Open Graph, nastavení viewportu a HTTP-equiv tagy.
- Možnost vytvářet vlastní meta tagy umožňuje flexibilitu, vyžaduje však důkladné plánování a dokumentaci.
Kromě názvu stránky a použitých skriptů a stylů, může hlavička HTML obsahovat také meta tagy. Tyto tagy jsou nezbytné pro optimalizaci pro vyhledávače (SEO), zlepšení dostupnosti webu a jeho celkový výkon.
Naučte se, jak efektivně využívat meta tagy a zjistěte, jaké klíčové informace mohou poskytovat.
Meta tagy jsou speciální prvky, které přidávají doplňující informace o webové stránce. Ačkoli prohlížeče tyto informace přímo nezobrazují, mohou být využity různými nástroji, včetně vyhledávačů, prohlížečů a dalších webových služeb.
Data, která v meta tagách uvádíte, mohou pozitivně ovlivnit pozici vaší stránky ve vyhledávačích, zlepšit odezvu a přístupnost webu a vylepšit zobrazení vašich stránek na sociálních sítích.
Meta tagy jsou prázdné (samouzavírací) tagy, což znamená, že neobsahují žádný vnitřní obsah. Veškerá data jsou uložena v jejich atributech. Meta tagy se vkládají do sekce <head> HTML dokumentu:
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Název dokumentu</title>
V tomto příkladu HTML kódu jsou uvedeny dva meta tagy v sekci <head>. Tyto tagy specifikují znakovou sadu (UTF-8) a nastavení viewportu.
Většina meta tagů používá k definici obsahu kombinaci následujících atributů:
- name a content: Atribut "name" slouží jako štítek, zatímco atribut "content" obsahuje data spojená s tímto štítkem. Tento systém umožňuje flexibilní a rozšiřitelné ukládání různých metadat.
- property: Tento atribut se někdy používá jako alternativa k atributu "name" a má podobný účel.
- http-equiv: Tento atribut reprezentuje „ekvivalent HTTP“ a definuje HTTP hlavičku pro hodnotu uvedenou v atributu "content".
- schema: Tento atribut, používaný s atributem "name", definuje datový typ v atributu "content".
Následující meta tagy jsou běžně podporovány různými webovými službami a prohlížeči.
Meta tag pro popis stránky
Tento tag poskytuje krátký popis stránky, obvykle do 155 znaků. Vyhledávače jej často zobrazují pod názvem stránky a její URL. Je důležité napsat stručný a výstižný popis, který motivuje uživatele k návštěvě vaší stránky.
<meta name="description" content="Stručný popis vaší stránky">
Open Graph meta tagy
Tyto tagy jsou důležité pro Facebook a další sociální média. Používají informace z těchto tagů pro vylepšení zobrazení odkazů na vaši stránku, když je uživatelé sdílejí. Open Graph meta tagy zahrnují atributy jako og:title, og:description a og:image:
<meta property="og:title" content="Název vaší stránky"> <meta property="og:description" content="Stručný popis vaší stránky"> <meta property="og:image" content="URL obrázku">
SEO meta tagy
Tyto tagy poskytují informace pro vyhledávače a mohou přispět ke zlepšení pozice vaší stránky ve výsledcích vyhledávání. Jsou součástí doporučených postupů SEO. Obsahují atributy jako "robots", "author" a další. I když jejich význam v průběhu času klesal, je stále vhodné je vkládat do HTML dokumentu.
<meta name="robots" content="index, follow"> <meta name="author" content="Vaše jméno">
Meta tag viewport
Meta tag viewport je základním prvkem responzivního web designu. Říká prohlížeči, jak upravit rozvržení stránky podle šířky zařízení, aby se obsah zobrazoval správně a byl čitelný i na mobilních zařízeních.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTTP-Equiv meta tagy
Tyto meta tagy jsou důležité pro řízení chování prohlížečů a serverů při zpracování webových stránek. Zahrnují atributy jako "refresh" a "X-UA-Compatible". Ačkoli jejich přímý dopad na SEO se může lišit, hrají klíčovou roli při ovlivňování chování a kompatibility stránek.
<meta http-equiv="refresh" content="5;url=https://priklad.cz"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
Není nutné používat všechny meta tagy ve všech projektech, ale je důležité mít dobrý přehled o různých dostupných možnostech. Správné použití meta tagů přináší výhody pro zlepšení organizace a struktury HTML dokumentů.
Meta tagy jsou flexibilní, protože:
- Můžete použít libovolný název a ukládat v nich data podle potřeby.
- Prohlížeče jejich obsah přímo nezobrazují, přesto je vždy viditelný ve zdrojovém kódu stránky.
Zde je příklad vlastního meta tagu:
<meta name="cilova-skupina" content="vyvojari">
V tomto příkladu vlastní meta tag specifikuje cílovou skupinu obsahu, kterou jsou vývojáři.
Vlastní meta tagy umožňují rozšířit standardní sadu tagů. Je však důležité pečlivě dokumentovat vlastní tagy, které používáte, a mít dobré povědomí o tom, jak je budete používat. Ostatní služby je nemusí standardně používat nebo rozpoznávat, proto je pravděpodobné, že budete muset napsat vlastní kód pro jejich zpracování.
