Hlavička stránky: title, description a kódování

Každá stránka začíná hlavičkou uvnitř značky <head>. Návštěvník ji na stránce nevidí, ale prohlížeč a vyhledávače ji čtou jako první. Projdeme nejdůležitější řádky.

Kostra stránky

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Moje stránka</title>
  <meta name="description" content="Krátký popis stránky pro vyhledávače.">
</head>
<body>
  ...obsah stránky...
</body>
</html>

Title: název na kartě

Značka <title> určuje text na kartě prohlížeče. Vyhledávač ho zobrazí jako modrý nadpis výsledku. Ideální je krátký a výstižný název, obvykle do 60 znaků.

Meta description: popis pro vyhledávač

Atribut content u značky <meta name="description"> je krátký popis stránky. Google ho často zobrazí pod nadpisem výsledku. Nejde o zaručený výsledek, ale dobrý popis pomáhá rozhodnout, zda návštěvník klikne.

Znaková sada a jazyk

Řádek <meta charset="UTF-8"> říká prohlížeči, jak má číst znaky. Bez něj se místo háčků a čárek mohou zobrazit rozbité znaky. Atribut lang="cs" u značky <html> říká, v jakém jazyce stránka je.

Viewport: stránka na mobilu

Řádek s viewport říká prohlížeči v telefonu, aby stránku zobrazil v šířce displeje, a ne jako zmenšenou verzi pro počítač. Bez něj je text na mobilu nečitelný.

Časté chyby

• Stejný title na všech stránkách. Vyhledávač pak nepozná, o čem která stránka je. Každá stránka má mít vlastní název.
• Chybějící charset. Háčky a čárky se zobrazí rozbitě.
• Chybějící viewport. Web na mobilu nebude čitelný.
• Příliš dlouhý popis. Google text zkrátí, proto důležité věci dejte na začátek.

Teď víte, co patří do hlavičky a proč. Tyhle řádky nastavíte na každé stránce jednou a pak už jen upravujete texty. 👍