Z našej skúsenosti je hreflang jednou z najčastejšie nepochopených a chybne implementovaných vecí, na ktoré pravidelne narážame v rámci SEO auditov. Aj toto bol jeden z dôvodov, prečo sme sa rozhodli napísať tento článok.

Poďme si teda povedať viac o tom, čo je hreflang, na čo slúži a ako ho správne zapracovať na webe. Poskytneme vám aj prehľad najčastejších chýb či príkladov nastavenia hreflang-u v rôznych prípadoch.

Čo je Hreflang a na čo slúži?

Hreflang predstavuje kúsok kódu, ktorým označujeme webstránku pre vyhľadávače tak, aby mali jasnú predstavu o tom, na aké publikum chceme danú vstupnú stránku cieliť s ohľadom na zvolený jazyk prehliadača a aktuálnu geografickú polohu. Využíva sa v prípade, ak máte viacjazyčný web a obsahovo totožné stránky, ktoré sa odlišujú iba prekladom do iného jazyka.

Vďaka tomuto označeniu vie vyhľadávač lepšie vyhodnotiť, akú vstupnú stránku vášho webu má zobraziť napr. návštevníkovi zo Slovenska a akú návštevníkovi zo zahraničia.

Aké sú spôsoby implementácie?

Hreflang sa dá implementovať 3 základnými spôsobmi. Niektoré sa viac hodia pre menšie weby, resp. weby s menším počtom jazykových mutácií, iné sú praktické pre weby preložené do desiatok jazykov.

Ide o nasledovné spôsoby:

  1. pomocou HTML tagov v sekcii <head>
  2. pomocou HTTP hlavičiek (HTTP headers)
  3. pomocou súboru Sitemap.xml

O ich špecifikách si povieme viac v tomto článku. Všetky spôsoby zároveň nájdete vysvetlené na oficiálnej stránke Google Search Central aj s konkrétnymi odporúčaniami.

1. Implementácia v sekcii <head> 

Nastavenie hreflang-u pomocou HTML tagov v sekcií <head> je zrejme najpoužívanejším spôsobom, ktorý preferujeme aj my vo Visibility. Správny zápis hreflang kódu v HTML by mal vyzerať nasledovne:

<link rel=“alternate“ hreflang=“lang_code“ href=“url_of_page“ />

V tomto prípade je nevyhnutné dodržiavať nasledovné pravidlá:

  • tag „link” by mal byť umiestnený čo najvyššie v rámci sekcie <head> vstupnej stránky,
  • mal by byť zakaždým označený pomocou parametra rel=“alternate“,
  • mal by obsahovať správne špecifikovaný jazyk (región nie je nevyhnutný, no môžete ho zahrnúť tiež),
  • mal by obsahovať absolútnu URL adresu konkrétnych stránok na vašom webe, nie ich relatívne verzie,
  • tag „link” by mal byť ukončený />,
  • mali by ste špecifikovať verziu pre prípady nešpecifikovaného jazyka (x-default),
  • mali by ste označiť každú jednu jazykovú variáciu skrz samostatný tag „link”,
  • nezabudnite na označenie jazyka aj pre samotnú vstupnú stránku, na ktorej hreflang implementujete,
  • každá URL adresa by mala mať samostatne určenú kanonizáciu.

Nie ste si istí, aké sú správne kódy pre jazyk a región? 

Pre označenie jazyka používajte formát ISO 639-1 (zapisuje sa dvomi malými písmenami), zatiaľ čo pre označenie regiónu používajte formát ISO 3166-1 Alpha 2 (zapisuje sa dvomi veľkými písmenami).

 

Príklady správnej implementácie (EN/SK/CZ/HU):

Najjednoduchší prípad nastavenia hreflang-u je v prípade, ak máte jeden web, ktorý má anglickú a iné jazykové verzie typické pre náš región. V tomto príklade uvádzame web https://www.priklad.com s verziami pre anglický jazyk, slovenský jazky, český jazyk a maďarský jazyk.

Do sekcie <head> vložíme nasledovný kód:

<link rel=“alternate“ hreflang=“x-default“ href=“https://www.priklad.com/“ />

<link rel=“alternate“ hreflang=“sk“ href=“https://www.priklad.com/sk/“ />

<link rel=“alternate“ hreflang=“cs“ href=“https://www.priklad.com/cz/“ />

<link rel=“alternate“ hreflang=“en“ href=“https://www.priklad.com/en/“ />

<link rel=“alternate“ hreflang=“hu“ href=“https://www.priklad.com/hu/“ />

Nezabudnite, že sekcia head na každej URL adrese by mala mať okrem správneho hreflang tagu nastavenú aj správnu kanonizáciu.

Variant x-default označuje, ktorú verziu stránky má Google zobraziť v prípade, ak jazyk, ktorý má používateľ nastavený, nie je špecifikovaný pomocou hreflang-u. V ideálnom prípade je to anglická verzia webu, keďže globálne, ako aj v našom regióne, je to stále najuniverzálnejší jazyk. Existuje preto vysoký predpoklad, že návštevník, pre ktorého nemáte vytvorenú správnu jazykovú verziu, aj tak pochopí váš web v anglickom jazyku.

Pokiaľ nemáte špecifické jazykové verzie webu zacielené na konkrétne regióny, napríklad jednu anglickú verziu webu cielenú na UK a druhú anglickú verziu webu cielenú na USA, nemusíte špecifikovať región.

Obdobne postupujeme aj v prípade, ak sú jazykové verzie umietnené na samostatných subdoménach, kde do sekcie <head> vložíme nasledovný kód:

<link rel=“alternate“ hreflang=“x-default“ href=“https://en.priklad.com/“ />

<link rel=“alternate“ hreflang=“sk“ href=“https://sk.priklad.com/“ />

<link rel=“alternate“ hreflang=“cs“ href=“https://cz.priklad.com/“ />

<link rel=“alternate“ hreflang=“en“ href=“https://en.priklad.com/“ />

<link rel=“alternate“ hreflang=“hu“ href=“https://hu.priklad.com/“ />

Príklad správnej implementácie hreflang kódov (SK/EN):

Máte web, ktorý má jednu anglickú a jednu slovenskú jazykovú verziu? V takom prípade odporúčame nastaviť hreflang v sekcii <head> nasledovne:

<link rel=“alternate“ hreflang=“x-default“ href=“https://www.priklad.com/“ />

<link rel=“alternate“ hreflang=“en“ href=“https://www.priklad.com/“ />

<link rel=“alternate“ hreflang=“sk“ href=“https://www.priklad.com/sk/“ />

<link rel=“alternate“ hreflang=“cs“ href=“https://www.priklad.com/sk/“ />

Keďže máme anglickú verziu, odporúčame ju nastaviť na verziu x-default pre všetky jazyky, ktoré sú nešpecifikované pomocou hreflang a taktiež pre anglický jazyk. Okrem toho máme už iba slovenskú verziu webu. Ak by sme špecifikovali iba slovenský jazyk, hrozilo by, že by sa web mohol zobrazovať českým používateľom v anglickom jazyku.

Vzhľadom na podobnosť slovenčiny s češtinou odporúčame radšej zadefinovať totožnú URL adresu v rámci hreflangu pre oba jazyky, hoci to nie je úplne „s kostolným poriadkom”.

Príklad správnej implementácie hreflang kódov (CZ/EN):

Ak máme iba anglickú a českú verziu webu, odporúčame hreflang nastaviť v sekcii <head>, teda obdobne, ako v príklade vyššie. Jediný rozdiel je v URL adrese pre slovenský a český jazyk, kde použijeme českú jazykovú mutáciu:

<link rel=“alternate“ hreflang=“x-default“ href=“https://www.priklad.com/“ />

<link rel=“alternate“ hreflang=“en“ href=“https://www.priklad.com/“ />

<link rel=“alternate“ hreflang=“sk“ href=“https://www.priklad.com/cz/“ />

<link rel=“alternate“ hreflang=“cs“ href=“https://www.priklad.com/cz/“ />

Príklad správnej implementácie hreflang kódov (SK/CZ):

Máte web, ktorý má iba českú a slovenskú jazykovú mutáciu? V takom prípade odporúčame hreflang nastaviť v sekcii <head> nasledovne:

<link rel=“alternate“ hreflang=“sk“ href=“https://www.priklad.com/sk/“ />

<link rel=“alternate“ hreflang=“cs“ href=“https://www.priklad.com/cz/“ />

V tomto prípade ignorujeme x-default, keďže nemáme vhodný jazykový variant pre ostatné jazyky, ktoré sú nešpecifikované pomocou hreflang nastavení. Z našej skúsenosti je v tomto prípade vhodnejšie nechať rozhodnutie na samotný Google.

2. Implementácia pomocou HTTP hlavičiek

Implementácia pomocou hlavičiek HTTP je praktická pre URL adresy, ktoré nemajú klasický HTML formát. Tento spôsob je preto vhodný napríklad pre súbory PDF, ktoré weby často publikujú online aj vo viacerých jazykových verziách. Ak by ste sa chceli dozvedieť viac o hlavičkách HTTP, prečítajte si tento článok. 

Správny formát pre header vyzerá nasledovne:

Link: <url1>; rel=“alternate“; hreflang=“lang_code_1″, <url2>; rel=“alternate“; hreflang=“lang_code_2″, …

Príklad správnej implementácie:

Link: <https://priklad.com/file.pdf>; rel=“alternate“; hreflang=“en“,

      <https://sk.priklad.com/file.pdf>; rel=“alternate“; hreflang=“sk“,

      <https://de-at.priklad.com/file.pdf>; rel=“alternate“; hreflang=“de-AT“

3. Implementácie cez súbor sitemap.xml

Asi najmenej praktické definovanie hreflang kódu môžete vykonať pomocou súboru Sitemap.xml. Pokiaľ máte iba niekoľko jazykových verzií webu, môžete implementovať hreflang aj týmto spôsobom. 

V prípade veľkého množstva jazykových mutácií sa však súbor Sitemap stane neprehľadným a komplikovaným. Práve preto toto riešenie zvyčajne neodporúčame.

Príklady správnej implementácie:

<?xml version=“1.0″ encoding=“UTF-8″?>

<urlset

  xmlns:xhtml=“http://www.w3.org/1999/xhtml“>

  <url>

    <loc>https://www.priklad.com/en/page.html</loc>

    <xhtml:link

               rel=“alternate“

               hreflang=“sk“

               href=“https://www.priklad.com/sk/page.html“/>

    <xhtml:link

               rel=“alternate“

               hreflang=“de-AT“

               href=“https://www.priklad.com/de-at/page.html“/>

    <xhtml:link

               rel=“alternate“

               hreflang=“en“

               href=“https://www.priklad.com/en/page.html“/>

    <xhtml:link

               rel=“alternate“

               hreflang=“x-default“

               href=“https://www.priklad.com/en/page.html“/>

  </url>

  <url>

    <loc>https://www.priklad.com/sk/page.html</loc>

    <xhtml:link

               rel=“alternate“

               hreflang=“sk“

               href=“https://www.priklad.com/sk/page.html“/>

    <xhtml:link

               rel=“alternate“

               hreflang=“de-AT“

               href=“https://www.priklad.com/de-at/page.html“/>

    <xhtml:link

               rel=“alternate“

               hreflang=“en“

               href=“https://www.priklad.com/en/page.html“/>

    <xhtml:link

               rel=“alternate“

               hreflang=“x-default“

               href=“https://www.priklad.com/en/page.html“/>

  </url>

  <url>

    <loc>https://www.example.com/austria-deutsch/page.html</loc>

    <xhtml:link

               rel=“alternate“

               hreflang=“sk“

               href=“https://www.priklad.com/sk/page.html“/>

    <xhtml:link

               rel=“alternate“

               hreflang=“de-AT“

               href=“https://www.priklad.com/de-at/page.html“/>

    <xhtml:link

               rel=“alternate“

               hreflang=“en“

               href=“https://www.priklad.com/en/page.html“/>

    <xhtml:link

               rel=“alternate“

               hreflang=“x-default“

               href=“https://www.priklad.com/en/page.html“/>

  </url>

</urlset>

 

Upozornenie:

Google berie označenie hreflang ako odporúčanie, nie príkaz (na rozdiel od noindex tagov). Takže aj napriek správnej implementácii sa môže vyhľadávač v konečnom výsledku rozhodnúť podľa seba. Ak je však všetko správne implementované a preložené, vyhľadávač nemá dôvod nenasledovať vaše označenie pomocou hreflang tagov.

Najčastejšie chyby, s ktorými sa môžeme stretnúť

Tak, ako takmer každý iný technický aspekt webov, ktorý zohráva úlohu z pohľadu optimalizácie pre vyhľadávače, aj hreflang je súčasťou našich SEO auditov. Vďaka tomu máme za tie roky pomerne slušné skúsenosti s chybami, ktoré sa často opakujú.

Nižšie prinášame ich prehľad:

  • absentujúci, resp. zle špecifikovaný x-default tag,
  • neuzavretý tag,
  • chybné označenie českého jazyka (CZ je označenie regiónu, jazyk sa označuje cs),
  • absentujúce spätné hreflang prepojenia,
  • nepoužívanie absolútnych URL adries,
  • chybne označené, resp. chýbajúce tagy pre kanonizáciu,
  • chybné označenie regiónu pre Veľkú Britániu (hoci je UK skratka pre United Kingdom, región sa označuje GB),
  • absentujúci hreflang tag označujúci samotnú URL adresu (tzv. self-referencing).

Všetky ostatné pochybenia sme identifikovali skôr výnimočne. Ak preto robíte audit hreflang-u konkrétneho webu, viete, na čo sa máte zamerať. Štatisticky sa zrejme na danom webe bude vyskytovať niekoľko z nich.

Hreflang na rôznych platformách

Na to, aby ste si vedeli vybrať tú najvhodnejšiu cestu, ako implementovať svojpomocne hreflang na vašom webe, musíte najprv určiť, na akej platforme váš web beží. Nižšie prikladáme krátky prehľad tých najpopulárnejších.

Hreflang pre WordPress

Najjednoduchší spôsob, ako implementovať hreflang na weboch, ktoré sú postavené na platforme WordPress, je použitie pluginov. Na výber máte niekoľko praktických riešení.

Ak ste len vo fáze plánovania viacjazyčného webu, použite jeden z nasledovných pluginov:

Okrem hreflang-u prichádzajú aj s viacerými inými funkciami, ktoré vám prídu vhod.

Ak už máte web hotový a chcete iba nastaviť hreflang:

Odporúčame vybrať si ten, ktorý bude najviac spĺňať vaše aktuálne potreby. Samozrejme, nie vždy to bude riešenie zadarmo.

Hreflang pre Prestashop

Pri Prestashope sú zvyčajne rozšírenia a doplňujúce moduly drahšie ako pre iné platformy. Ani v prípade hreflangu to nie je výnimka. Jedno z najpopulárnejších riešení sa volá SEO Google Hreflang & Canonical Tags on All Pages. Je k dispozícii aj riešenie zadarmo, avšak jeho funkčnosť a kompatibilita sú otázne.

Hreflang pre Shopify

Tak, ako v prípade ostatných platforiem, aj pre Shopify existujú moduly a rozšírenia, ktoré vám umožnia pomerne jednoducho zapracovať hreflang na váš web. Aj tieto sú však zvyčajne spoplatnené. 

Našťastie, takmer každý má svoju „Free Trial” verziu, kde si viete daný modul a jeho kompatibilitu vyskúšať zadarmo.

Do pozornosti dávame riešenia čisto pre hreflang:

Komplexnejšie riešenia pre preklad webov s pridaním hreflang-u:

Hreflang pre weby na mieru

Je váš web, resp. web klienta „nakódený” na mieru bez použitia vyššie zmienených populárnych platforiem? V takýchto prípadoch musíte aj hreflang ako taký implementovať na mieru.

Vzhľadom na úroveň vášho programátorského vzdelania a schopností môžete implementovať hreflang buď svojpomocne podľa odporúčaní a príkladov spomenutých vyššie, alebo musíte osloviť programátora, čo sa spája s dodatočnými finančnými nákladmi.

Najlepšie nástroje na audit a preverenie Hreflang-u

Tak, ako v prípade ostatných technických prvkov webov, ktoré auditujeme z pohľadu optimalizácie pre vyhľadávače, aj pri kontrole hreflang-u nám pomáhajú rôzne praktické nástroje.

Nižšie prikladáme zoznam najzákladnejších nástrojov na audit hreflang-u:

  • Screaming Frog – tzv. švajčiarsky nožík každého SEO špecialistu. Viete si ho stiahnuť aj vo verzii zadarmo. Hoci má takáto verzia svoje obmedzenia, mala by stačiť na audit implementácie hreflang-u na menšom webe. Ak máte platenú verziu, viete urobiť aj komplexnú analýzu celého webu, najmä vtedy, keď má viac než 500 URL adries.
  • Google Search Console – ďalšia klasika, na ktorú by nemal nikto zabudnúť. V rámci sekcie „International Targeting” viete postupne identifikovať všetky problematické miesta v aktuálnom hreflang nastavení vášho webu.
  • Technical SEO – pokiaľ chcete urobiť námatkovú kontrolu vybraných URL adries na webe s ohľadom na správnu implementáciu hreflang tagov, odporúčame vyskúšať práve tento online nástroj, ktorý vám ukáže chyby a odporúčania, ktoré by ste mali zapracovať. 
  • The hreflang Tags Generator Tool – tento online nástroj vám vygeneruje hreflang kód pre konkrétne URL adresy. Je ideálny pre tých, ktorí sa snažia implementovať hreflang svojpomocne.
  • Hreflang.org – jednoduchý online nástroj pre hromadné overenie URL adries. Stačí ich naraz vložiť, stlačiť tlačidlo „Test Hreflang Implementation” a počkať, kým zbehne celá analýza.

Samozrejme, podobných nástrojov nájdete na webe nespočetné množstvo. Vyskúšajte si ich a nájdite si taký, ktorý vám bude vyhovovať najviac.