Struktura HTML tagu HEAD vs. rychlost zobrazení stránky a SEO

  •   9 minutes read
Co vše musí být v HTML hlavičce a co by mělo, aby uživatelé jásali a vyhledávače chrochtaly blahem.
  • Pořadí tagů přímo ovlivňuje rychlost zobrazení (pre/rendering). Mít tagy link nad script je naprosté minimum. Obecně platí dávat nahoru tagy, které slouží k identifikaci stránky.
  • Rychlost renderingu také přímo ovlivňují hlavičky posílané serverem, např. uvedení kódování dokumentu atp.
  • Asynchronní načítání, lazy load nebo kritické CSS budiž předmětem dalšího článku :-)

Základní nastavení

  • Elementy <link> musí být před elementy <script> a nesmí se mezi sebou míchat.
  • Aby bylo možné stránku indexovat, musí být meta robots obsahovat alespoň hodnotu index. Současně takto označená stránka nesmí být vyjmuta nebo omezena ve vyhledávání roboty s souboru robots.txt.
<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="utf-8">
  <meta name="robots" content="index,follow">
  <link rel="canonical" href="https://www.example.com/">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
  <title>Název stránky</title>
  <meta name="description" content="Popis stránky">
  <meta name="author" content="autor obsahu, neplést s tagem generator atp.">
 
  <link rel="stylesheet" href="">
  <script src=""></script>

  <!-- Open Graph -->
  <!-- Twitter Cards -->
  <!-- Pinterest -->
  <!-- Pinned Sites -->
  <!-- Favicons -->
  <!-- App data -->
  <!-- JSON-LD -->
</head>

Vícejazyčná stránka

V příkladu je čeština je primární jazykovou verzí — uvedení shodné URL v canonical a hreflang.

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8">
    <meta name="robots" content="index,follow">
    <link rel="alternate" hreflang="cs-cz" href="https://www.example.com/cs/">
    <link rel="alternate" hreflang="en" href="https://www.example.com/en/">
    <link rel="alternate" hreflang="fr-fr" href="https://www.example.com/fr/">
    <link rel="canonical" href="https://www.example.com/cs/">

Pokud je to možné, tak doplnit i odkaz na rozcestník — místo, kam spadnou všichni, kdo nemají námi připravený jazyk rel="alternate" hreflang="x". Srozumitelně vysvětlené na ContentKing vč. nezbytné vazby na sitemap.xml.

Open Graph

Příklad pro obecnou stránku. Pro články nebo jiné typy nutno změnit og:type a další property dle specifikace.

<meta property="og:type" content="website">
<meta property="og:url" content="http://www.example.eu/cs/">
<meta property="og:site_name" content="Název webu (na všech stránkách stejný)">
<meta property="og:title" content="Název stránky (může být shodný s meta title)">
<meta property="og:description" content="Popis stránky (může být stejný jako meta description)">
<meta property="og:image" content="kanonická URL na obrázek dle specifikace (měl by být pro každou důležitou stránku jiný - platí pro obsahové weby)">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1180">
<meta property="og:image:height" content="984">

Twitter Cards

Příklad pro obecnou stránku. Pro jiné typy nutno změnit twitter:card a další tagy dle specifikace.

Kombinace s Open Graph

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@username for the website used in the card footer.">
<meta name="twitter:creator" content="@username for the content creator / author.">

twitter:site a twitter:creator jsou volitelné.

Samostatné uvedení nebo přetížení definice v Open Graph

<meta name="twitter:card" content="summary_large_image"> <!-- summary_large_image je univerzální, nutno zkontrolovat povahu stránky a nastavit správný typ a k tomu náležející parametry-->
<meta name="twitter:title" content="Název stránky (může být shodný s meta title)">
<meta name="twitter:description" content="Popis stránky (může být stejný jako meta description)">
<meta name="twitter:url" content="https://www.example.com/cz/">
<meta name="twitter:image" content="kanonická URL na obrázek dle specifikace (měl by být pro každou důležitou stránku jiný - platí pro obsahové weby)">

Pinterest

Pinned sites

  • Specialita pro uživatele webového prohlížeče Microsoft Internet Explorer nebo Edge. První implementace už v IE 9 na Windows 7.
  • Lze využít pro zobrazení rychlých odkazů na vámi definované stránky (Jump List) nebo posílat notifikace z Twitteru nebo RSS. Funguje jako rozšířená nabídka při připnutí na nabídku Start nebo jako (živé) dlaždice na Windows 8 a výše. Další info viz IEconfig.xml.
  • Technická specifikace

Favicons

<link rel="apple-touch-icon" sizes="180x180" href="https://www.example.com/static/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://www.example.com/static/icons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://www.example.com/static/icons/favicon-32x32.png">
  • Nahradíme <!-- Favicons --> ve vzoru výše.
  • Soubor favicon.ico explicitně neuvádíme, protože ho prohlížeče očekávají a sami se na něj dotazují. Soubor musí být v rootu domény a musí obsahovat ikonu o rozměrech 16×16, 32×32 px a 48×48 px, tzn. musí to být opravdu ikona a v multi-size variantě.
  • Ostatní rozměry nebo typy (SVG) jsou specifikovány v manifest.webmanifest.
  • Online generátor
  • Testovací utilita

Rozšířené informace pro prohlížeče

<link rel="manifest" href="https://www.example.com/manifest.webmanifest">
<meta name="apple-mobile-web-app-title" content="">
<meta name="application-name" content="">
<meta name="theme-color" content="#000000">
  • Nahradíme <!-- App data --> ve vzoru výše.
  • Hodnoty tagů s atributy og:site_name, apple-mobile-web-app-title, application-name a name v manifest.webmanifest by měly být shodné.
  • theme-color určuje podbarvení záhlaví Chrome na Androidu.

Web App Manifest

  • Soubor manifest.webmanifest obsahuje informace o stránce (webové aplikaci) a jak ji má zobrazit. Obsahuje název aplikace, ikony, řízení zobrazení UI
  • Úvod
  • Technická specifikace

Konfigurace pro Microsoft Edge a Internet Explorer

<meta name="msapplication-config" content="IEconfig.xml">
<meta name="msapplication-config" content="none">

Rich Snippets

<script type="application/ld+json"></script>

Závěr

  • Správné pořadí elementů v hlavičce lehce pomůže zrychlit zobrazení stránky.
  • Použitím Open Graph nebo Twitter Cards pomůžete zatraktivnit stránku při sdílení na sociálních sítích.
  • Použití Pinned Sites je poněkud sporné a hodně záleží na typu projektu. Pro běžnou stránku postačí konfigurovat jen základní IEconfig.xml s uvedením názvu a ikon.
  • Favikony jsou spíše pro radost. Jejich zobrazení závisí na daném prohlížeči. V zásadě se vyskytují všude od malé ikony před názvem stránky v záhlaví okna prohlížeče až po specifická zobrazení v nabídce Start nebo záložkách ři jako ikona aplikace na ploše.
  • Vyplatí se specifikovat chování na mobilech v manifest.webmanifest.
  • Použitím Rich snippets pomůžeme hlavně v hlubší indexaci ve vyhledávačích a lepšímu zacílení. Je důležité si uvědomit, pro jaké publikum (crawler) optimalizujeme, protože Seznam nebo Yandex se k sémantickému označování (také Microdata nebo RDF-A) chovají různě. Některé specifikace, které Google ještě v rámci JSON-LD nepodporuje můžeme uvést jako Microdata.
Zobrazit všechny články nebo sdílejte na Facebook Twitter