Titulek a meta popis

Modul 3: Technický základ stránky · Doba čtení: 11 minut

Cíl lekce: Po této lekci dokážete pro každou stránku napsat dobrý titulek a meta popis, vysvětlit, co s nimi Google dělá a proč je někdy nahrazuje, a zkontrolovat, zda jsou na Vašich vlastních stránkách v pořádku.

Klíčové pojmy: <title>, titulkový odkaz, meta popis (<meta name="description">), úryvek (snippet), přepisování Googlem, zkracování podle šířky obrazovky, orientační pravidlo pro délku, jedinečné titulky, název značky, hromadění klíčových slov, nosnippet

Dva řádky v hlavičce Vaší stránky

Každá stránka webu začíná částí, kterou návštěvník nevidí: <head>. V ní jsou dva řádky, které jsou pro vyhledávače obzvlášť důležité:

<head>
  <title>Bruidsboeketten op maat in Amersfoort | Bloemenatelier Lotte</title>
  <meta name="description" content="Een bruidsboeket dat bij jullie dag past. Kom langs voor een gratis kennismaking in ons atelier in Amersfoort, of bekijk eerst onze voorbeelden.">
</head>

Titulek (element <title>) uvidíte na kartě prohlížeče, v záložkách a hlavně ve výsledcích vyhledávání. Modrý řádek, na který lze ve výsledku vyhledávání kliknout, Google nazývá titulkový odkaz. Meta popis je krátké shrnutí stránky. Google ho někdy používá pro kousek textu pod titulkovým odkazem: úryvek (anglicky snippet).

Společně do velké míry rozhodují, zda někdo klikne na Váš výsledek, nebo na výsledek někoho jiného. Proto jde o jednu z mála věcí ve viditelnosti, kde během čtvrthodiny opravdu něco změníte.

Co Google dělá s Vaším titulkem

Google to sám píše takto: zajistěte, aby každá stránka měla titulek v elementu <title>, a udělejte ho popisný a stručný. Vágní titulky jako "Home" nebo "Vítejte" nikomu nic neřeknou.

Google Váš <title> většinou použije, ale ne vždy. Titulkový odkaz může vytvořit i z jiných zdrojů: z největšího nadpisu na stránce (často <h1>), z og:title pro sociální sítě, z výrazného textu na stránce, z textu odkazů, které na stránku vedou, a z názvu ve strukturovaných datech typu WebSite. Děje se to hlavně v těchto situacích, které Google sám uvádí:

Když Google Váš titulek přepíše, není to trest. Je to znamení, že Váš titulek stránku nepopisuje dost dobře. Když titulek vylepšíte, Google ho často po další návštěvě crawleru znovu převezme.

Jak dlouhý smí titulek být?

Tady se mnoho rad na internetu mýlí. Google doslova říká, že délka <title> nemá žádný limit. Titulkový odkaz se ale ve výsledcích vyhledávání zkracuje, aby se vešel na obrazovku. Děje se to podle šířky obrazovky (v pixelech), ne po pevném počtu znaků: titulek s mnoha širokými písmeny (m, w) se zkrátí dříve než titulek s úzkými (i, l).

Proto tento kurz pracuje s orientačním pravidlem, ne s pravidlem Googlu: držte titulek přibližně mezi 15 a 65 znaky. Kratší bývá příliš vágní, u delšího hrozí, že nejdůležitější část zmizí. Dejte proto dopředu, čím stránka je, a název své firmy na konec.

Jak napsat dobrý titulek

Z pokynů Googlu a z praxe:

1. Řekněte, o čem stránka je. "Bruidsboeketten op maat in Amersfoort" (svatební kytice na míru v Amersfoortu) je lepší než "Diensten" (služby).
2. Každé stránce vlastní titulek. Dvě stránky se stejným titulkem se ve výsledcích vyhledávání nedají rozlišit.
3. Název značky krátce, na začátku nebo na konci, oddělený znakem jako |, : nebo -. Google doporučuje nepřipojovat ke každému titulku dlouhý slogan.
4. Žádné hromadění klíčových slov. "Bloemen Amersfoort, bloemist Amersfoort, boeket Amersfoort goedkoop" nepomůže. Google opakování klíčových slov výslovně uvádí jako něco, co vypadá jako spam; je to dokonce v zásadách proti spamu (lekce 8.2).
5. Udržujte ho aktuální. Letopočet v titulku znamená, že ho musíte každý rok aktualizovat.

Častá chyba u nástrojů na tvorbu webů: domovská stránka se jmenuje jen názvem firmy. "Bloemenatelier Lotte" říká, kdo jste, ale ne, co děláte nebo kde. "Bloemenatelier Lotte | Bloemist in Amersfoort" funguje lépe pro někoho, kdo Vás ještě nezná.

Meta popis

Meta popis je v elementu <meta>:

<meta name="description" content="...">

Google říká: úryvek pochází hlavně z obsahu samotné stránky. Meta popis se použije, když stránku shrnuje lépe než kousek textu ze stránky. Úryvek se navíc může lišit podle dotazu: Google zobrazí tu část, která k dotazu nejlépe sedí. Dobrý meta popis tedy nezaručuje, že se zobrazí, ale zvyšuje šanci, že pod Vaším titulkem bude něco rozumného.

I tady platí: Google nemá maximální délku, ale úryvek se zkracuje, aby se vešel na obrazovku. Orientační pravidlo v tomto kurzu: 70 až 160 znaků. Dost dlouhý, aby něco řekl, dost krátký, aby zůstal celý.

Jak ho napsat:

• Shrňte, co člověk na stránce najde, běžnými větami.
• Uveďte konkrétní údaje, které pomohou při výběru: místo, co nabízíte, pro koho.
• Každé stránce vlastní popis. Pokud máte málo času, začněte domovskou stránkou a nejnavštěvovanějšími stránkami; to doporučuje i sám Google.
• Žádný seznam klíčových slov. Google píše, že takové popisy se jako úryvek používají méně často.

Co meta popis nedělá: není to faktor hodnocení, se kterým byste díky klíčovým slovům získali vyšší pozici. Slouží k tomu, aby hledajícího přesvědčil ke kliknutí.

Sami určete, co se zobrazí

Chcete, aby Google nezobrazoval žádný úryvek, nebo jen jeho část? To jde pomocí meta pravidla robots: <meta name="robots" content="nosnippet"> (žádný úryvek) nebo max-snippet:50 (nejvýše 50 znaků). Část textu můžete vyloučit atributem data-nosnippet. Pro většinu malých webů to není potřeba.

Kde to uvidíte a zkontrolujete

• Ve zdrojovém kódu: otevřete stránku, klikněte pravým tlačítkem a zvolte "Zobrazit zdrojový kód stránky" (nebo Ctrl+U). Pomocí Ctrl+F vyhledejte <title a description.
• Ve výsledcích vyhledávání: vyhledejte site:example.com a uvidíte, jak Google Vaše stránky zobrazuje. Pokud se titulkový odkaz liší od Vašeho <title>, podívejte se, která situace z tabulky výše odpovídá.
• V Search Console: přehled Výkon (lekce 2.3) ukazuje, které stránky mají hodně zobrazení, ale málo kliknutí. Tam se lepší titulek a popis vyplatí nejvíce.

V praxi: nastavení titulku a popisu

• V AI Builder od WebOké zadáte pro každou stránku vlastní titulek a popis. Když titulek necháte prázdný, u běžné stránky bude "Název stránky | Název webu" a domovská stránka se bude jmenovat jen jako Váš web. Dejte proto domovské stránce sami titulek, který říká i to, co děláte. Kontrola SEO v AI Builder upozorní na titulek delší než 65 znaků a popis delší než 160 znaků: stejná orientační pravidla jako v tomto kurzu.
• Ve WordPressu vytváří WordPress titulek sám z názvu stránky a názvu webu. Meta popis WordPress sám nevytváří; k tomu použijete SEO plugin nebo šablonu, která to nabízí. Tomuto tématu se věnuje i kurz WordPressu, lekce 9.2.

U jiných nástrojů na tvorbu webů to funguje podobně: hledejte nastavení jako "SEO", "Vyhledávače" nebo "Nastavení stránky".

Shrnutí

• Titulek je řádek ve výsledcích vyhledávání, na který lze kliknout; meta popis shrnuje stránku a někdy se zobrazí jako úryvek.
• Google může Váš titulek nahradit, když je poloprázdný, zastaralý, nesprávný nebo všude stejný, nebo když chybí jasný hlavní nadpis.
• Google nemá maximální délku, ale zkracuje podle šířky obrazovky. Orientační pravidla v tomto kurzu: titulek 15 až 65 znaků, popis 70 až 160 znaků.
• Každé stránce vlastní, popisný titulek a popis; žádné hromadění klíčových slov; název značky krátce na konci.
• Meta popis pomáhá lidem vybrat, ne Vaší pozici v pořadí.

Kvíz

Úkol

Úkol A3.1: Titulek a meta popis Vaší stránky. Zadejte adresu stránky svého webu (domovskou stránku nebo jinou důležitou stránku). Program stránku načte stejně jako vyhledávač, přečte <title> a meta popis a spočítá znaky. Uvidíte, zda existují, zda splňují orientační pravidla a zda titulek říká víc než jen název Vaší firmy. Nemáte vlastní web? Použijte www.rijksoverheid.nl.

Další čtení

Postupy v těchto článcích platí pro panely WebOké; u jiných poskytovatelů to funguje podobně.

• Přihlášení Vašich webových stránek do vyhledávačů (Google a Bing)
• Sitebuilder a AI Bouwer: který si vyberete a jak ho otevřete?
• Google Search Central, Správa titulkových odkazů ve výsledcích vyhledávání: https://developers.google.com/search/docs/appearance/title-link
• Google Search Central, Úryvky a meta popis: https://developers.google.com/search/docs/appearance/snippet