Nieważne, czy prowadzisz bloga, sklep internetowy czy stronę internetową firmy – międzynarodowe grono odbiorców jest w stanie otworzyć przed Tobą wiele drzwi do rozwoju biznesu. Odniesienie sukcesu w działaniach multiregionalnych w dużej mierze zależy od prawidłowego użycia tagów hreflang – atrybutów HTML zawierających informacje o językach i ukierunkowaniu geograficznym Twoich treści. Jeśli nigdy nie miało się z nimi do czynienia, mogą być trudne do natychmiastowego pojęcia. Istnieją jednak metody, aby dopilnować, że atrybuty hreflang są właściwie wykorzystane. Jeżeli po ich wdrożeniu nie jesteśmy pewni co do ich poprawności, możemy wykorzystać narzędzia, które opiszemy w dalszej części artykułu.
Czym są tagi hreflang?
Tagi hreflang (atrybuty hreflang) to podstawowe elementy języka HTML wskazujące wyszukiwarkom internetowym języki i regiony geograficzne, do których kierowana jest dana witryna. Tagi hreflang odgrywają ważną rolę w procesie przedstawiania użytkownikom najistotniejszych dla nich treści pod względem preferencji językowych i lokalizacyjnych. Można porównać je do drogowskazów dla wyszukiwarek, które informują je o odpowiednim dla danego odbiorcy wariancie strony.
Poprawna struktura i wdrożenie tagów hreflang są kluczowe w przypadku stron kierowanych do międzynarodowego odbiorcy lub też tych, które chcą poszerzyć grono swoich użytkowników o zróżnicowane regiony.
Jak ustrukturyzowane są atrybuty hreflang?
Tagi hreflang mają prostą i regularną składnię, jak widać poniżej:
<link rel=”alternate” hreflang=”język*” href=”https://example.com/alternatywna-wersja-strony”/>
* fragment „język” jest zastąpiony przez kod języka, taki jak np. „en” dla angielskiego czy „pl” dla polskiego.
Poniżej znajduje się wyjaśnienie poszczególnych elementów kodu:
link rel=”alternate”: oznacza to, że linkowana strona jest alternatywną wersją strony bieżącej.
hreflang=”language”: alternatywna wersja strony opiera się na innym języku treści, oznaczonym specjalnym kodem (en, de, pl itp.).
href=”https://example.com/alternatywna-wersja-strony”: odnośnik kieruje do miejsca, w którym istnieje alternatywna wersja strony.
Możliwe jest też skierowanie strony do mieszkańców konkretnego regionu lub kraju, jeśli doda się kod w formacie ISO 3166-1 alfa-2 (pełna lista). Zazwyczaj jednak jest to wskazane tylko wówczas, gdy zależy nam na dotarciu do użytkowników danego języka w jednym, konkretnym regionie. Dla przykładu:
Osoby anglojęzyczne w Wielkiej Brytanii:
<link rel=”alternate” hreflang=”en-gb” href=”https://strona.com/uk/”>
Osoby anglojęzyczne w Stanach Zjednoczonych:
<link rel=”alternate” hreflang=”en-us” href=”https://strona.com/us/”>
W tych przypadkach składnia to: „hreflang=”język-kraj”.
Kiedy i dlaczego powinno się dodawać kod regionalny? Rozważmy scenariusz, w którym prowadzimy sklep internetowy sprzedający pojedynczy produkt. Sklep ten obsługuje klientów zarówno w USA, jak i Wielkiej Brytanii. Różnica polega na tym, że klienci amerykańscy wolą płacić w dolarach, a brytyjscy – w funtach. Aby odpowiedzieć na to zapotrzebowanie, można stworzyć dwie identyczne strony produktowe z różnymi cenami. Aby wyszukiwarki miały tego świadomość, skorzystamy z tagów hreflang.
Prawidłowe zastosowanie tagów hreflang
Dlaczego dokładność w użyciu atrybutów hreflang jest tak ważna? Odpowiedź można ująć najkrócej w ten sposób: nie chcemy, by internauci zamknęli zakładkę z naszą stroną. Załóżmy, że prowadzimy globalną platformę e-commerce, za pośrednictwem której sprzedajemy produkty użytkownikom z różnych regionów, władającym różnymi językami. Niestety, ze względu na błąd tagu hreflang francuskojęzyczny internauta otrzymuje w odpowiedzi na swoje zapytanie rezultaty w języku niemieckim. Taka wpadka może zaszkodzić pozytywnemu doświadczeniu użytkownika i, być może, nieść za sobą spadek ruchu na stronie oraz utratę jakiejś części przychodu.
Dokładne wdrożenie atrybutów hreflang zapobiega takim problemom, ponieważ użytkownicy trafiają na najodpowiedniejszą dla siebie wersję strony. Poprawia to ich wrażenia z wizyty, wskaźnik konwersji i ogólne efekty działań technicznego SEO.
Wprowadzenie tagów hreflang to stosunkowo prosty proces. W dalszej części tekstu omówimy trzy metody osiągnięcia tego celu. Dla każdej z nich należy pamiętać jednak o kilku uniwersalnych kwestiach:
Dwukierunkowość tagów hreflang
Warto wiedzieć, że tagi hreflang operują w parach. Mówiąc prościej, gdy dodajemy tag hreflang do strony angielskiej, który będzie wskazywać wersję włoską, wówczas ta ostatnia powinna zawierać tag hreflang wskazujący na stronę angielską.
W ten sposób udowadniamy wyszukiwarkom, że mamy pod kontrolą obie wersje, które wzajemnie uznają swoje powiązanie.
Niepoprawna konfiguracja tagów lub nieokreślenie ich wzajemnej relacji może spowodować błędy takie jak nieprawidłowe wyświetlanie się strony, kilka różnych witryn w wynikach wyszukiwania lub niezgodność tytułu strony z adresem URL.
Tagi hreflang powinny odnosić się również do samych siebie
Według wytycznych Google „każda wersja językowa musi uwzględniać siebie oraz wszystkie inne wersje językowe”. Chodzi zwyczajnie o to, by na każdej wersji językowej strony znajdował się tag hreflang wskazujący na nią samą. Jeżeli na przykład zamierzamy powiązać tagami hreflang witrynę w języku angielskim (https://strona.com/) i w języku polskim (https://strona.com/pl), to obydwie wersje powinny zawierać w sobie te atrybuty:
<link rel=”alternate” hreflang=”pl” href=”https://strona.com/pl”/>
<link rel=”alternate” hreflang=”en” href=”https://strona.com/”/>
Pierwszy tag określa adres URL alternatywnej wersji polskiej, zaś poprzez drugi strona angielska odnosi się do siebie samej. Analogicznie wersja polska powinna zawierać oba atrybuty hreflang.
Tagi x-default są zalecane, ale nie obowiązkowe
Tag hreflang „x-default” określa domyślną lub „rezerwową” wersję strony, wyświetlaną użytkownikom, gdy żaden inny wariant językowy nie jest dostępny. Choć nie jest to konieczne, Google poleca zastosowanie tego tagu. Oto przykład:
<link rel=”alternate” hreflang=”x-default” href=”https://strona.com/”>
Tagi hreflang oparte są o najbliższe dopasowanie. Google zwraca tę wersję treści, którą, opierając się na różnych aspektach, uzna za najlepiej dopasowaną do użytkownika – m.in. na podstawie jego kraju i ustawień języka.
Dla przykładu, jeśli z Google korzysta anglojęzyczny użytkownik przebywający w Hiszpanii, wyszukiwarka najpierw stara się znaleźć dopasowanie zarówno pod względem języka, jak i kraju (np. en-es), a jeśli się to powiedzie, wyświetla witrynę. W przypadku niepowodzenia ignoruje kod kraju i prezentuje stronę z pasującym kodem języka (np. en-us). Jeśli i to będzie nieskuteczne, Google wybierze wersję x-default.
Jak zaimplementować tagi hreflang?
Istnieje kilka metod zastosowania atrybutów hreflang:
Z wykorzystaniem tagów kodu HTML strony
Jeśli atrybuty hreflang to dla Ciebie nowość, najłatwiej je zrozumieć, stosując podstawowe tagi kodu HTML. Opisane powyżej tagi hreflang należy umieścić w sekcji <head> strony internetowej.
Przykład:
Przypuśćmy, że niedawno uruchomiliśmy blog dostępny w kilku językach – w tym po niemiecku i hiszpańsku – i przetłumaczyliśmy na nie angielskie posty. Oto przykładowe adresy strony internetowej dla trzech wariantów językowych:
Angielski: https://strona.com/blog/blogpost/
Niemiecki: https://strona.com/blog/de/blogpost/
Hiszpański: https://strona.com/blog/es/blogpost/
Aby w takiej konfiguracji prawidłowo wdrożyć tagi hreflang, należy dodać następujący kod do sekcji <head> każdej ze stron:
<link rel=”alternate” hreflang=”en” href=”https://strona.com/>
<link rel=”alternate” hreflang=”de” href=”https://strona.com/de/>
<link rel=”alternate” hreflang=”es” href=”https://strona.com/es/>
Niestety, ta metoda może być nieco niewygodna i czasochłonna, szczególnie gdy dodaje się dużo wersji językowych.
Wdrożenie tagów hreflang poprzez nagłówki HTTP
Dla treści niebędących treściami HTML (jak PDF-y) umieszczenie tagów hreflang w sekcji <head> jest, rzecz jasna, niemożliwe. W takich sytuacjach można wykorzystać nagłówki HTTP określające język użyty w danym wariancie dokumentu. Metoda ta jest odpowiednia także dla zwykłych stron internetowych, jednak zazwyczaj stosuje się ją z innymi rodzajami treści.
Przykład:
Przypuśćmy, że chcemy przekonwertować każdą z wersji posta na bloga (angielską, hiszpańską i niemiecką) do formatu PDF. Oto jak powinny prezentować się nagłówki HTTP dla każdego pliku:
HTTP/1.1 200 OK
Content-Type: application/pdf
Link: <https://website.com/>; rel=”alternate”; hreflang=”x-default”,
<https://strona.com/blog/de/kostenlose-keyword-recherche-tools.pdf>; rel=”alternate”; hreflang=”de”,
<https://strona.com/blog/es/herramientas-gratuitas-para-buscar-keywords.pdf>; rel=”alternate”; hreflang=”es”,
<https://strona.com/blog/free-keyword-research-tools.pdf>; rel=”alternate”; hreflang=”en”
Wdrożenie hreflang w mapie strony w formacie XML
Mapy stron są w stanie stosować znaczniki określające atrybuty hreflang dla strony oraz jej różnych wariantów dzięki atrybutowi xhtml:link.
Przykład:
Korzystając z poprzedniego scenariusza (trzy warianty posta o darmowych narzędziach do słów kluczowych w HTML), prześledźmy wykorzystanie znaczników w mapie strony:
<url>
<loc>https://strona.com/blog/free-keyword-research-tools/</loc>
<xhtml:link rel=”alternate” hreflang=”x-default” href=”https://strona.com/blog/free-keyword-research-tools/”/>
<xhtml:link rel=”alternate” hreflang=”en” href=”https://strona.com/blog/free-keyword-research-tools/”/>
<xhtml:link rel=”alternate” hreflang=”de” href=”https://strona.com/blog/de/kostenlose-keyword-recherche-tools/”/>
<xhtml:link rel=”alternate” hreflang=”es” href=”https://strona.com/blog/es/herramientas-gratuitas-para-buscar-keywords/”/
</url>
Jeśli korzystasz z popularnego systemu CMS (jak WordPress lub WooCommerce), możesz przebierać we wtyczkach pomagających we wdrożeniu atrybutów hreflang (po podstawowej konfiguracji w interfejsie). Należy jednak, jak zwykle, mieć na uwadze możliwość wystąpienia błędów implementacji.
Częste błędy implementacji hreflang
Zanim przyjrzymy się bliżej roli narzędzi do walidacji hreflang, przeanalizujmy niektóre z najczęstszych błędów mogących pojawić się podczas wdrożenia atrybutów hreflang:
- Brakujące lub niekompletne tagi: do najczęstszych błędów należy pomijanie tagów hreflang na stronach witryny lub ich niekompletność.
- Niepoprawne kody języka lub regionu: tagi hreflang opierają się na kodach języka i regionu (np. en-us dla amerykańskiej odmiany języka angielskiego). Błędy w tym zakresie mogą sprawić, że wyszukiwarki nieprawidłowo zinterpretują zawartość danej strony.
- Niedopasowana zawartość: w niektórych przypadkach treści zawarte w regionalnych wariantach danej strony nie odpowiadają sobie, co może być dla użytkownika niepożądane.
- Tagi noindex: jeżeli strona zawierająca atrybuty hreflang ma także tag „noindex”, wyszukiwarki mogą zignorować adnotację dotyczącą hreflang.
- Błędy mapy strony XML: przy wykorzystaniu map strony w formacie XML w kontekście atrybutów hreflang potencjalne błędy mapy lub brak prawidłowych odniesień mogą przeszkodzić w skutecznej implementacji.
Walidatory hreflang (hreflang checker) – gwarancja precyzji
Walidatory hreflang to wyspecjalizowane narzędzia stworzone do weryfikacji wdrożenia tagów hreflang, identyfikowania błędów i zapewnienia prawidłowej prezentacji treści użytkownikom. Odgrywają istotną rolę w „arsenale” technicznego SEO webmasterów i marketerów, wspomagając ich w budowaniu i utrzymaniu międzynarodowej obecności w sieci. Istnieje wiele darmowych narzędzi SEO typu hreflang checker udostępniających opcję walidacji tagów hreflang. To m.in. Merkle’s hreflang validator, wtyczka Hreflang Tag Checker do przeglądarki Chrome czy wyjątkowo popularny wśród SEO-wców Screaming Frog SEO Spider.
Rola walidatorów hreflang
Narzędzia do walidacji hreflang „strzegą” odpowiedniego wdrożenia atrybutów, informując o wykrytych błędach i wskazując konieczne poprawki. Pełnią one kilka funkcji:
- Weryfikacja składni: walidatory hreflang pilnują poprawnej struktury i składni tagów hreflang, pomagając wyeliminować błędy w postaci brakujących atrybutów lub nieprawidłowego formatowania.
- Weryfikacja języka i regionu: narzędzie weryfikuje, czy kody języka i regionu są poprawne oraz odpowiadają docelowej grupie odbiorców.
- Spójność treści: walidatory potrafią także ocenić, czy treści zawarte w różnych wersjach językowych lub regionalnych witryny odpowiadają sobie nawzajem, tak aby doświadczenie użytkownika było jak najlepsze.
- Walidacja odniesień: narzędzia weryfikujące pomogą uzupełnić brakujące wzajemne odniesienia stron, co przyczyni się do właściwego wyświetlania treści przez wyszukiwarki.
- Weryfikacja map strony w formacie XML: w przypadku implementacji hreflang poprzez mapy strony XML walidatory sprawdzają poprawność odniesień i struktury.
- Identyfikacja błędów i raportowanie: narzędzia do weryfikacji hreflang mogą wygenerować raporty wskazujące na błędy i niespójności w implementacji atrybutów, tak aby webmasterzy mogli podjąć działania naprawcze.
Jak sprawdzić tagi hreflang przy użyciu narzędzia SEO Spider?
Skoro poznaliśmy już podstawy teoretyczne tagów hreflang oraz istotność ich właściwej implementacji, zajmijmy się praktycznym aspektem audytu hreflang przy użyciu narzędzia Screaming Frog SEO Spider. Pomaga ono webmasterom i SEO-wcom skutecznie dotrzeć do szczegółów implementacji hreflang. Poniższe kroki opisują, jak przeprowadzić audyt tagów hreflang przy użyciu narzędzia SEO Spider:
Konfiguracja:
Uruchom narzędzie SEO Spider.
- Przejdź do sekcji „Config > Spider > Crawl”.
- W obszarze „Crawl” wybierz „Store Hreflang”.
To ustawienie zagwarantuje, że linki podane w adnotacjach hreflang zostaną przeszukane i zaraportowane.
Indeksowanie hreflang w mapach strony XML
- Jeżeli do atrybutów hreflang Twoja witryna wykorzystuje mapy strony w formacie XML, w obszarze „Config > Spider > Crawl” wybierz: „Crawl Linked XML Sitemaps”.
- Walidacja map strony XML możliwa jest poprzez plik robots.txt lub udostępnienie miejsca docelowego dla mapy.
Ten etap można pominąć, jeśli hreflang implementowano poprzez elementy linkujące lub nagłówek HTTP. Radzimy jednak przeszukać mapę XML, aby zagwarantować jak największą wszechstronność danych.
Przeszukanie strony:
- Wprowadź adres URL strony internetowej, która ma być przeszukana, w oknie „Enter URL to spider”.
- Kliknij „Start”.
SEO Spider przeszuka stronę, odkrywając adnotacje hreflang rel=”alternate” w HTML, nagłówku HTTP lub mapach strony XML.
Wyświetlanie zakładki hreflang:
W zakładce „Hreflang” wyświetlone zostaną wszystkie znalezione linki, wraz z adnotacjami rel=”alternate”. Kolumna „Occurrences” zawiera informacje o liczbie adnotacji dla każdego pojedynczego linku.
Analiza względem filtrów hreflang:
Aby dotrzeć do poszczególnych filtrów hreflang, uruchom analizę. Krok ten jest konieczny dla niektórych filtrów, takich jak „unlinked hreflang URLs”. Kliknij „Crawl Analysis > Start”, aby wypełnić filtry.
Jeśli analizę skonfigurowano wcześniej, upewnij się, że w obszarze „Crawl Analysis > Configure” zaznaczono „Hreflang”, tak aby dostęp był łatwiejszy.
Przejrzenie wypełnionych filtrów hreflang:
Po przeprowadzeniu analizy wszystkie filtry hreflang zostaną wypełnione odpowiednimi danymi. Pozwolą one ocenić implementację:
Contains Hreflang
- Non-200 Hreflang URLs
- Unlinked Hreflang URLs
- Missing Return Links
- Inconsistent Language & Region Return Links
- Non-Canonical Return Links
- Noindex Return Links
- Incorrect Language & Region Codes
- Multiple Entries
- Missing Self Reference
- Not Using Canonical
- Missing X-Default
Szczegółowa analiza dzięki zakładce „URL Info”:
Zakładka „URL Info” znajdująca się u dołu zawiera szczegółowe informacje na temat napotkanych błędów hreflang. Znajdziemy tam np. „hreflang confirmation status” dla stron alternatywnych, co może okazać się przydatne.
Zbiorczy eksport błędów:
Aby wyeksportować szczegóły stron źródłowych zawierających błędy lub niedopatrzenia hreflang, skorzystaj z opcji „Reports > Hreflang”. Eksporty będą zawierać informacje na temat źródłowych adresów URL i problematycznych linków hreflang.
Podsumowanie
W dziedzinie wielojęzycznego SEO tagi hreflang są istotnymi sposobami na dotarcie do różnorodnych grup odbiorców, nie przyczyniając się przy tym do ich dezorientacji, za to wpasowując się w preferencje wyszukiwarek. Prawidłowa implementacja atrybutów hreflang potrafi znacząco poprawić doświadczenie użytkowników, zwiększyć konwersję i wzmocnić pozycjonowanie witryny.
Walidatory hreflang, takie jak narzędzie Screaming Frog SEO Spider, odgrywają niezastąpioną rolę w wysiłkach na rzecz poprawnego wdrożenia tych atrybutów. Skrupulatna weryfikacja tagów hreflang i poprawienie ewentualnych błędów pozwala webmasterom i marketerom bez kompleksów działać na polu międzynarodowego SEO.
Na podlegającym ciągłym zmianom rynku cyfrowym tagi hreflang i ich walidatory są gwarantem tego, że Twoje treści dotrą tam, gdzie powinny.
