Obsah hlavičky stránky obsahuje nastavení stránky, ale uživateli se nezobrazuje. Správné nastavení hlavičky je pro běh stránky nezbytně nutné.
Hlavička musí obsahovat znakovou sadu (charset), title, description, keywords a robots popř. propojení na soubor CSS stylů. Dobře nastavená hlavička stránky je nedílnou součástí optimalizace stránek (SEO).
1, Znaková sada dokumentu
<meta charset=“UTF-8″>
Pro použití jiných znaků můžete změnit parametr CHARSET (character set=znaková sada) na konci tohoto příkazu. V případě použití češtiny ve stránkách používáme sadu windows-1250 nebo UTF-8. Pro správné zobrazování diakritiky (háčky a čárky) je vložení tohoto řádku nezbytné.
2, Title
<title>KURZYGRAFIKY.CZ </title>
Titulek stránky je výchozí název, který se zobrazuje v záložce prohlížeče a v liště programů.
Obvykle píšeme název firmy, nebo název webové stránky – titulek by neměl být příliš dlouhý. Nastavení <title> je prioritou pro vyhledávače. Pro volbu ideální délky a klíčových slov si prosím přečtěte kapitolu Optimalizace stránek.
3, Popis
<meta name=“description“ content=“Kurzy počítačové grafiky a webdesignu“>
Popis stránky by měl být stručný a výstižný (zhruba jedna až dvě věty). Je vhodné se vyvarovat příliš obecných výrazů. Snažte se vystihnout co nejlépe podstatu náplně stránek. Obsah tagu „description“ se podobně jako titulek objevuje ve výsledcích vyhledávání. Volbou vhodného popisu můžete vylepšit pozice svojí stránky v seznamech vyhledávání.
4,Klíčová slova
<meta name=“keywords“ content=“grafika, tvorba webu, HTML, CSS“>
Klíčová slova podobně jako popisek určují obsah stránek. Do tohoto tagu vypisujeme okolo šesti co nejkonkrétnějších slov, které nejlépe vystihují obsah stránky. Klíčová slova se píší za sebe a oddělují se čárkou. Všechna slova mohou být v jednotném i množném čísle, mohou se skloňovat a být v různých pádech.
Pro českou jazykovou verzi stránek by měla být nastavená česká klíčová slova, pro anglickou verzi anglická atd. Česká stránka by tedy neměla obsahovat anglické výrazy.
V dnešní době již není používání tagu „keywords“ důležité. Dříve jej vyhledávače používali pro řazení výsledků. Google v posledních letech již tento tag pro vyhledávání a indexování informací a obsahu nevyužívá. Přesto mohou nastat situace, kdy bude nastavení této značky užitečné (např. pro ostatní vyhledávače), proto doporučuji jí nastavovat vždy.
5, Roboti
<meta name=“robots“ content=“index, follow“>
Roboti jsou automatické programy, které prochází internetem, procházejí jednotlivé stránky a jejich obsah zaznamenávají do souhrnných databází (indexů). Tímto řádkem v kódu stránky říkáme robotům, aby naší stránku navštívili, indexovali (zapsali) její obsah a prošli další odkazy, které vedou na další podstránky.
Některé firmy mají své vlastní roboty, kteří vyžadují speciální kód, např. Google a jeho Googlebot.
Nastavení robotů může velmi pomoci návštěvnosti stránek. Ovšem výchozí hodnota all, follow obvykle přináší stejné výsledky, jako kdyby tento tag nastaven nebyl. Pro nové webové projekty nastavení pro roboty určitě přidejte.
6, CSS propojení
<link rel=“stylesheet“ type=“text/css“ href=“style.css“>
Tento kód nastavuje propojení na externí CSS soubor, který vytváří design stránky. Více v kapitole CSS – Kaskádové styly.
7, Přesměrování
<meta http-equiv=“refresh“ content=“10;URL=’http://kurzygrafiky.cz/'“ />
Jeden ze způsobů přesměrování na jinou webovou stránku. Číslo v parametru content značí počet sekund, které musí uběhnout, než dojde k přesměrování. Parametr url udává cílovou adresu, kam budou návštěvníci přesměrováni.
8, Viewport
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>
Viewport je uživatelsky viditelná oblast webové stránky. Výřez stránky se liší podle zařízení a na mobilním telefonu bude menší než na obrazovce počítače. Před tablety a mobilními telefony byly webové stránky určeny pouze pro obrazovky počítačů a bylo běžné, že webové stránky měly statický design a pevnou velikost. Po nástupu tabletů a mobilních telefonů, webové stránky s pevnou velikostí byly příliš velké a nevešly se do zobrazované oblasti. Aby se tomu předcházelo, prohlížeče na těchto zařízeních zmenšují webovou stránku tak aby se vešla na obrazovku.
Příklad jednoduché kompletní hlavičky:
<head>
<meta charset=“UTF-8″>
<title>KURZY GRAFIKY.CZ</title>
<meta name=“description“ content=“Kurzy počítačové grafiky a webdesignu“>
<meta name=“keywords“ content=“grafika, tvorba webu, HTML, CSS“>
<meta name=“robots“ content=“index, follow“>
<link rel=“stylesheet“ type=“text/css“ href=“style.css“>
</head>
Pro více informací o správném nastavení webové stránky navštivte kurz SEO – Optimalizace pro vyhledávače.