Chcąc zgłębić temat atrybutów hreflang, polecamy zapoznać się z filmikiem przygotowanym przez Google, na którym Maile Ohye przestawia najważniejsze kwestie, problemy i wątpliwości związane ze stosowaniem i implementacją tego znacznika.
Implementacja atrybutów hreflang na stronie internetowej
Google rekomenduje 3 sposoby wdrożenia hreflangów, a mianowicie:
- W sekcji head kodu strony,
- W nagłówku HTTP,
- Za pomocą mapy XML.
Dodatkowo można spróbować zaimplementować atrybuty przez Google Tag Managera. Ta metoda polecana jest tylko tym właścicielom witryn, którzy mają problem z wprowadzaniem zmian „informatycznych” na stronie. Dodawanie hreflangu przez GTM odbywa się poprzez zastosowanie JavaScriptu, z którego interpretacją Google nie zawsze poradzi sobie od razu.
Implementacja hreflangów w sekcji head
W sekcji head strony należy dodać atrybuty hreflang odnoszące się do wszystkich podstron, które posiadają inne wersje językowe. Poprawna składnia pojedynczego znacznika wygląda następująco:
<link rel=”alternate” hreflang=”kod-języka-regionu” href=”adres URL” />
- Kod języka, opcjonalnie kod regionu – oznaczenia muszą być zgodne z formatem ISO 639-1 oraz ISO 3166-1 Alpha 2 (poniżej omówimy szczegółowe wytyczne).
- Adres URL – pełny adres podstrony w innej wersji językowej.
Hreflangi należy dodać w nagłówku strony przed skryptami, które mogłyby spowodować przedwczesne zamknięcie sekcji <head>, takimi jak <p> czy piksel śledzący.
Przykład:
Serwis działa na rynku polskim, brytyjskim oraz austriackim. Poprawnie wdrożone hreflangi będą wyglądały następująco:
<head>
<link rel=”alternate” hreflang=”pl” href=”https://strona.pl” />
<link rel=”alternate” hreflang=”en-gb” href=”https://strona.pl/en” />
<link rel=”alternate” hreflang=”de-at” href=”https://strona.pl/de” />
</head>
Implementacja atrybutów hreflang w nagłówku HTTP
Atrybuty hreflang można wprowadzić w nagłówku HTTP. Ta metoda polecana jest w przypadku podstron, które nie są plikami HTML, a np. mają postać PDF-ów.
Hreflangi w nagłówku tworzy się następująco:
Link: <url-1>; rel=”alternate”; hreflang=”kod-języka-regionu-1”, <url-2>; rel=”alternate”; hreflang=”kod-języka-regionu-2” itd.
- Kod języka, opcjonalnie kod regionu – oznaczenia muszą być zgodne z formatem ISO 639-1 oraz ISO 3166-1 Alpha 2 (poniżej omówimy szczegółowe wytyczne).
- Adres URL – pełny adres podstrony w innej wersji językowej.
Każda wersja strony musi mieć taki sam zestaw nagłówków. Pamiętajmy, aby kolejne parametry oddzielać od siebie przecinkami. Należy również uwzględnić parametr odsyłający do bieżącej strony.
Przykład:
Plik PDF został przygotowany w wersji polskiej, brytyjskiej i austriackiej. Nagłówek HTTP wygląda następująco
Link:
<https://strona.pl/pdf>; rel=”alternate”; hreflang=”pl”,
<https://strona.pl/pdfen>; rel=”alternate”; hreflang=”en-gb”,
<https://strona.pl/pdfde>; rel=”alternate”; hreflang=”de-at”
Implementacja znaczników hreflang w mapie witryny
Wersje językowe strony można wskazać wyszukiwarce w mapie XML serwisu internetowego. Robi się to za pomocą znacznika <loc> określający URL z wersjami językowymi. Następnie każdą podstronę opisuje się znacznikami <xhtml:link> określającymi języki i regiony.
Wzór znaczników dla podstrony w dwóch wersjach językowych:
<url>
<loc>url-1</loc>
<xhtml:link rel=”alternate” hreflang=”kod-języka-regionu-1″ href=”url-1″ />
<xhtml:link rel=”alternate” hreflang=”kod-języka-regionu-2″ href=”url-2″ />
</url>
<url>
<loc>url-2</loc>
<xhtml:link rel=”alternate” hreflang=”kod-języka-regionu-1″ href=”url-1″ />
<xhtml:link rel=”alternate” hreflang=”kod-języka-regionu-2″ href=”url-2″ />
</url>
Przykład:
<url>
<loc>http://strona.pl</loc>
<xhtml:link rel=”alternate” hreflang=”pl” href=”http://strona.pl” />
<xhtml:link rel=”alternate” hreflang=”en” href=”http://strona.pl/en” />
<xhtml:link rel=”alternate” hreflang=”de” href=”http://strona.pl/de” />
</url>
<url>
<loc>http://strona.pl/en</loc>
<xhtml:link rel=”alternate” hreflang=”pl” href=”http://strona.pl” />
<xhtml:link rel=”alternate” hreflang=”en” href=”http://strona.pl/en” />
<xhtml:link rel=”alternate” hreflang=”de” href=”http://strona.pl/de” />
</url>
<url>
<loc>http://strona.pl/de</loc>
<xhtml:link rel=”alternate” hreflang=”pl” href=”http://strona.pl” />
<xhtml:link rel=”alternate” hreflang=”en” href=”http://strona.pl/en” />
<xhtml:link rel=”alternate” hreflang=”de” href=”http://strona.pl/de” />
</url>
Szczegółowe wytyczne dot. implementacji hreflangów znajdują się w supporcie Google: https://support.google.com/webmasters/answer/189077.
Ogólne wytyczne dotyczące implementacji hreflangów za pomocą wszystkich powyższych metod
- Wszystkie wersje językowe podstron muszą uwzględniać siebie i pozostałe wersje językowe,
- Należy wpisać pełny adres URL podstrony z protokołem HTTPS lub HTTP oraz ze slashem lub bez,
- Można podawać adresu URL subdomen, jeśli na nich znajdują się inne wersje językowe strony,
- Jeśli posiadamy regionalizację językową dla niektórych rynków, a dla innych nie, warto stworzyć jeden adres URL typu catch-all dla klientów z tych „nieokreślonych” wersjami językowymi lokalizacji,
- Jeśli dwie podstrony będące odpowiednikami wersji językowych nie wskazują w hreflangach do siebie nawzajem, atrybuty zostaną zignorowane przez Google. To zabezpieczenie, aby obce witryny nie odwoływały się do naszej strony.
- Użytkowników, dla których nie ma odpowiedniego języka na stronie, trzeba odesłać do wersji przygotowanej w języku angielskim, czyli najbardziej popularnym. Warto w tym celu używać atrybutu z wartością x-default, za pomocą którego wskazuje się stronę nieposiadającą swoich wersji językowych.
*Wartość x-default
Wartość x-default stosuje się w atrybucie hreflang wtedy, gdy żadna wersja językowa nie odpowiada danej podstronie. Taka sytuacja ma miejsce w przypadku stron głównych, na których dopiero można wybrać odpowiadającą nam wersję językową serwisu. X-default nie jest obligatoryjnym znacznikiem, jednak Google rekomenduje jego stosowanie.
Przykład:
<link rel=”alternate” href=”https://strona.pl” hreflang=”x-default” />
Najlepiej kierować użytkowników, dla których nie mamy przygotowanej wersji językowej, na wersję w języku angielskim, np.:
<link rel=”alternate” href=”https://strona.pl/en” hreflang=”x-default” />
Kody języków i regionów, które można stosować w hreflangach
Jak już wspomnieliśmy wyżej, określając kod języka należy skorzystać z formatu ISO 639-1, natomiast definiując kod regionu posługujemy się formatem ISO 3166-1 Alfa 2.
Przykład:
- en: strony dedykowane osobom posłującym się językiem angielskim bez względu na region,
- en-gb: podstrony dla użytkowników z Wielkiej Brytanii,
- en-au: podstrony dla internautów z Australii.
Stosowanie oznaczenia regionu jest nieobowiązkowe, jednak jeśli strona jest przystosowana z myślą o użytkownikach z konkretnego kraju, warto to wskazać robotom Google. Nie należy jednak stosować samego kodu kraju, ponieważ wyszukiwarka automatycznie nie rozpozna na jego podstawie języka.
Najczęstsze problemy z hreflangami i programy do tworzenia oraz weryfikacji wersji językowych strony
Poprawne wdrożenie atrybutów hreflang nastręcza wiele trudności. Jeśli serwis jest rozbudowany, posiada wiele wersji językowych, można się pogubić, a wtedy o błąd już nie trudno. Polecamy korzystanie z programów pomagających w poprawnym wdrożeniu znaczników i wykrycie ewentualnych błędów.
- Raport Kierowanie międzynarodowe w Google Search Console: wszystkie problemy związane z atrybutami hreflang znajdziemy w zestawieniu przygotowanym przez samo Google,
- The hreflang Tags Generator Tool od Aleydy Solis – pomoże w przygotowaniu i zmodyfikowaniu atrybutów hreflang,
- Polylang – wtyczka do WordPressa pomagająca wdrożyć hreflangi w sekcji <head> strony,
- Hreflang Tags Testing Tool od Merkle SEO – pozwala na testowanie wdrożenia znaczników,
- Screaming Frog – wykryje wszystkie poprawnie i błędnie zaimplementowane hreflangi.
Do najczęściej popełnianych błędów podczas wdrażania hreflangów, które można wyeliminować za pomocą powyższych narzędzi, należą:
- Błędny kod języka/regionu,
- Brak atrybutu hreflang odsyłającego do danej strony,
- Brak wzajemnych hreflangów na różnych wersjach językowych strony,
- Oznaczanie adresów URL, które wywołują inną odpowiedź serwera niż kod 200,
- Niestosowanie hreflangów na domenach krajowych, zakończonych „regionalnym” rozszerzeniem (.de, .pl, .es itp.),
- Stosowanie przekierowań kanonicznych na odpowiadających sobie wersjach stron.
Wszystkie błędy i problemy z hreflangami najczęściej wynikają z braku wiedzy o ich poprawnej implementacji. Techniczne SEO nie jest łatwe, ale dzięki rozbudowanym supportom od Google i doświadczeniu specjalisty można spokojnie poradzić sobie z prawidłowym oznaczeniem wersji językowych serwisu.
Atrybuty hreflang czy inne rozwiązania?
Obawiając się atrybutów hreflang lub posiadając bardzo rozbudowane serwisu internetowe, można pokusić się o inne rozwiązanie – przygotowanie osobnych witryn dla każdego, obsługiwanego rynku. W tym przypadku ponosimy koszty utrzymania kilku domen, musimy uważać na duplikację treści, ale odpada nam z pewnością problem hreflangów. Decyzja należy do Ciebie!