Značky <meta> v <head> poskytují metadata o stránce — kódování znaků, chování viewport, popisy SEO a náhledy sociálního sdílení. Nejsou vykresleny, ale jsou čteny prohlížeči, vyhledávacími stroji a sociálními platformami.
Dva základní prvky
html
Značky <meta> v <head> poskytují metadata o stránce — kódování znaků, chování viewport, popisy SEO a náhledy sociálního sdílení. Nejsou vykresleny, ale jsou čteny prohlížeči, vyhledávacími stroji a sociálními platformami.
charset zajišťuje správné dekódování textu (zvláště non-ASCII). Umístěte jej na první místo.viewport je to, co činí web responsive na mobilech — bez něj telefony vykreslují na falešné šířce 980px a přiblížení se změní, čímž se poškodí vaše responsive CSS.<title>Page Title — 50–60 chars</title>
<meta name="description" content="Summary shown in search results, ~150 chars" />
<link rel="canonical" href="https://site.com/page" /> <!-- avoid duplicate-content penalties -->
<title> a description jsou to, co se objevuje ve výsledcích Google, takže ovlivňují proklik. canonical sděluje vyhledávačům autoritativní URL.
<meta property="og:title" content="Shareable title" />
<meta property="og:description" content="Shown when shared" />
<meta property="og:image" content="https://site.com/preview.jpg" />
<meta property="og:url" content="https://site.com/page" />
<meta name="twitter:card" content="summary_large_image" />
Tyto kontrolují kartu, která se zobrazí při sdílení vašeho odkazu na Facebooku, LinkedInu, Slacku, X atd. — bez nich získáte ošklivý nebo prázdný náhled.
charset a viewport jsou nezbytné pro správné vykreslení a mobilní responzivnost; title/description/canonical ovlivňují SEO; Open Graph značky kontrolují, jak vaše odkazy vypadají při sdílení.
Spolu tvoří vrstvu metadat, která zajišťuje správné vykreslení stránky, její hodnocení a dobré sdílení.