Table of Contents
Klíčové věci
- Meta tagy poskytují důležité informace o webové stránce pro vyhledávače, prohlížeče a webové služby.
- Mezi základní typy patří meta description, open graph, viewport a HTTP-equiv tags.
- Vlastní metaznačky nabízejí flexibilitu, ale vyžadují pečlivou dokumentaci a plánování.
Vedle názvu vaší stránky a skriptů a šablon stylů, které používá, může sekce záhlaví HTML obsahovat metaznačky. Ty jsou zásadní pro SEO, dostupnost a celkový výkon webu.
Naučte se používat meta tagy a zjistěte, jaké informace mohou poskytnout.
Meta tagy jsou prvky, které poskytují další informace o webové stránce. Prohlížeče tato metadata nezobrazují přímo, ale jakýkoli nástroj je může použít k různým účelům. To zahrnuje vyhledávače, prohlížeče a další webové služby.
Údaje, které zadáte v metaznačkách, pomáhají zlepšit hodnocení ve vyhledávačích, přispívají k odezvě a přístupnosti webových stránek a zlepšují zobrazování vašich stránek na sociálních sítích.
Meta tagy jsou samouzavírací tagy; není tam , protože nezahrnují žádný obsah. Obsahují všechna svá data v atributech. Do části head svého souboru HTML můžete přidat metaznačky:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
Tento příklad HTML standardu obsahuje dvě metaznačky v sekci head. Poskytují informace o znakové sadě (UTF-8) a výřezu.
Většina metaznaček používá k obsahu svých dat kombinaci následujících atributů.
- name and content: Atribut name je jako štítek, zatímco atribut content ukládá data spojená s tímto štítkem. To poskytuje flexibilní, rozšiřitelný systém pro ukládání jakýchkoli metadat, která potřebujete.
- property: Tento atribut se někdy používá jako alternativa k názvu a slouží téměř ke stejnému účelu.
- http-equiv: Tento atribut představuje „ekvivalent HTTP“ a definuje hlavičku HTTP pro hodnotu zadanou v atributu content.
- schéma: Tento atribut, používaný s názvem, definuje datový typ v atributu content.
Zjistíte, že následující metaznačky jsou běžně podporovány různými webovými službami a prohlížeči.
Popis Meta tag
Tento úryvek o délce až 155 znaků shrnuje obsah stránky. Vyhledávače jej často zobrazují pod názvem stránky a URL. Je nezbytné poskytnout stručný a přesný popis, který uživatele povzbudí ke kliknutí na odkaz a návštěvě vaší stránky.
<meta name="description" content="A brief description of your page">
Otevřete Graph Meta Tags
Facebook a další platformy sociálních médií tyto značky významně využívají. Používají informace v těchto značkách ke zlepšení prezentace odkazů na vaši stránku, když ji uživatelé sdílejí. Metaznačky Open Graph obsahují atributy jako og:title, og:description a og:image:
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A brief description of your page">
<meta property="og:image" content="URL of a related image">
SEO meta tagy
Tyto značky poskytují informace pro vyhledávače a mohou pomoci zlepšit hodnocení vaší stránky. Jsou také zahrnuty na seznamu základních doporučených postupů SEO. Zahrnují atributy, jako jsou roboti, autor a další. I když se význam těchto značek postupem času snížil, je stále nezbytné je zahrnout do dokumentu HTML.
<meta name="robots" content="index, follow">
<meta name="author" content="Your Name">
Zobrazit meta tag
Metaznačka viewport je základním prvkem responzivního designu webu. Řekne prohlížeči, aby upravil rozvržení webové stránky podle šířky zařízení, aby se obsah zobrazoval správně a byl čitelný na mobilních zařízeních.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Meta tagy HTTP-Equiv
Tyto metaznačky jsou nezbytné pro kontrolu konkrétních aspektů toho, jak prohlížeče a servery zpracovávají webové stránky. Zahrnují atributy jako refresh a X-UA-Compatible. I když se jejich přímý dopad na SEO může lišit, hrají zásadní roli při ovlivňování chování a kompatibility stránek.
<meta http-equiv="refresh" content="5;url=https://example.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Ve svých projektech je nebudete používat všechny najednou, ale i tak je důležité dobře rozumět různým dostupným metaznačkám. Používání meta tagů také poskytuje výhody při zlepšování organizace dokumentů HTML.
Meta tagy jsou flexibilní, protože:
- Můžete použít název podle svého výběru pro uložení jakýchkoli dat, která chcete.
- Prohlížeče nebudou zobrazovat jejich obsah, i když bude vždy viditelný ve zdroji stránky.
Zde je příklad vlastní metaznačky:
<meta name="target-audience" content="developers">
V tomto příkladu vlastní značka určuje cílové publikum obsahu, což znamená, že cílí na vývojáře.
Vlastní metaznačky nabízejí způsob, jak rozšířit standardní sadu značek, které jsou široce uznávány. Je však důležité pečlivě zdokumentovat vlastní značky, které používáte, a dobře rozumět tomu, jak je budete používat. Jiné služby je ve výchozím nastavení nepoužívají ani nerozpoznají, takže pravděpodobně budete někdy psát svůj vlastní kód, abyste je zpracovali.