Hreflang atribut ve zktrace

Hreflang atribut se používá k označení jazyka stránky a geografického regionu, pro který je její obsah určený.

Při implementaci hreflang atributu se držte osvědčených postupů:

  • Odkazujte na stránku samotnou a její přeložené varianty
  • Ujistěte se, že máte hreflang odkazy obousměrné
  • Správně definujte kombinace jazyka a regionu
  • Vždy nastavte hreflang=”x-default”
  • Atribut hreflang a kanonické URL se musí shodovat
  • Při definování hreflang atributu používejte absolutní URL
  • Použijte pouze jednu metodu implementace hreflangu

Co se dozvíte v tomto článku

V tomto článku se dozvíte, co je to atribut rel="alternate" hreflang="x", proč je důležitý pro SEO a jak s jeho pomocí sdělit vyhledávačům, jaké je vaše cílové publikum.

Co je hreflang atribut?

Atribut rel="alternate" hreflang="x" označuje jazyk stránky a říká vyhledávačům, pro který geografický region je stránka určená.

Často se tento atribut nesprávně označuje jako tag rel="alternate" hreflang="x”. Pro zjednodušení ho budeme v tomto článku nazývat pouze hreflang atribut.

Pokud máte web v několika jazykových verzích, hreflang atribut instruuje vyhledávače tak, aby poznaly, kterou verzi zobrazit kterému uživateli.

Aleyda Solis
Aleyda Solis

Při použití hreflang atributu je nezbytné zdokumentovat implementaci a pravidla, která byla původně zavedena jako osvědčený postup. Při vstupu na nové trhy by pak mělo být vše opět zrevidováno. Tyto osvědčené postupy by měly být brány v úvahu vždy, když jsou spuštěny nové lokalizované části webu nebo stránky a/nebo když jsou spuštěny nové trhy nebo změněny jejich URL. Je tedy důležité být schopný aktualizovat a ověřit hreflang odpovídajícím způsobem.

Které vyhledávače podporují hreflang atribut?

V současnosti podporují hreflang atribut pouze Google a Yandex.

Bing, Baidu ani Seznam jej nevyužívají. Místo toho se spoléhají na jazyk (meta) content-language HTML atribut. Takže například, když chcete jasně sdělit, že váš anglický obsah je určen americkému publiku, pak to definujete takto:

<meta http-equiv=”content-language” content=”en-us”>

Alernativně Bing podporuje také definování content-language přes hlavičku HTTP.

Proč je dobré zajímat se o hreflang atribut?

Pokud váš web existuje ve více jazykových verzích, musíte nějak říct vyhledávačům, pro koho je která verze určená. Hreflang atribut označuje jazyk stránky a případně i region, pro který je určená.

Představte si, že máte web ve dvou jazycích: češtině a angličtině. Nějakým způsobem potřebujete říct vyhledávačům, že je veškerý váš obsah dvoujazyčný, aby byl správný obsah zobrazen správnímu publiku. Použijete k tomu hreflang atribut (v tomto případě en a cs).

Nebo si představte, že máte anglicky psaný web určený pro zákazníky v USA a Kanadě. Obsah webu je lokalizovaný zvlášť pro každý z těchto trhů. Teď jde o to, jak říct vyhledávačům, že je web sice v angličtině, ale stejně má dvě různé verze. V takovém případě použijete opět hreflang atribut (en-us a en-ca).

Kromě toho, že pomůžete vyhledávačům určit, kterou variantu mají pro uživatele zobrazit, zároveň tím předejdete problémům s duplicitním obsahem. To platí hlavně v případě, pokud používáte jeden jazyk v několika variantách pro různé trhy (jako v předchozím příkladě angličtinu ve dvou verzích pro USA a pro Kanadu). Obsah u obou verzí bude pravděpodobně velmi podobný, takže pokud byste jasně neoznačili, že se jedná o lokalizované verze, pro vyhledávače by to bylo matoucí.

William Vicary
William Vicary

Kdekoliv je to možné, hreflang a lokalizace obecně by měly být zváženy již během prvních počátečních diskuzích o architektuře webu. Webová stránka, která si je vědoma jednotlivých překladů, bude umožňovat také mnohem hladší implementaci hreflangu.

Jak vypadá hreflang atribut

Teď se zaměříme na to, jak hreflang atribut vůbec vypadá. Tady je příklad:

<link rel="alternate" hreflang="es" href="https://www.priklad.com/" />

Projdeme si to krok za krokem:

  1. Část link rel="alternate" říká, že existuje nějaký vztah mezi touto stránkou a nějakou další. Teď se zabýváme atributem hreflang, ale existuje spousta dalších vazeb mezi stránkami: mohou být například v sekvenci - tzv. stránkování, může existovat varianta stránky určená pro mobily nebo AMP stránka.
  2. Část hreflang="en" definuje cílové publikum podle jazyku obsahu. Může jít pouze o jazyk nebo kombinaci jazyku a země/regionu. V tomto případě je to zacíleno na anglicky mluvící svět.
  3. Část href obsahuje URL, na kterém se daná varianta stránky nachází. V tomto případě https://www.priklad.com

Jak nastavit hreflang atribut

Existují 3 způsoby:

  1. Pomocí link tagu v sekci <head> HTML stránky
  2. V hlavičce HTTP
  3. V souboru sitemap XML

Implementace hreflang atributu v HTML

Nejsnadnějším způsobem je obvykle přidat atribut hreflang do sekce <head> HTML stránky.

Použitím atributu hreflang definujete jak cílové publikum stránky, tak její lokalizované verze. Takže pokud máte například španělskou hlavní stránku, dostupnou také v anglické a francouzské verzi, a chcete, aby hlavní byla španělská, tak bude následující definice nastavena na všech variantách stránky španělské hlavní stránky:

<link rel="canonical" href="https://www.priklad.com/es/" /> <link rel="alternate" hreflang="es" href="https://www.priklad.com/es/" /> <link rel="alternate" hreflang="en-gb" href="https://www.priklad.com/uk/" /> <link rel="alternate" hreflang="fr" href="https://www.priklad.com/fr/" /> <link rel="alternate" hreflang="x-default" href="https://www.priklad.com/es/" />
Atribut hreflang signalizuje přeložené verze stránky.
Atribut hreflang signalizuje přeložené verze stránky.

V případě, že nemáte příslušnou jazykovou variantu pro cílové publikum, můžete nastavit, která varianta se zobrazí jako záložní. K tomu slouží hodnota x-default.

Implementace hreflang atriutu v hlavičce HTTP

Podobně jako kanonické URL a robots direktivy mohou být definovány v hlavičce HTTP, tam může být definován také hreflang.

Nejběžnějším případem užití je, když definujeme cílové publikum pro dokumenty, které nejsou v HTML, jako například PDF. PDF soubory jsou také procházeny a indexovány, a pokud je máte k dispozici v několika jazycích, dává smysl definovat, pro koho jsou určeny.

Zde si ukážeme příklad, jak vypadá část hlavičky HTTP, když je zde definován hreflang:

HTTP/1.1 200 OK Content-Type: application/pdf Link: <https://priklad.com/interesting-whitepaper.pdf>; rel="alternate";hreflang="x-default", <https://priklad.com/interesting-whitepaper.pdf>; rel="alternate";hreflang="en", <https://priklad.com/interesting-whitepaper-spanish.pdf>; rel="alternate";hreflang="es"

Implementace atributu hreflang v souboru XML sitemap

Hreflangatribut může být také definován v souboru sitemap XML.

Zde se podívejme, jak může vypadat home page, která je určena pro americké publikum, ale zároveň je dostupná pro britské a kanadské publikum:

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <url> <loc>https://priklad.com/</loc> <xhtml:link rel="alternate" hreflang="en-CA" href="https://priklad.com/en-ca/" /> <xhtml:link rel="alternate" hreflang="en-GB" href="https://priklad.com/en-gb/" /> <xhtml:link rel="alternate" hreflang="en-US" href="https://priklad.com/" /> <xhtml:link rel="alternate" hreflang="x-default" href="https://priklad.com/" /> </url> <url> <loc>https://priklad.com/en-ca/</loc> <xhtml:link rel="alternate" hreflang="en-GB" href="https://priklad.com/en-gb/" /> <xhtml:link rel="alternate" hreflang="en-US" href="https://priklad.com/" /> <xhtml:link rel="alternate" hreflang="en-CA" href="https://priklad.com/en-ca/" /> <xhtml:link rel="alternate" hreflang="x-default" href="https://priklad.com/" /> </url> <url> <loc>https://priklad.com/en-gb/</loc> <xhtml:link rel="alternate" hreflang="en-CA" href="https://priklad.com/en-ca/" /> <xhtml:link rel="alternate" hreflang="en-US" href="https://priklad.com/" /> <xhtml:link rel="alternate" hreflang="en-GB" href="https://priklad.com/en-gb/" /> <xhtml:link rel="alternate" hreflang="x-default" href="https://priklad.com/" /> </url> </urlset>
Jenny Halasz
Jenny Halasz

Pokud je to možné, doporučuji implementovat hreflang skrze vaši XML sitemapu. Je to mnohem lepší, a se správným kódem navíc také mnohem jednodušší cesta, než se o to starat přímo v kódu stránky. Ujistěte se, že používáte Google Search Console, protože právě ta vás upozorní, pokud v hreflang atributu uděláte nějaké chyby. Mějte také na paměti, že slovo “lang” v názvu hreflang, znamená jazyk. Můžete tedy definovat jazyk, bez konkrétního regionu, ale ne region bez definovaného jazyka.

Osvědčené postupy pro hreflang atribut

Osvědčené postupy pro implementaci atributu hreflang jsou:

  • Odkazujte na stránku samotnou a její přeložené varianty
  • Ujistěte se, že máte hreflang odkazy obousměrné
  • Správně definujte kombinace jazyka a regionu
  • Vždy nastavte hreflang=”x-default”
  • Atribut hreflang a kanonické URL se musí shodovat
  • Při definování hreflang atributu používejte absolutní URL adresy
  • Použijte pouze jednu metodu implementace hreflangu

Abychom si ukázali, jak správně používat hreflang atribut, vrátíme se k předchozímu příkladu s anglickým webem určeným pro USA, Kanadu a Velkou Británii.

Tady je kompletní definice atributu:

<link rel="alternate" hreflang="en-us" href="https://www.priklad.com/" /> <link rel="alternate" hreflang="en-ca" href="https://www.priklad.com/ca/" /> <link rel="alternate" hreflang="en-gb" href="https://www.priklad.com/uk/" /> <link rel="alternate" hreflang="x-default" href="https://www.priklad.com/" />

Jordy Noll
Jordy Noll

Pokud je váš obsah dostupný v určitém jazyce pro více oblastí, ujistěte se, že jedna z variant je cílena bez lokace. Příklad: pokud máte anglický obsah pro US, UK a Austrálii, definujte jeden z nich jako hlavní stránku pro anglický obsah s generickou hodnotu hreflang="en", raději než hreflang="en-us". Tímto zajistíte, že varianta bude relevantní pro anglicky mluvící uživatele po celém světě, zatímco UK a Australská varianta bude stále upřednostněna v příslušné lokalitě.

Je třeba uvádět jak stránku samotnou, tak její přeložené varianty

Atribut hreflang musíme nastavit vždy jak pro jazyk a cílový region stránky samotné, tak pro všechny její jazykové varianty.

Takže stránka https://www.stranka.com/ z předchozího příkladu má tyto varianty: https://www.priklad.com/ca/ a https://www.priklad.com/uk/.

Kevin Indig
Kevin Indig

Častou chybou, kterou vídám u hreflangu je nedodržování pokynů Googlu (zejména mít kód stát + jazyk, např. “de-de” místo prostého “de”) a zapomínání na hreflang atribut odkazující sám na sebe.

Obousměrné odkazy v atributu hreflang

Každý atribut hreflang musí mít svůj protějšek. To znamená, že každá varianta stránky musí odkazovat na všechny ostatní varianty.

Správná definice jazyka a regionálních variant

Hodnota atributu hreflang definuje jazyk (kódy ISO 639-1) a případně i cílovou oblast (kódy ISO 3166-1 Alpha 2) pro dané URL.

David Iwanow
David Iwanow

Důkladně zkontrolujte jazykové kódy, jako například be, který je určen pro Bělorusko, nikoliv pro Belgii. Belgie může mít buď nl-be pro holandsky mluvící část nebo fr-be pro francouzsky mluvící část. A prosím přestaňte uvádět en-uk pro Velkou Británii, je to en-gb!

Vždy musíte definovat nejdřív jazyk a pak oblast. Pokud byste přehodili pořadí, vyhledávače váš atribut nepochopí.

Není možné definovat pouze oblast a nedefinovat jazyk. Následující kód je neplatný a NEMĚL by se používat:
<link rel="alternate" hreflang="us" href="https://www.priklad.com/" />

Nezapomeňte nastavit hreflang=”x-default”

Vždycky byste měli nastavit, která varianta je záložní. Slouží k tomu hreflang=”x-default”.

V předchozím příkladu vidíme:

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

Znamená to, že https://www.priklad.com/ je základní varianta pro všechny uživatele mimo Kanadu a Velkou Británii.

Hreflang atribut a kanonické URL se musí shodovat

Atribut hreflang nenahrazuje kanonické URL. Je třeba nastavit obojí. Například:

<link rel="canonical" href="http://www.priklad.com/" /> <link rel="alternate" href="https://www.priklad.com/" hreflang="en-us" /> <link rel="alternate" href="https://www.priklad.com/ca/" hreflang="en-ca" />

Kanadská stránka (https://www.example.com/ca/) je v tomto případě alternativní variantou dané stránky. Pokud bychom se podívali do kódu této varianty, našli bychom:

<link rel="canonical" href="http://www.priklad.com/ca/" /> <link rel="alternate" hreflang="en-ca" href="https://www.priklad.com/ca/" /> <link rel="alternate" hreflang="en-us" href="https://www.priklad.com/" />

Pokud kanonické URL vede na nějakou jinou stránku hreflang atribut se podle toho MUSÍ přizpůsobit. Takže když je například stránka https://www.priklad.com/domu alternativní variantou pro https://www.priklad.com/, na stránce https://www.priklad.com/domu bude:

<link rel="canonical" href="http://www.priklad.com/" /> <link rel="alternate" hreflang="en-us" href="https://www.priklad.com/" /> <link rel="alternate" hreflang="en-ca" href="https://www.priklad.com/ca/" /> <link rel="alternate" hreflang="en-gb" href="https://www.priklad.com/uk/" />

Každá ze stránek https://www.priklad.com/ca/ a https://www.priklad.com/uk/ by pak měla obsahovat <link rel="alternate" href="https://www.priklad.com/" hreflang="en-us" />.

Shrnutí: nekanonické URL (v našem příkladu /domu) se nikdy v hreflang atributu neuvádí.

Při definování hreflang atributu používejte absolutní URL

I když to není proti žádným pravidlům, obecně platí, že by se u hreflang atributu neměla používat relativní URL. Vyhledávače je někdy špatně interpretují. Totéž platí i pro další použití link tagu: kanonické URL, stránkování, AMP a atribut rel=”alternate” mobile.

Nepřekládejte, lokalizujte

Pokud web existuje ve více jazykových verzích, nemělo by jít pouze o překaldy originálu. Měli byste svým uživatelům nabídnout plně lokalizované verze (je třeba lokalizovat kulturní refernce, měnu, časová pásma, zkrátka všechno, co by mělo být lokalizované).

Barry Adams
Barry Adams

Je důležité si uvědomit, že hreflang atribut, stejně jako kanonizace, je silným signálem, ne však direktivou. Google je známý tím, že ignoruje hreflang, pokud se domnívá, že je jeho implementace nesprávná. Hreflang totiž není určen k tomu, aby sloužil jako zkratka - správné mezinárodní cílení vyžaduje velkou snahu i v tom, jak strukturujete svůj web a jak moc je obsah vašeho webu lokalizován. Nesnažte se to tedy uspěchat, protože to prostě nebude odměněno dobrým umístěním ani návštěvností.

Použijte pouze jednu metodu implementace hreflang atributu

Definujte hreflang pouze skrze jednu metodu. Například tedy nekombinujte implementování v HTML a souboru sitemap XML. Tato kombinace může snadno vysílat protichůdné signály v momentě, kdy uděláte chybu nebo je zde nějaký bug.

Hreflang atribut nezabraňuje duplicitnímu obsahu

Je častým omylem, že hreflang atribut zabrání duplicitnímu obsahu. Pokud cílíte angličtinou na britské, americké a kanadské publikum a je to se stejným obsahem, tak ani správná implementace hreflang atributu nezaručí, že jej vyhledávače nebudou považovat za duplicitní obsah.

Často uvidíte, že vyhledávače budou konsolidovat kopie stránek.

Co s tím můžete dělat? Přepište daný obsah. A zaměřte se přitom na výběr rozdílných slov (personalizujte jej například pro americký trh a pro britský trh) a lokalizujte, jak jsme zmínili v předchozí části.

Často kladené otázky ohledně atributu hreflang

  1. Proč vyhledávače ignorují atribut hreflang?
  2. Mohu použít na jedné stránce více atributů hreflang?
  3. Má nějaký význam přidat hreflang, pokud je můj obsah dostupný pouze v jednom jazyce?

1. Proč vyhledávače ignorují atribut hreflang?

Hreflang atribut je spíše signál než direktiva. Vyhledávače nemají žádnou povinnost se jím řídit, ale obvykle to dělají.

2. Mohu použít na jedné stránce více atributů hreflang?

V případě, že je stránka určená pro více zemí nebo regionů, pak můžete samozřejmě použít více atributů hreflang najednou. Pokud máte například stránku v němčině, která je určená jak pro Německo, tak pro Rakousko, její kód bude:

<link rel="alternate" hreflang="de-de" href="https://www.priklad.de/" /> <link rel="alternate" hreflang="de-at" href="https://www.priklad.de/" />

Pro německé uživatele použijte obecný hreflang atribut:

<link rel="alternate" hreflang="de" href="https://www.priklad.de/" />

Má nějaký význam přidat hreflang, pokud je můj obsah dostupný pouze v jednom jazyce?

Nemá, hreflang atribut je určen pouze pro stránky, které mají alternativní verze cílené pro různá publika.

Vyhledávače umí sami poměrně dobře rozeznat, jaké je vaše zamýšlené publikum. Z hlediska SEO tak zde není žádný přínos, pokud jej přidáte. Pokud nechcete riskovat, tak můžete definovat preferované publikum v Google Search Console.

Další zdroje informací ohledně hreflang atributu

Pokud se chcete o hreflang atributu dozvědět více, podívejte se na:

  1. Návod Googlu

Získejte zkušební verzi na 14 dní zdarma

Začněte během 20 vteřin

Vložte platnou doménu, prosím (www.priklad.cz).
  • Platební karta není potřeba
  • Není třeba žádná instalace
  • Bez závazků