Jeśli Twoja witryna jest dostępna w wielu językach lub jest skierowana do użytkowników z różnych krajów, musisz zrozumieć i prawidłowo wdrożyć atrybut hreflang. Ten przewodnik przeprowadzi Cię przez wszystko – od podstawowych koncepcji, przez implementację, aż po rozwiązywanie typowych problemów.
Hreflang to atrybut HTML, który informuje wyszukiwarki o języku i docelowym regionie danej strony. Dzięki temu Google i inne wyszukiwarki mogą wyświetlić użytkownikom najbardziej odpowiednią wersję językową lub regionalną Twojej strony.
Prawidłowe użycie hreflang ma kluczowe znaczenie dla SEO międzynarodowego. Bez niego użytkownicy z Francji mogliby zobaczyć angielską wersję Twojej strony, co prowadziłoby do frustracji, wysokiego współczynnika odrzuceń i utraty potencjalnych klientów.
Co gorsza, wyszukiwarki mogą potraktować podobne strony w różnych językach jako duplikaty, co negatywnie wpłynie na Twoje pozycje w wynikach wyszukiwania. Jednak hreflang to nie dyrektywa, a jedynie wskazówka dla wyszukiwarek – inne czynniki SEO mogą ją nadpisać.
Spis treści
- Czym są tagi hreflang?
- Jak wygląda tag hreflang?
- Dlaczego hreflang jest ważny dla SEO?
- Kiedy używać tagów hreflang?
- Kiedy NIE używać hreflang?
- Jak zaimplementować tagi hreflang?
- Podstawowe zasady implementacji hreflang
- Najczęstsze błędy przy implementacji hreflang
- Jak sprawdzić, czy hreflang działa poprawnie?
- Najlepsze praktyki dla hreflang
- Podsumowanie
- Najczęściej zadawane pytania (FAQ) o hreflang
1. Czym są tagi hreflang?
Tagi hreflang to atrybuty HTML umieszczane w sekcji <head> strony. Ich celem jest wskazanie wyszukiwarkom, która wersja strony jest przeznaczona dla użytkowników w danym języku i regionie.
Głównym problemem, który rozwiązują tagi hreflang, są duplikaty treści. Jeśli masz tę samą stronę przetłumaczoną na kilka języków, wyszukiwarki mogą uznać je za duplikaty, co osłabi ich pozycję w wynikach. Hreflang wyjaśnia, że są to alternatywne wersje dla różnych odbiorców, co pozwala uniknąć kar za duplikację.
Kolejną zaletą hreflang jest poprawa doświadczeń użytkownika. Gdy ktoś z Niemiec szuka Twojego produktu, pokażesz mu niemiecką wersję strony z cenami w euro, co zwiększa szansę na konwersję. To bezpośrednio przekłada się na niższy współczynnik odrzuceń i wyższe zaangażowanie.
2. Jak wygląda tag hreflang?
Podstawowa składnia tagu hreflang jest prosta:
html
<link rel="alternate" hreflang="język-kraj" href="URL_alternatywnej_strony" />
Rozłóżmy to na części:
rel="alternate"– określa, że link wskazuje alternatywną wersję bieżącej strony.hreflang="język-kraj"– wskazuje język i opcjonalnie region docelowej strony. Używa kodów ISO 639-1 dla języka i ISO 3166-1 Alpha 2 dla kraju.href="URL"– adres URL alternatywnej wersji strony.
Przykłady tagów hreflang
html
<!-- Strona w języku angielskim (bez określenia regionu) --> <link rel="alternate" hreflang="en" href="https://example.com/en/" /> <!-- Strona w języku angielskim dla użytkowników w USA --> <link rel="alternate" hreflang="en-us" href="https://example.com/us/" /> <!-- Strona w języku angielskim dla użytkowników w Wielkiej Brytanii --> <link rel="alternate" hreflang="en-gb" href="https://example.com/uk/" /> <!-- Strona w języku hiszpańskim dla użytkowników w Meksyku --> <link rel="alternate" hreflang="es-mx" href="https://example.com/mx/" /> <!-- Strona domyślna dla użytkowników, którzy nie pasują do żadnego z powyższych --> <link rel="alternate" hreflang="x-default" href="https://example.com/" />
3. Dlaczego hreflang jest ważny dla SEO?
Chociaż hreflang nie jest bezpośrednim czynnikiem rankingowym (nie wpływa na pozycję strony w sposób bezpośredni), ma ogromny wpływ na SEO międzynarodowe. Oto dlaczego:
3.1. Zapobieganie problemom z duplikatami treści
Kiedy masz kilka wersji tej samej strony w różnych językach, wyszukiwarki mogą uznać je za duplikaty. Hreflang mówi im: „To są alternatywne wersje dla różnych odbiorców, a nie duplikaty”. Dzięki temu wszystkie wersje mogą być indeksowane i wyświetlane w wynikach wyszukiwania.
3.2. Lepsze doświadczenie użytkownika (UX)
Użytkownicy oczekują treści w swoim języku. Jeśli ktoś z Hiszpanii trafi na angielską wersję Twojej strony, prawdopodobnie ją opuści. Hreflang zapewnia, że użytkownicy trafiają na wersję dostosowaną do ich języka i lokalizacji, co zwiększa zaangażowanie i konwersje.
3.3. Zwiększenie widoczności w międzynarodowych wynikach wyszukiwania
Dzięki hreflang wyszukiwarki mogą wyświetlać odpowiednią wersję Twojej strony w wynikach dla danego kraju. Jeśli masz stronę w języku niemieckim dla Niemiec, hreflang pomoże Google pokazać ją niemieckim użytkownikom, zamiast angielskiej wersji.
3.4. Wskazówki dla wyszukiwarek
Hreflang pomaga wyszukiwarkom zrozumieć strukturę Twojej witryny, zwłaszcza jeśli masz wiele wersji językowych na różnych domenach lub subdomenach.
4. Kiedy używać tagów hreflang?
Tagi hreflang są niezbędne w kilku sytuacjach:
- Całkowite tłumaczenie treści – gdy każda strona jest w pełni przetłumaczona na kilka języków.
- Warianty regionalne tego samego języka – gdy masz osobne wersje dla Wielkiej Brytanii (
en-gb), USA (en-us) i Australii (en-au). - Różne domeny dla różnych krajów – gdy używasz domen
.de,.fr,.plitp. - Strony z treściami generowanymi przez użytkowników – gdy szablon jest przetłumaczony, ale treść (np. na forum) jest w jednym języku.
5. Kiedy NIE używać hreflang?
- Gdy strona jest tylko w jednym języku i skierowana do jednego kraju.
- Gdy treść jest automatycznie tłumaczona bez oddzielnych adresów URL.
- Gdy masz tylko małe różnice w treści dla różnych miast w tym samym kraju (np. dane dostawy) – wtedy lepiej użyć ogólnego rozwiązania.
6. Jak zaimplementować tagi hreflang?
Istnieją trzy główne metody implementacji hreflang:
Metoda 1: Tagi HTML w sekcji <head>
To najprostsza i najczęściej używana metoda. Dodaj tagi <link> w sekcji <head> każdej strony.
html
<head>
<link rel="alternate" hreflang="en" href="https://example.com/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />
</head>
Wskazówki:
- Każda strona musi zawierać tagi dla wszystkich wersji językowych, w tym dla siebie (tzw. tag samoodnoszący).
- Używaj pełnych adresów URL (z
https://). - Ta metoda jest dobra dla małych i średnich stron, ale może być uciążliwa dla dużych witryn.
Metoda 2: Hreflang w mapie witryny XML
Dla dużych witryn z wieloma wersjami językowymi lepszym rozwiązaniem jest dodanie hreflang do mapy witryny XML.
xml
<?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://example.com/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://example.com/" />
<xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/" />
<xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" />
</url>
<url>
<loc>https://example.com/de/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://example.com/" />
<xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/" />
<xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" />
</url>
<!-- Powtórz dla każdej wersji językowej -->
</urlset>
Zalety:
- Centralizacja zarządzania – wszystkie tagi w jednym pliku.
- Brak dodatkowego kodu w HTML (szybsze ładowanie stron).
- Łatwiejsze utrzymanie dla dużych witryn.
Metoda 3: Hreflang w nagłówkach HTTP
Dla plików nie-HTML (np. PDF) można użyć nagłówków HTTP.
text
Link: <https://example.com/guide.pdf>; rel="alternate"; hreflang="en",
<https://example.com/de/guide.pdf>; rel="alternate"; hreflang="de",
<https://example.com/fr/guide.pdf>; rel="alternate"; hreflang="fr"
7. Podstawowe zasady implementacji hreflang
Aby hreflang działał poprawnie, musisz przestrzegać kilku kluczowych zasad:
7.1. Tagi dwukierunkowe (bidirectional)
Jeśli strona A wskazuje na stronę B jako wersję alternatywną, strona B musi wskazywać z powrotem na stronę A. To jak potwierdzenie znajomości na Facebooku – jeśli Ty kogoś dodajesz, on też musi Cię dodać.
html
<!-- Strona w języku angielskim --> <link rel="alternate" hreflang="en" href="https://example.com/" /> <link rel="alternate" hreflang="de" href="https://example.com/de/" /> <!-- Strona w języku niemieckim --> <link rel="alternate" hreflang="de" href="https://example.com/de/" /> <link rel="alternate" hreflang="en" href="https://example.com/" />
7.2. Tag samoodnoszący (self-referential)
Każda strona musi zawierać tag hreflang wskazujący na samą siebie. Choć niektórzy twierdzą, że to opcjonalne, Google zaleca tę praktykę.
html
<!-- Strona w języku angielskim --> <link rel="alternate" hreflang="en" href="https://example.com/" /> <!-- To jest tag samoodnoszący --> <link rel="alternate" hreflang="de" href="https://example.com/de/" />
7.3. Używaj poprawnych kodów językowych i regionalnych
Kody językowe (ISO 639-1): en, es, fr, de, itp.
Kody regionalne (ISO 3166-1 Alpha 2): US, GB, DE, FR, itp.
Połączenie: en-US, es-ES, fr-FR, de-DE.
Uwaga: Kod dla Wielkiej Brytanii to GB, nie UK.
7.4. Dodaj tag x-default
Tag x-default wskazuje domyślną wersję strony dla użytkowników, którzy nie pasują do żadnego z określonych języków/regionów. To strona, która powinna być wyświetlana, gdy nie można dopasować wersji.
html
<link rel="alternate" hreflang="x-default" href="https://example.com/" />
8. Najczęstsze błędy przy implementacji hreflang
Mimo pozornej prostoty, implementacja hreflang często sprawia problemy. Oto najczęstsze błędy, których należy unikać:
8.1. Brak tagów zwrotnych (return tags)
Problem: Strona A wskazuje na B, ale B nie wskazuje na A.
Rozwiązanie: Zawsze dodawaj tagi dwukierunkowe.
8.2. Błędne kody językowe lub regionalne
Problem: Użycie en-UK zamiast en-GB, lub es-LA dla Hiszpanii w Ameryce Łacińskiej.
Rozwiązanie: Sprawdź kody w oficjalnych standardach (ISO).
8.3. Brak tagu samoodnoszącego
Problem: Strona nie wskazuje na samą siebie.
Rozwiązanie: Dodaj tag hreflang, który wskazuje na bieżący URL.
8.4. Hreflang wskazujący na strony z kodem 3xx, 4xx lub 5xx
Problem: Tag hreflang prowadzi do strony, która przekierowuje (301/302), nie istnieje (404) lub zwraca błąd serwera (5xx).
Rozwiązanie: Sprawdź, czy wszystkie adresy URL w tagach hreflang zwracają kod 200 OK i prowadzą do żywych stron.
8.5. Hreflang a tag canonical
Problem: Tag canonical na stronie wskazuje na inny URL niż hreflang.
Rozwiązanie: Użyj kanonicznego URL (self-referential) na każdej wersji językowej. Tag hreflang powinien wskazywać na ten sam URL, co tag canonical.
8.6. Hreflang na stronach z noindex
Problem: Strona ma tag noindex, a jednocześnie jest wymieniona w hreflang.
Rozwiązanie: Hreflang i noindex są sprzeczne. Usuń noindex ze stron, które mają hreflang.
8.7. Brak tagu x-default
Problem: Nie określono domyślnej strony dla użytkowników z nieobsługiwanych regionów.
Rozwiązanie: Dodaj tag x-default wskazujący na ogólną wersję strony (np. w języku angielskim) lub na stronę wyboru języka.
8.8. Mieszanie metod implementacji
Problem: Używasz hreflang w HTML i jednocześnie w mapie witryny, ale wpisy są niespójne.
Rozwiązanie: Wybierz jedną metodę implementacji i trzymaj się jej konsekwentnie. Mieszanie metod może wprowadzić wyszukiwarki w błąd.
8.9. Hreflang wskazujący na wiele stron dla tego samego języka
Problem: Dwa różne tagi hreflang używają tego samego kodu języka dla różnych adresów URL.
Rozwiązanie: Upewnij się, że każdy kod języka/regionu wskazuje na jeden, konkretny adres URL.
8.10. Nieprawidłowa składnia tagu
Problem: Brak cudzysłowów, błędna kolejność atrybutów lub literówki.
Rozwiązanie: Używaj sprawdzonych generatorów tagów lub kopiuj sprawdzone przykłady.
9. Jak sprawdzić, czy hreflang działa poprawnie?
9.1. Google Search Console
W starej wersji Search Console (dostępnej z poziomu nowej) znajdziesz raport „Międzynarodowe kierowanie”. Pokaże on błędy w tagach hreflang, takie jak brak tagów zwrotnych czy nieprawidłowe kody.
9.2. Narzędzia do audytu SEO
- Ahrefs Site Audit – wykrywa problemy z hreflang i wizualizuje klastry.
- Screaming Frog – pozwala na szczegółową analizę tagów hreflang na całej stronie.
- Semrush Site Audit – oferuje raporty dotyczące błędów hreflang.
9.3. Specjalistyczne narzędzia do testowania hreflang
- Hreflang Checker od Weglot – szybko sprawdza, czy tagi są poprawnie zaimplementowane.
- Merkle’s Hreflang Tag Testing Tool – analizuje tagi na stronie.
- SISTRIX hreflang Validator – weryfikuje poprawność tagów.
9.4. Ręczna weryfikacja
Sprawdź, czy tagi hreflang pojawiają się w kodzie źródłowym strony (View Page Source). Upewnij się, że wszystkie wersje językowe są wymienione i że linki są obustronne.
9.5. Testowanie z użyciem VPN
Użyj VPN, aby symulować przeglądanie z różnych krajów i sprawdzić, czy wyświetlana jest odpowiednia wersja strony.
10. Najlepsze praktyki dla hreflang
- Używaj pełnych adresów URL – zawsze z
https://i domeną. - Dodawaj tag x-default – dla użytkowników z nieobsługiwanych regionów.
- Stosuj konsekwentną strukturę – wybierz jedną metodę implementacji (HTML, mapa witryny, nagłówki HTTP) i jej przestrzegaj.
- Regularnie audytuj – sprawdzaj tagi hreflang przy każdej większej zmianie w witrynie (dodanie nowego języka, zmiana URL).
- Unikaj sprzeczności z tagami canonical – tag canonical powinien wskazywać na ten sam URL, co tag hreflang (self-referential).
- Używaj poprawnych kodów – sprawdzaj kody językowe i regionalne w oficjalnych standardach.
- Monitoruj wydajność – śledź ruch z różnych krajów i sprawdzaj, czy użytkownicy trafiają na odpowiednie wersje stron.
- Automatyzuj tam, gdzie to możliwe – używaj generatorów hreflang i wtyczek do CMS, które automatyzują implementację.
- Testuj po każdej zmianie – zawsze weryfikuj, czy nowe tagi działają poprawnie.
- Pamiętaj o treści – hreflang to tylko wskazówka, ale treść musi być faktycznie przetłumaczona i dostosowana do lokalnego odbiorcy.
11. Podsumowanie
Tagi hreflang są niezbędnym elementem SEO międzynarodowego. Choć ich implementacja może być skomplikowana, korzyści płynące z prawidłowego ich użycia są ogromne – od poprawy doświadczeń użytkownika, przez uniknięcie problemów z duplikatami treści, po lepszą widoczność w międzynarodowych wynikach wyszukiwania.
Pamiętaj o kluczowych zasadach: tagi dwukierunkowe, tag samoodnoszący, poprawne kody, tag x-default i regularne audyty.
Zainwestuj czas w prawidłową implementację hreflang, a Twoja witryna zyska na widoczności i zaangażowaniu użytkowników na całym świecie.
12. Najczęściej zadawane pytania (FAQ) o hreflang
Czy hreflang wpływa bezpośrednio na ranking?
Nie, hreflang nie jest bezpośrednim czynnikiem rankingowym. Jednak pośrednio wpływa na SEO poprzez poprawę doświadczeń użytkownika, zmniejszenie współczynnika odrzuceń i zapobieganie problemom z duplikatami treści.
Czy zawsze potrzebuję hreflang, jeśli mam strony w kilku językach?
Tak, jeśli masz różne wersje językowe tej samej treści pod różnymi adresami URL, hreflang jest niezbędny, aby wyszukiwarki zrozumiały ich relacje.
Czy tagi hreflang muszą znajdować się na każdej stronie?
Tak, tagi hreflang powinny znajdować się na każdej stronie, która ma alternatywne wersje językowe lub regionalne, a nie tylko na stronie głównej.
Co to jest tag x-default?
x-default to specjalny tag hreflang, który wskazuje domyślną wersję strony dla użytkowników, których język lub region nie jest obsługiwany przez inne tagi.
Czy mogę używać hreflang z różnymi domenami?
Tak, tagi hreflang mogą wskazywać na strony na różnych domenach (np. example.com, example.de, example.fr).
Jak długo trwa, zanim Google zobaczy zmiany w tagach hreflang?
Zmiany w tagach hreflang mogą być widoczne w Google Search Console i wpływać na wyniki wyszukiwania w ciągu kilku dni do kilku tygodni, w zależności od częstotliwości indeksowania Twojej witryny.
Czy hreflang działa z Bingiem?
Bing obsługuje hreflang, ale traktuje go jako słabszy sygnał. Bing preferuje atrybut content-language w meta tagach.
Czy mogę użyć hreflang dla wariantów regionalnych tego samego języka?
Tak, na przykład en-US dla angielskiego w USA i en-GB dla angielskiego w Wielkiej Brytanii.
Czy tagi hreflang są case-sensitive?
Nie, ale zaleca się używanie małych liter dla kodów językowych i wielkich dla regionalnych (np. en-US).
Co się stanie, jeśli zrobię błąd w tagach hreflang?
Błędy w hreflang mogą spowodować, że wyszukiwarki wyświetlą niewłaściwą wersję strony, co pogorszy doświadczenia użytkowników i może obniżyć pozycje w wynikach wyszukiwania.
Dodatek: Przydatne narzędzia i zasoby
Generatory tagów hreflang
- Aleyda Solis Hreflang Tags Generator – darmowe narzędzie online.
- Geo Targetly Hreflang Tag Generator – proste narzędzie do szybkiego generowania tagów.
- SISTRIX Hreflang Generator – zaawansowane narzędzie z opcją walidacji.
Narzędzia do testowania hreflang
- Merkle Hreflang Tag Testing Tool – bezpłatne narzędzie online.
- Hreflang Checker od Weglot – szybka weryfikacja pojedynczych stron.
- Screaming Frog SEO Spider – zaawansowane narzędzie do audytu całej witryny.
Wtyczki do CMS
- WordPress: WPML, Polylang, Yoast SEO Premium.
- Shopify: Weglot, Langify, Shopify Markets.
- Wix: Wbudowane narzędzia do obsługi wielu języków.