Meta tagy

Popisek = description - Další informace pro vyhledávače - Čeština - Automatické přesměrování - Nastavení responzivního designu - Předávání refereru - Neukládání a vypršení nefunguje - Vlastní meta tagy - Vlastní meta tagy programů - Obecná syntaxe

Meta tagy jsou zvláštní značky, které se píšou do hlavičky stránky. V každé stránce je potřeba použít:

Většina ostatních meta tagů se použije zřídka, ale je dobré vědět, co umějí. Spousta autorů meta tagy plýtvá, aby ukázali, jak jsou strašně chytří. Méně je ale více.

Když jsem před šesti lety (aktualizováno 2005) tuto stránku začínal psát, byly meta tagy velmi důležité. Postupem času ale jejich význam poněkud klesá.

Popisek = description pro vyhledávače

Popis obsahu stránky se zadává meta tagem description, např:

<meta name="description" content="Popis tvorby a publikování WWW stránek pro začátečníky i profesionály.">.

Google i Seznam vypisuji description tehdy, pokud obsahuje hledané slovo (nebo většinu hledaných slov) nebo pokud usoudí, že je docela dobrý. Takže se ve výpisu pod titulkem objeví

Popis tvorby a publikování WWW stránek pro začátečníky i profesionály.

Kdybych výše zmíněný tag nevložil, tak by se jako popisek ve vyhledávání (tak zvaný snippet) zobrazil kousek textu stránky, který obsahuje vyhledávaná slova. Takže by se mohlo objevit třeba:

V této sekci: Základní kurz Prvky stránek Barvy Provoz webu Další sekce:

což je například začátek zmíněné stránky a vypadá trochu blbě. Proto se obecně doporučuje zadávat description. Není na něj ale spoleh, vyhledávač si ho do snippetu vybrat nemusí.

Meta description nemusí být unikátní

V posledních letech se šíří nesmyslná pověst, že meta description se musí na každé stránce lišit. Nemusí. Pověst vznikla pravděpodobně z toho důvodu, že automatické nástroje hlásí shodu meta description různých stránek jako varování. Je to dobré varování, protože redakční systémy v praxi do meta description generují nějaký automatický balast, který je na všech stránkách shodný. Automatickému balastu je dobré se vyhnout, ale není nutné křečovitě odlišovat popisky v situacích, kdy můžou být klidně stejné.

Popisky Open Graph

Přebírá je Facebook, Twitter, některé vyhledávače a dajší služby. Je to alternativa k meta tagu description. Písmena OG znamenají Open Graph, což je návrh standardu na předávání meta informací.

<meta property="og:title" content="titulek stránky hlavně pro Facebook">
<meta property="og:description" content="popisek">
<meta property="og:image" content="https://example.com/obrazek.jpg">

V případě náhledového obrázku by měl fungovat i tag link (nepatří do Open Graph):

<link rel="image_src" href="https://example.com/obrazek.jpg">

Další informace pro vyhledávače

Klíčová slova

Nejdůležitější vyhledávače Google a Seznam klíčová slova ignorují. Já osobně jsem dříve používal keywords pouze kvůli internímu vyhledávači (Atomz). Aby takové primitivnější vyhledávače snadněji pochopily, o čem se na té které stránce píše, lze jim sdělit, jaká jsou klíčová slova textu. Do hlavičky dokumentu se vloží tag

<meta name="keywords" content="hudba,kytara,flétna,fletna,Oldfield,Asonance,Spirituál">.

Výše zmíněná klíčová slova jsem kdysi dávno měl na své stránce o hudbě. Klíčová slova se oddělují čárkami, za čárkami mohou být mezery.

Při příležitosti 15. výročí vzniku tohoto návodu (vznikl v dubnu 1998) uvedu malé opakování. Soudě podle dotazů v diskusích je to pořád potřeba. Takže opakujte po mně: "Zadávání meta keywords už 15 let nemá vůbec žádný smysl!"

Zákaz indexování

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

říká robotům vyhledávačů (Seznam, Google, Bing), že stránku nemají zařazovat do svých indexů, ale že mají sledovat odkazy v ní obsažené. To se vyplatí jenom u naprostého minima stránek (například registrační formulář, formulář na zapomenuté heslo apod.). Další hodnoty index nebo nofollow jsou zřejmé. Více v textu o robots.txt.

Pro Google

Google akceptuje meta tag googlebot. Příklad zakázání výpisu úryvku stránky a zákazu archivovat:

<meta name="googlebot" content="nosnippet,noarchive">

Jazykové nastavení

<meta http-equiv="Content-language" content="cs">

Informace o použitém jazyce. Slouží prý zejména pro automatické přepínání jazyka, pokud je dokument ve více verzích. Nevěřím tomu. Vyhledávače by se teoreticky podle tohoto tagu mohly řídit, ale v praxi to pokud vím nedělají (řídí se raději textovým obsahem stránky).

Čeština, nastavení kódování

Existuje spousta pracných způsobů, jak zajistit na Internetu správné kódování češtiny. Jednoduše se to dá udělat využitím následujícího tagu, který se zadává do hlavičky html souboru:

<meta charset="windows-1250">

Tím říkám, že dokument je kódován v kódování windows-1250. V případě jiných kódování se namísto windows-1250 píše norma kódování, která může být různá.

Jiný dobrý způsob na kódování češtiny je používat Latin-2 (ISO 8859-2). Pak to vypadá takto:

<meta charset="iso-8859-2">

Charset pro kódování UTF-8:

<meta charset="UTF-8">

Tento meta tag se má správně používat ještě před titulkem (tag <title>), protože kdyby titulek obsahoval čárkovaná písmena, a meta tag by byl až za ním, nemusí se pak v Exploreru stránka vůbec zobrazit.

Dříve (asi tak před rokem 2011) se meta tag kódování zapisoval složitěji. Já ještě dnes používám starší zápis kvůli kompatibilitě s některými staršími programy, kterými stránky zpracovávám. Pro prohlížeče to není nutné, ty všechny zvládají novější zápis zmíněný výše. Starší zápis vypadá např. takto:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Češtinou se zabývám na samostatné stránce.

Automatické přesměrování

Do hlavičky (to jest mezi tagy <head> a </head>) se vloží tento tag:

<meta http-equiv="refresh" content="6;URL=http://www.nekam.cz/cokoliv">,

kde 6 je počet sekund, který server vyčká před začátkem přesměrování, a adresa se samozřejmě zadává jiná. Prohlížeč se potom pokusí do stejného okna načíst stránku specifikovanou v URL podobně, jako kdyby dostal příkaz HTTP protokolem. Zadá-li se bez URL, obnovuje se tatáž stránka, teoreticky donekonečna. Více o přesměrování.

Nastavení responzivního designu

Chytré telefony se od roku 2007 snaží stránku po načtení zmenšit, aby se jim na display vešla celá, třeba zmenšená. Uživatel si to, co ho zajímá, zvětší (třeba dvouklikem).

Jsou ale stránky, které jsou od začátku navržené tak, aby se na mobilu načetly rovnou v čitelné velikosti - tomu se říká adaptivní nebo responzivní design. Aby prohlížeč na mobilu od začátku věděl, že takto responzivní stránku dostává, do stránky navržené responzivně se dává meta tag viewport:

<meta name="viewport" content="width=device-width,initial-scale=1">

Slovo viewport znamená tu plochu, ze které se čte. Width=device-width říká, že se má použít ta šířka, kterou má zařízení. To initial-scale=1 znamená právě to, že se při načtení na mobilu stránka nemá zmenšovat. Kromě těchto hodnot se dají použít ještě jiné hodnoty, ale v praxi to nemá smysl.

Pozor, samotné přidání tohoto meta tagu k responzivitě webu nestačí. Zejména je nutné zajistit, aby se na stránce nevyskytovaly prvky, které jsou širší než display telefonu, aby se neobjevovala spodní rolovací lišta.

S příchodem iOS 9 na iPhony a iPady je potřeba meta viewport obohatit ještě o zvláštní zaklínadlo shrink-to-fit=no:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Bez tohoto zaklínadla se na iPhonech mohlo stávat, že se stránka po načtení smrskne na takovou šířku, aby se do ní vešly všechny případné širší prvky. S odchodem iOS 9 už to zase nebude potřeba.

Předávání refereru

Pomocí meta tagu referrer se dá určit chování prohlížečů při předávání refereru. Referer je informace o tom, ze které stránky uživatel prokliknul. Když například mám odkaz v katalogu Seznamu a někdo z toho katalogu proklikne na mou stránku, v http hlavičce požadavku putuje i informace o tom, že se prokliknul odkaz v katalogu Seznamu (a její přesná URL). Před zavedením meta tagu pro referer se jeho předávání nedalo příliš kontrolovat, prohlížeče ho prostě předávaly a v některých případech ho nepředávaly (nastavení prohlížeče, proklik z https protokolu na http).

Meta tag referrer nyní říká, že se referrer

Následující příklad bude předávat referer i při prokliku z https stránky na http:

<meta name="referrer" content="unsafe-url">

Následující příklad bude předávat jako referer celou adresu, odkud se kliklo:

<meta name="referrer" content="no-referrer-when-downgrade">

Aby odkaz nepředával po kliknutí referrer, se dá nastavit také pomocí atributu rel="noreferrer" u odkazu. Dle mého pozorování to funguje spolehlivěji.

Další informace o refereru.

Neukládání a vypršení nefunguje

Pomocí meta tagů se dříve také dalo omezeně nastavit, že se stránka nemá ukládat na počítači klienta a ve vyrovnávacích pamětech cache. Ale pokud to někdy fungovalo, tak to nyní (2015) nefunguje. Například jsem tu měl:

<META http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="Sat 21 Jun 2003 20:04:00">

A proč to nefunguje

Žádná cache fungující na serveru (např. squid) nečte html zdroj, takže nemá šanci všimnout si meta cache nastavení. Je to začarovaný kruh -- keš si může teoreticky meta tagu všimnout až poté, co stránku uloží (a tedy jej chtě nechtě nerespektuje).

Meta nastavení cacheování podle mých pozorování nefunguje ani na cache prohlížečů (Temporary Internet Files). Pokud na vypršení opravdu záleží, je třeba, aby hlavičky o expiraci posílal server.

Vizte též kešovací návod pro autory webu a webmastery a Na co stránka čeká.

Vlastní meta tagy

Do name a content si teoreticky můžete dát cokoliv, aniž byste narušili význam stránky. 

<meta name="hocičo" content="jakákoliv hodnota">

Takové meta tagy se pak dají použít zejména pro různé programy, které si pro práci se stránkami napíšete.

Například author apod.

<meta name="author" content="Dušan Janovský">

Je to úplně na nic, ale já to dávám do stránek, když jsem smutný a chci se proslavit. Dříve to do kódu dávaly některé programy.

Občas jsou na zdrojových kódech k vidění meta informace typu copyright, company a podobné. Nemá to žádný praktický účel, je to podobné, jako když pejskové počůrávají patníky.

Vlastní meta tagy programů

Specializované programy na psaní HTML vkládají do svých výtvorů meta tagy, do kterých si ukládají nějaké informace pro sebe. Buďto je v kódu můžete nechat, nebo smazat. Než je smažete, musíte se ujistit, že je ten software na nic nepotřebujete.

Například FrontPage si ukládá tag generator vyjadřující, že stránka vznikla v něm:

<meta name="generator" content="Microsoft FrontPage 3.0">

Tato informace nemá praktické využití, proto tento řádek zásadně mažu. Navíc například FrontPage při každém ukládání tento tag přepíše, jakoby stránku udělal on, i když ji neudělal.

Naopak opět FrontPage si tak drží informace o použití sdílených okrajů (shared borders) nebo použitých motivů (themes).

Další meta tagy

Normálně se dlouhá čísla v prohlížeči Safari formátují jako telefonní čísla (podtrhnout se a na kliknutí vyvolají telefonát). Tento meta tag aktivování mobilních čísel zabrání, takže budou zase vypadat jako prostý text.

<meta name="format-detection" content="telephone=no">

Obecná syntaxe tagu meta

Slovo "meta" pochází tuším z řečtiny a znamená "něco, co je nad" nebo "za". Pokud html stránky chtějí říci něco, co je svou podstatou nadřazeno jejich vlastnímu obsahu, použijí tag meta.

Tagy meta se zadávají do hlavičky HTML dokumentu:

<html>
 <head>
  <title>...</title>
  <meta ...>
  <meta ...>

 </head>
<body>
... dokument...

Prvním atributem meta je buďto

V tomto atributu je napsáno, jaký druh metainformace bude sdělován (např. meta="keywords" => budou sdělována klíčová slova). Obecně zapsáno:

<meta name="druh informace" content="obsah informace"> nebo
<meta http-equiv="druh informace" content="obsah informace">

Druhým povinným atributem je "content", což znamená "obsah". Ten je roven vlastnímu obsahu metainformace. Například content="housle, smyčce, kalafuny". Existují i další nepovinné atributy, z nichž uvádím pouze lang.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.