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/1234567890“>
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/clanek.htm“>Permalink</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“>Informace 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ředchozí</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/webmasters/authorname:johnmu|sort:date/webmasters/ihmDyu5ykrs/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.
Indexace Ajaxových stránek? Zatím jsem nenarazil na případ robota, který by uměl Ajaxové dotazy. Do že se URL mění dynamicky bez reloadu stránky na straně uživatele je pěkné ale neznaménáto že se stránka bude indexovat. Základem je aby všude na stránce byly aktivní alementy , se správným linkem a server zobrazil stejný obsah jako u Ajaxového dotazu. U nás tak fungují např. mixer.cz, tipcars.com
Třeba Google umí indexovat ajxové komentáře na Facebooku.
Osobně nejsem velkým příznivcem nové sémantiky v HTML 5, v současné době nemá žádný přínos z hlediska SEO. Kromě toho všechny ty nové značky nav, aside, article section, jsou opravdu dost hloupě definovány a už teď je mnoho kodérů,webdesignérů a vyvojářů, kteří je používají nesprávným způsobem. Četl jsem opravdu skvělou knihu od Luka Stevense viz. odkaz https://www.truthabouthtml5.com/
V knize je speciální sekce ohledně používání nového značkování v html 5 a je zde velmi dobře podloženo, proč nepoužívat nové sémantické prvky jako aside, nav, article, section.
Nicméně, každý musí zvážit sám, zda-li má smysl to používat nebo ne, já ještě dlouhou dobu zůstanu u starých dobrých divů a používání ARIA role:-)
Co se týče html 5, tak určitě se najde pár zajímavých věcí, které bude mít smysl používat.
Prozatím si vystačím s HTML 4, CSS2, CSS3, PHP a Javascriptem.
Jako kodér a webový vývojář