Do hlavičky webu <head> se zapisují elementy <title>, <style>, <link>, <meta>, <script> či <base>.
<!DOCTYPE HTML> <!--Značí, že se jedná o dokument HTML5.-->
<html> <!--Začátek dokumentu.-->
<head> <!--Mezi značky head se vkládají meta data, jako např. title, style, script, meta, link atd. Není pro uživatele běžně viditelné. -->
<meta charset="UTF-8"> <!--Kódování stránky. Může být i např. "windows-1250".-->
<title>Základy kódování HTML | Smuton.cz</title> <!--Titulek stránky, který je vidět v záložce prohlížeče.-->
<meta name="description" content="Popisek stránky, který může být vidět ve výsledcích vyhledávání.">
<meta name="keywords" content="HTML, CSS, JavaScript, další keywords"> <!--Dříve se používalo jako výpis klíčových slov. Dneska již nikoliv.-->
<meta name="author" content="Smuton.cz"> <!--Informace o autorovi dané stránky.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Díky této značce bude web vypadat dobře i na mobilních zařízeních.-->
<meta name="robots" content="index, follow" /> <!--Říká robotům, zda tuto aktuální stránku mají indexovat do výsledků vyhledávání (SERPu).-->
<meta http-equiv="refresh" content="30"> <!--Definuje, že stránka se bude každých 30 vteřin obnovovat.-->
<link rel="alternate" hreflang="cs-CZ" href="https://www.smuton.cz/" /> <!--V případě více jazykových mutací, dáváme robotům vědět, kde najdou stránku s jiným jazykem.-->
<link rel="alternate" hreflang="en-GB" href="#" /> <!--Říká robotům, že najdou EN verzi webu a pro GB uživatele, na dané URL.-->
<style> /*Stylovaní obsahu v části body. Styly lze také vytvořit externě pomocí tagu <link>.*/
h1 {
background-color: #b85151; /*Nastavení dvojitého rámečku na jednoduchý*/
width: 100%; /*Nastavení šířky tabulky*/
}
/*<link rel="stylesheet" href="vlastnistyly.css"> Takto lze přidat externí styly, respektive přidat cestu k souboru .css, kam se píšou styly zvlášť mimo HTML dokument.
</style>
</head>
<body> <!--Začátek těla stránky. Mezi tagy body se umisťuje obsah, který je viditelný pro uživatele.-->
<h1>Nadpis nejvyšší úrovně</h1> <!--Nadpis nejvyšší úrovně. Stále důležitý pro SEO.-->
<p>Obyčejný odstavec.</p>
</body> <!--Konec těla stránky. Za tímto tagem již nebude nic vidět.-->
</html> <!--Konec dokumentu.-->Tag <style> definuje informace o stylování obsahu v části <body>. Styly mohou být inline, kdy jsou přímo u daného tagu v části <body> nebo externě v části <head> a to buď podobným zápisem níže nebo pouze jako odkaz na soubor, kde požadované styly jsou umístěny. Preferuje se právě tato poslední možnost odkazování na soubor CSS.
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style><link rel="stylesheet" href="vlastnistyly.css"> /*Odkazuje na soubor CSS, kde jsou všechny styly pro naší stránku.*/
Title definuje název konkrétní stránky a je důležitý z pohledu SEO. Text titulku by se měl zpravidla vejít do 60 znaků, nicméně záleží spíše na šířce textu v pixelech. V případě, že text titulku bude delší, nebude se stejně zobrazovat celý ve výsledcích vyhledávání a bude zalomen.
<title>Základy kódování HTML | Smuton.cz</title> <!--Titulek stránky, který je vidět v záložce prohlížeče.-->
Meta description je popisek stránky, který může, ale i nemusí, být vidět ve výsledcích vyhledávání. Jedná se opět o důležitý prvek v SEO, nicméně tag <title> je poměrně důležitější. Meta description (i title) může také poměrně dost ovlivnit zvýšení CTR a tím pádem výsledky v SEO a potažmo i prodejní.
<meta name="description" content="Popisek stránky, který může být vidět ve výsledcích vyhledávání.">
Viewport definuje zobrazení na mobilu, tudíž se opět jedná o důležitý SEO faktor. Váš web by se měl umět přizpůsobit jakémukoliv zařízení.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Hreflang. V případě, že má váš web několik jazykových mutací, je dobré vložit do hlavičky také tzv. hreflang, který vyhledávače informuje, kde jazykové mutace najít.
<link rel="alternate" hreflang="cs-CZ" href="https://www.smuton.cz/" /> <!--Jazyková mutace pro CZ.--> <link rel="alternate" hreflang="en-GB" href="#" /> <!--Říká robotům, že najdou EN verzi webu a pro GB uživatele, na dané URL (#).-->
Kanonizace. Pokud máte např. dvě podobné stránky, je vhodné vyhledávačům ukázat, která je ta hlavní a měly by jí upřednostnit. Vhodné je, pokud adresa, na kterou vede kanonizace, by měla být indexovatelná. Vhodné také je, pokud máte pouze originální stránky a nemají jiné podobné stránky, na které byste mohli kanonizaci použít, tak i přesto odkázat na svou vlastní stránku.
<link rel="canonical" href="https://www.smuton.cz/">