Zarejestruj się do bezpłatnej platformy e-learningowej.
Zarejestruj się bezpłatnieSpis Treści
Hreflang służy do wskazania wyszukiwarkom internetowym, że dany serwis lub dana podstrona posiada różne wersje językowe kierowane do odbiorców posługujących się innymi językami albo pochodzącymi z różnych regionów (j. angielski dla Wielkiej Brytanii a j. angielski dla USA).
Jak to wygląda w praktyce? Użytkownik wpisuje do wyszukiwarki interesującą go frazę. Następnie Google sprawdza, jakie są jego preferencje językowe internauty i przeszukuje swój indeks, dopasowuje strony do zapytania, zwracając uwagę na atrybuty hreflang. Wyszukiwarka prezentuje wyniki wyszukiwania, a użytkownik przegląda strony dopasowane tematycznie i językowo do frazy.
W supporcie Google znajdziemy przykłady 3 sytuacji, w przypadku których zaleca się wdrożenie hreflangów:
Największa korzyść związana z wdrożeniem hreflangów na stronie to uniknięcie duplikacji treści. Jeśli działamy na różnych rynkach, na których użytkownicy posługują się tym samym językiem, a różnice w treściach są marginalne, wyszukiwarka mogłaby ocenić je jako duplicate content. Dzięki atrybutom hreflang eliminujemy takie ryzyko. Dodatkowo może zmniejszyć się współczynnik odrzuceń w Google Analytics, ponieważ użytkownik zostanie przekierowany na odpowiednią dla niego wersją serwisu.
W HTML-u znajdziemy taki znacznik jak lang, określający język tworzonego dokumentu, czyli np. strony internetowej. Atrybut ten nie jest jednak interpretowany przez Google, na co zwracał uwagę jakiś czas temu John Mueller (opisaliśmy temat lang HTML w osobnym wpisie). By oznaczyć wersję językową, należy wdrożyć hreflang.
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.Google rekomenduje 3 sposoby wdrożenia hreflangów, a mianowicie:
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.
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” />
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>
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.
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”
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.
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” />
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:
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.
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.
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żą:
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.
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!