HTML5 a SEO

HTML5 je velkým technologickým krokem dopředu a dává vývojářům webů nové možnosti, jak naplnit cíle webu. Je zatím nedokončenou specifikací, která se pořád vyvíjí (a ještě dlouho bude https://dev.w3.org/…14-plan.html ), ale mnoho jeho výhod můžeme využívat již teď. Je však přínosem i pro vyhledávače, potažmo pro optimalizaci stránek? Které oblasti HTML5 si máme všímat?

Segmentace webové stránky a sémantika

Hlavním přínosem HTML5 pro vyhledávače z hlediska sémantiky jsou nové tagy, které umožňují lepší popis obsahu stránek. Pomocí těchto elementů můžeme určit funkci jednotlivých částí stránky a jejich vztah k hlavnímu sdělení (obsahu) stránky. Umožní to vyhledávačům identifikovat hlavičku, navigaci, postranní panel, hlavní článek apod. – a přiřadit jim odpovídající důležitost.

V současnosti se na segmentaci obsahu stránky používají tagy <div>. Tyto tagy nemají žádný sémantický význam, a proto nepředávají svému obsahu žádnou přidanou hodnotu.

To byl důvod proč se do HTML5 zavedly elementy <header>, <article>, <aside> a <footer>. Umožňují jednoduchou segmentaci stránky podle svého obsahu. Některé z nich se mohou na stránce opakovat vícekrát, nebo se mohou do sebe zanořovat a měnit tak trochu význam. Pro účely článku si ale představíme jen jejich základní sémantický význam.

<section>

Reprezentuje jednotku obsahu – například kapitolu nebo jednu stránku článku. Měla by obsahovat vlastní nadpis, header a footer. Je to obecný element, často se může (a i musí) nahradit konkrétnějším elementem, jako jsou např. article, aside, atd.

<article>

V SEO platí: „Obsah je král“. Pomocí tagu <article> umožníme identifikovat vyhledávači nejdůležitější část stránky. Z hlediska SEO jde nejspíše o nejvýznamnější novinku HTML5.

Je velmi pravděpodobné, že vyhledávače časem začnou obsahu tagu <article> dávat zvláštní důraz.

<aside>

Dodatkové informace k článku nebo k celé stránce. Nejčastější využití bude boční sloupec. Vyhledávače nejspíš budou dávat informacím z tohoto elementu nižší důležitost (vztaženo na hlavní téma stránky).

<header>

Hlavička stránky nebo článku. Typicky obsahuje navigaci a hlavní nadpis. V případě hlavičky celé stránky obsahuje často i logo a název stránky i vyhledávání. Tyto informace umožní vyhledávačům ukotvení hlavního obsahu stránky vzhledem k celému webu.

<footer>

Element <footer> označuje patičku své sekce. V případě článku obsahuje informace o autorovi, odkazy na zdroje či copyright. Také ale může obsahovat patičku celé stránky s odkazy na sociální sítě, pravidla použitelnosti apod. Jestli budou patičky i nadále obsahovat málo kvalitní odkazy, jak je tomu často dnes, je možné, že vyhledávače budou tento element „ignorovat“.

<nav>

Element <nav> by měl obsahovat hlavní navigaci webu. Umožní vyhledávačům lépe analyzovat informační architekturu webu.

HTML5 a typy linků

Další silnou stránkou HTML5 je zjednodušení odkazování na jiné varianty textu, nebo jeho doplnění a ulehčení správné indexace tohoto obsahu vyhledávači. Momentálně můžeme využívat jenom atribut rel, kterým označíme alternativní obsah, který se nemá indexovat. V HTML5 máme vícero možností:

Author

<link rel=„author“ href=„https:/­/plus.google.com/1234567­890“>

Umožňuje odkazovat přímo na stránku nebo profil autora. Je samozřejmě nutné profil mít, z hlediska optimalizace pro Google nejlíp na Google+.

Alternate

<link rel=„alternate“ hreflang=„en“ href=„english.htm“>

Tento atribut nám umožňuje odkazovat na alternativu obsahu stránky, či už v jiném jazyce, nebo v jiném typu dokumentu, např. v PDF. Vyhledávače to časem mohou využít např. na sčítaní ranků odkazů na různé verze téhož dokumentu.

Bookmark

<a rel=„bookmark“ href=„https://­mojestranka.cz/cla­nek.htm“>Perma­link</a>

Pomocí tohoto atributu můžeme odkazovat na stálou (permanentní) adresu článku. Využijeme ji nejčastěji u blogů, kde se umístění článku na hlavní stránce v čase mění. Ulehčí to vyhledávačům identifikaci trvalé adresy článku.

Help

<link rel=„help“ href=„napoveda­.htm“>

Byla navržena hlavně pro webové aplikace. Měla by ulehčit nalezení souborů s nápovědou.

License

<a rel=„license“ href=„licence­.htm“>Informa­ce o licenci</a>

Ulehčuje odkazování na licenční informace.

Next a Prev

<a rel=„next“ href=„page-2.htm“>Další</a>
<a rel=„prev“ href=„page-0.htm“>Předcho­zí</a>

Next a Prev využijeme na označení předchozí a příští stránky delšího článku, nebo na lepší orientaci v sérii článků. Vyhledávačům to výrazně ulehčí orientaci ve vztazích mezi jednotlivými stránkami webu. 

Pomáhá v současnosti HTML5 při SEO?

Přímo zatím asi ne. Zaměstnanec Google John Mueller napsal: (https://productforums.google.com/forum/!searchin/web­masters/author­name:johnmu|sor­t:date/webmas­ters/ihmDyu5y­krs/Kq0VngOh71oJ):

Our crawling and indexing systems currently don't do anything special for HTML5, so there is no „bonus“ for using HTML5 constructs, but similarly also generally no downside.

Naši roboti nejsou schopni rozeznat všechny html tagy (včetně HTML5 tagů). 

Několik výhod HTML5 má již teď

Přehlednější kód

Pozitivem HTML5 z hlediska SEO je zatím čistější kód stránek a tudíž jejich snadnější indexace. Stránky v HTML5 vytvářejí zatím hlavně nadšenci nových technologií a ti se většinou snaží o maximální využití všech možností a dodržují standardy. Nové stránky jsou zároveň oproštěné od různého balastu, který se v kódu starších stránek nahromadil díky úpravám a změnám od doby jejich vzniku.

Mikrodata

Dalším bonusem je jednoduchá implementace mikrodat, které již Google běžně využívá, například při vytváření snippetů ve výsledcích vyhledávaní.

Nahrazení Flashe

Již v současnosti jde pomocí HTML5 plnohodnotně nahradit většinu flashových prvků na stránkách včetně mnoha aplikací. Na rozdíl od flashové verze, jsou HTML5 verze plně indexovatelné. Velkým přínosem to bude například pro efektní designové flashové stránky z oboru reklamy, showbyznysu, a kreativních profesí, které neměli HTML alternativu.

Indexace Ajaxových stránek

Stránky, které využívají možnosti Ajaxu, umožňují načítat nový obsah stránky ze serveru bez toho, aby se změnila URL stránky. Vyhledávače mohou indexovat jenom původní obsah stránky a vše, co se načte až v průběhu uživatelovi návštěvy na stránce je pro ně neviditelné. Nové možnosti HTML5 v kombinaci s JavaScriptem umožňují měnit URL stránky a tím indexovat a odkazovat obsah, který „vznikl“ až uživatelovou akcí na stránce.

Časem lze jistě očekávat i využití sémantických možností HTML5 vyhledávači.