Meta title (titulek stránky)

Příklady z praxe

1. 01

   Šablona titulků v e-shopu

   E-shop s tisíci produkty potřebuje titulky generovat, ne psát ručně. Vzor spojí název produktu, klíčovou vlastnost a značku, takže každá stránka dostane unikátní titulek bez zásahu redaktora. U filtrovaných výpisů se do vzoru přidá hodnota filtru, jinak vzniknou desítky identických titulků.

   // Next.js App Router
   export async function generateMetadata({ params }) {
     const p = await getProduct(params.slug);
     return {
       title: `${p.name} - ${p.color} | Webzi Shop`,
       description: p.shortDescription,
     };
   }

2. 02

   Stránkování bez duplicit

   Blog s výpisem článků měl na všech stranách titulek „Blog | Webzi“. Audit našel dvanáct duplicit a vyhledávač si vybíral, kterou stránku zobrazí. Doplnění čísla strany od druhé strany dál duplicitu odstranilo a zároveň zůstal první výpis čistý.

   <!-- /blog -->
   <title>Blog o webovém vývoji | Webzi</title>
   
   <!-- /blog?page=3 -->
   <title>Blog o webovém vývoji - strana 3 | Webzi</title>

Časté omyly

MýtusMeta title je meta tag jako každý jiný.

Ve skutečnostiV HTML jde o samostatný element v hlavičce dokumentu, nikoli o značku <meta>. Název „meta title“ vznikl v marketingové praxi analogií k meta description.

MýtusTitulek musí mít maximálně 60 znaků, jinak je to chyba.

Ve skutečnostiVyhledávače ořezávají titulek podle šířky v pixelech pro dané zařízení, takže hranice je orientační. Delší titulek se jen zkrátí ve výpisu; problém nastane, až když se ořízne podstatná část sdělení.

MýtusKdyž Google zobrazí jiný text, než jsem napsal, je to penalizace.

Ve skutečnostiPřepis titulku je běžné chování, kterým vyhledávač hledá text lépe odpovídající dotazu. Nesnižuje hodnocení stránky, ale bývá signálem, že původní titulek je příliš obecný, dlouhý nebo neodpovídá obsahu.

Časté dotazy

Jak dlouhý má být meta title?

Meta title se ve výsledcích vyhledávání ořezává podle šířky v pixelech, ne podle pevného počtu znaků. Praktické rozmezí, které se obvykle vejde celé, je zhruba 50 až 60 znaků včetně názvu značky. Delší titulek není chybou, jen se ve výpisu zkrátí třemi tečkami. Proto patří nejdůležitější sdělení na začátek a název webu až na konec za oddělovač. U mobilních výsledků je dostupný prostor menší než na desktopu, takže kontrolu délky je dobré dělat v náhledu pro mobil.

Může být meta title stejný jako H1?

Meta title a H1 se shodovat mohou a u jednoduchých stránek to nevadí. Odlišení se ale často vyplatí, protože každý prvek plní jinou úlohu: titulek soutěží o proklik ve výsledcích vyhledávání a bývá doplněn názvem značky, zatímco H1 mluví ke čtenáři, který už na stránce je, a může být delší i čtivější. Praktický kompromis je držet v obou stejné hlavní klíčové slovo a lišit se zbytkem formulace.

Co se stane, když stránka meta title vůbec nemá?

Stránka bez elementu title není nefunkční, ale ztrácí kontrolu nad tím, jak se jmenuje. Prohlížeč v panelu zobrazí URL, čtečky obrazovky nepřečtou smysluplný název dokumentu a vyhledávač si titulek pro výsledky poskládá sám, typicky z H1, textu odkazů nebo názvu domény. Výsledek bývá nepředvídatelný a nekonzistentní napříč webem. Prázdný titulek je proto v technických SEO auditech hlášen jako chyba vysoké priority.

Stačí meta title nastavit JavaScriptem až v prohlížeči?

Meta title nastavený až klientským JavaScriptem funguje pro uživatele, ale je rizikový pro roboty a náhledy odkazů. Vyhledávače sice JavaScript vykonávají, děje se to ale v odloženém kroku a ne vždy spolehlivě. Náhledy na sociálních sítích a v chatovacích aplikacích JavaScript zpravidla nespouštějí vůbec a přečtou původní HTML. Bezpečné řešení je vygenerovat titulek na serveru nebo při buildu, například přes metadata API ve frameworku.

Jak řešit meta title u vícejazyčného webu?

Meta title se u vícejazyčného webu překládá stejně jako obsah, včetně názvu sekce v šabloně. Každá jazyková verze má vlastní URL i vlastní titulek a jazykové varianty se propojují atributem hreflang. Časté selhání je přeložený obsah pod anglickým titulkem ze sdílené šablony, což vede k tomu, že vyhledávač zobrazí jazykově nesourodý výsledek. U názvu značky se překlad obvykle nedělá, ta zůstává ve všech verzích stejná.

Zdroje

1. HTML Standard(otevře se v novém okně)WHATWG
2. The Document Title element(otevře se v novém okně)MDN Web Docs
3. Search Engine Optimization (SEO) Starter Guide(otevře se v novém okně)Google Search Central
4. Metadata Files and Configuration(otevře se v novém okně)Vercel

Související pojmy

• CTRCTR (click-through rate, míra prokliku) je poměr počtu kliknutí k počtu zobrazení reklamy, odkazu nebo výsledku vyhledávání, vyjádřený v procentech. Vzorec je kliknutí děleno zobrazeními krát sto. CTR měří, jak dobře sdělení zaujme publikum, ke kterému se dostane, ale samo o sobě neříká nic o tom, co se stane po kliknutí.
• Meta descriptionMeta description je krátký text v HTML metadatech stránky, který shrnuje její obsah pro vyhledávače, náhledy odkazů a někdy i sociální sdílení. Nezobrazuje se přímo v těle stránky, ale může se objevit jako úryvek ve výsledcích hledání a výrazně ovlivnit, zda uživatel klikne.
• HreflangHreflang je atribut odkazu, kterým web vyhledávačům oznamuje, že určitá stránka má jazykové nebo regionální varianty na jiných adresách. Každá varianta nese kód jazyka podle ISO 639-1, volitelně doplněný kódem země podle ISO 3166-1 alpha-2. Vyhledávač podle něj vybere pro uživatele správnou verzi místo té původně nalezené.
• On-page SEOOn-page SEO je souhrn úprav přímo na vlastní webové stránce, které zlepšují její srozumitelnost pro vyhledávače i pro čtenáře. Patří sem obsah a jeho struktura, nadpisy, title a meta description, adresa stránky, interní prolinkování, obrázky s alternativními texty, strukturovaná data a technická rychlost načtení.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• A/B testováníA/B testování je řízený experiment, který porovnává dvě varianty stránky, funkce, ceny nebo sdělení na podobných skupinách uživatelů. Měří předem zvolenou metriku, například konverzi nebo retenci, a pomáhá rozhodnout, zda změna skutečně zlepšuje výsledek, nebo zda pozorovaný rozdíl mohl vzniknout náhodou.
• Alfa kanálAlfa kanál je složka obrazových dat, která u pixelu určuje míru neprůhlednosti nebo průhlednosti. Doplňuje barevné kanály, typicky RGB, a umožňuje plynulé okraje, stíny, překryvy, masky i skládání vrstev. Hodnota alfa sama neurčuje barvu, ale říká, jak se barva pixelu promíchá s pozadím.
• Alt atributAlt atribut je atribut HTML značky <img>, který nese textovou alternativu obrázku pro situace, kdy uživatel obrázek nevidí. Čtou ho odečítače obrazovky, zobrazí se při nenačtení souboru a vyhledávače z něj odvozují obsah obrázku. Prázdná hodnota alt="" je platná a znamená, že obrázek je čistě dekorativní.