Co to jest hreflang i jak poprawnie go zastosować?

Izabela Michalska

5 grudnia, 2022

Przeczytasz w ~ 5 min.

Co to jest hreflang i jak poprawnie go zastosować

W pogoni za sukcesem w branży e-commerce, sklepy internetowe coraz częściej i chętniej decydują się na rozszerzenie działalności na zagraniczne rynki. Aby dostosować witrynę do potrzeb, oczekiwań i przyzwyczajeń konsumentów z innych krajów, konieczne jest stworzenie alternatywnych wersji strony dla odbiorców posługujących się wyłącznie swoimi rodzimymi językami. Przydatny okaże się przy tym atrybut hreflang. Co to takiego i o czym należy pamiętać przy jego wdrażaniu? Dowiedz się w dalszej części artykułu.

Definicja: atrybut hreflang

Hreflang to atrybut w HTML, którym określa się język i kierowanie geograficzne strony internetowej. Warto go zastosować, gdy Twoja witryna występuje w kilku wersjach przygotowanych pod różne kraje.

Hreflang informuje wyszukiwarkę Google o różnych odmianach strony, a to z kolei ułatwia algorytmom skierowanie danego użytkownika na odpowiednią wersję językową lub regionalną (witryna w języku angielskim stworzona dla mieszkańca Wielkiej Brytanii może wyglądać inaczej niż ta sama strona dopasowana do potrzeb użytkowników anglojęzycznych z USA).

Dlaczego warto wdrażać hreflangi?

Implementacja hreflangs w Twojej witrynie może być środkiem do osiągnięcia długofalowych celów, takich jak:

Dotarcie do większej ilości odbiorców w różnych krajach, a co za tym idzie, zwiększenie konwersji.
Dopasowanie treści do regionu i języka użytkowników, co ułatwia klientom zagranicznym skorzystanie z Twojej oferty.
Budowanie silnej i złożonej strategii optymalizacji Twojej witryny pod wyszukiwarki.
Jeszcze lepsze doświadczenie użytkownika, dzięki dostosowaniu witryny do jego potrzeb.

Budowa atrybutu hreflang – tag

Składnia tagu z atrybutem hreflang wygląda następująco:

Dwuliterową wartość atrybutu podaje się wedle nomenklatury ISO 639-1. Dodatkowo możesz dodać też kod kraju zgodny z ISO 3166-1 alfa 2.

Przykład dla języka angielskiego i regionu Wielka Brytania:

Co na to Google?

Centrum informacyjne Google wskazuje trzy przykładowe sytuacje, w których warto stosować hreflangs. Są to sytuacje, gdy:

tłumaczony jest jedynie szablon Twojej strony, czyli elementy takie jak nawigacja czy stopka (to zdarza się często w przypadku portali społecznościowych);
zawartość prezentowana w Twojej witrynie wykazuje nieznacznie różnice regionalne w obrębie jednego języka (np. w treści występuje słownictwo typowe dla danego regionu, ale reszta jest zbliżona i może zostać uznana za duplikat);
treść strony w całości przetłumaczona jest na wiele języków.

Jak dodać atrybut rel=”alternate” hreflang?

Poprawna implementacja hreflangów zmniejsza współczynnik odrzuceń. Co więcej, uniknięcie zjawiska duplikacji treści może wpłynąć na lepszą pozycję Twojej witryny w wynikach wyszukiwania. Warto zatem przeprowadzić ją poprawnie. Możesz to zrobić na trzy sposoby:

W sekcji <head>

Implementację hreflangów do sekcji head strony należy przeprowadzić na wszystkich podstronach, które posiadają inne wersje językowe. Co więcej, trzeba dodać je przed skryptami, które mogłyby przedwcześnie zamknąć sekcję.

Budowa takiego znacznika prezentuje się następująco:

Wedle tego wzoru przykładowa strona działająca na rynku rodzimym, brytyjskim oraz francuskim powinna posiadać następujące hreflangs:

<head>

</head>

W nagłówku http

Wprowadzenie hreflangs w nagłówku http to rozwiązanie rekomendowane w przypadku podstron, które nie są plikami HTML. W takiej sytuacji każda wersja witryny musi mieć taki sam układ nagłówków. Pamiętaj o oddzieleniu parametrów przecinkami.

Link:

<url-1>; rel=”alternate”; hreflang=”kod-języka-regionu-1”,

<url-2>; rel=”alternate”; hreflang=”kod-języka-regionu-2”…

Dla Twojej strony występującej w wersji polskiej, brytyjskiej i francuskiej nagłówek będzie prezentował się następująco:

Link:

<http://twoja-strona.pl>; rel=”alternate”; hreflang=”pl”,

<http://twoja-strona.pl/en>; rel=”alternate”; hreflang=”en”,

<http://twoja-strona.pl/fr>; rel=”alternate”; hreflang=”fr”.

Przez sitemapę XML

Inne wersje językowe strony możesz wskazać wyszukiwarce Google również poprzez sitemapę XML. Wykonuje się to poprzez umieszczenie znacznika <loc> określającego URL z podstronami. Następnie każdą z nich opisuje się znacznikami <xhtml:link> wskazującymi języki oraz regiony.

Przykładowo:

<url>

<loc>http://twoja-strona.pl</loc>

<xhtml:link rel=”alternate” hreflang=”pl″ href=”http://twojastrona.pl″ />

<xhtml:link rel=”alternate” hreflang=”fr″ href=”http://twoja-strona.fr />

</url>

<url>

<loc>http://twoja-strona.pl/fr</loc>

<xhtml:link rel=”alternate” hreflang=”pl” ″ href=”http://twoja-strona.pl″ />

<xhtml:link rel=”alternate” hreflang=”fr″ href=”http://twoja-strona.pl/fr″ />

</url>

O tym musisz pamiętać dodając hreflangi

Hreflangi potrafią przysporzyć nieco kłopotów, jednak rozbudowane poradniki od Google i pomoc doświadczonego specjalisty SEO zwykle wystarczają, aby prawidłowo wprowadzić w kod strony odpowiednie atrybuty. Jeśli zabierasz się za wdrożenie tagów samodzielnie, upewnij się, że pamiętasz o kilku podstawowych zasadach:

Kod regionu nie może występować samodzielnie. Każdorazowo musi być poprzedzony przez oznaczenie kodu języka.
Wdrażając hreflangi zawsze musisz uwzględniać wszystkie wersje językowe. Strony powinny wskazywać na siebie wzajemnie.
Adresy URL muszą występować w pełnej formie i obejmować protokół http lub https.

Jak sprawdzić, czy hreflangs są wdrożone poprawnie?

Do weryfikacji, czy atrybuty na Twojej zostały wdrożone stronie prawidłowo, przydatny okaże się hreflang checker. Taką funkcję znajdziesz np. w Google Search Console lub w narzędziu Screaming Frog.

Wszystko jasne? W takim razie być może to Twój czas, aby zacząć podbijać zagraniczne rynki! Dopasuj się do potrzeb obcojęzycznego użytkownika i rozwijaj Twój biznes z dobrymi praktykami SEO.