Jeśli Twoja witryna WordPress oferuje treści w wielu językach lub kieruje je do różnych regionów, wdrożenie tagów hreflang jest niezbędne dla optymalizacji pod kątem wyszukiwarek. Bez nich Google i inne wyszukiwarki mogą wyświetlać niewłaściwą wersję językową w swoich wynikach lub traktować Twoje przetłumaczone strony jako duplicate content, rozcieńczając ranking we wszystkich wersjach językowych. Tagi hreflang mówią wyszukiwarkom dokładnie, jaki język i wariant regionalny reprezentuje każda strona, dzięki czemu użytkownicy zawsze trafiają na najbardziej odpowiednią wersję.
Czym są tagi hreflang i jak używają ich wyszukiwarki
Hreflang to atrybut HTML, który określa język (i opcjonalnie cel geograficzny) strony. Pojawia się jako element <link> w sekcji <head> Twojej strony lub jako wpis w mapie witryny XML. Oto jak wygląda typowy zestaw tagów hreflang dla strony dostępnej po angielsku i niemiecku:
<link rel="alternate" hreflang="en" href="https://example.com/en/about/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/ueber-uns/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/about/" />Gdy Googlebot skanuje stronę i znajduje te tagi, rozumie, że oba URL-e reprezentują tę samą treść w różnych językach. Następnie podaje odpowiednią wersję na podstawie preferencji językowych i lokalizacji wyszukującego. Tag x-default działa jako uniwersalny fallback dla użytkowników, których język lub region nie pasuje do żadnej z określonych wartości hreflang.
Hreflang używa kodów języków ISO 639-1 (np. en, de, fr) i opcjonalnie kodów krajów ISO 3166-1 Alpha 2 (np. en-US, de-AT, pt-BR). Sam kod języka kieruje treść do wszystkich użytkowników tego języka, niezależnie od lokalizacji, a dodanie kodu kraju zawęża targetowanie do konkretnego regionu.
Kiedy potrzebujesz targetowania regionalnego, a kiedy wystarczy sam język
Wybór między samymi kodami językowymi (jak de) a kodami specyficznymi dla regionu (jak de-DE, de-AT, de-CH) zależy od Twojej strategii treści:
- Tylko język (
de): Używaj, gdy Twoja niemieckojęzyczna treść jest odpowiednia dla wszystkich niemieckojęzycznych użytkowników niezależnie od ich kraju. To właściwy wybór dla większości blogów, witryn informacyjnych i produktów SaaS. - Specyficzne dla regionu (
de-DE,de-AT): Używaj, gdy masz odrębną treść dostosowaną do konkretnych krajów. Na przykład sklep e-commerce z różną dostępnością produktów, cenami lub informacjami prawnymi dla Niemiec, Austrii i Szwajcarii potrzebuje tagów specyficznych dla regionu.
Częstym błędem jest używanie kodów specyficznych dla regionu, gdy wystarczyłyby same kody językowe. Jeśli Twoja niemiecka treść jest identyczna dla wszystkich niemieckojęzycznych, de jest prostsze i unika konieczności tworzenia odrębnych stron na region.
Konfiguracja hreflang z WPML
WPML (WordPress Multilingual Plugin) to najczęściej używana premium wtyczka wielojęzyczna i automatycznie obsługuje tagi hreflang:
- Zakup WPML Multilingual CMS na wpml.org i zainstaluj go.
- Uruchom kreatora konfiguracji. Wybierz swój domyślny język i dodaj wszystkie języki, które wspiera Twoja witryna.
- Wybierz strukturę URL. WPML obsługuje podkatalogi (
/en/,/de/), subdomeny (en.example.com) lub oddzielne domeny. Podkatalogi są najpopularniejsze i najłatwiejsze do zarządzania. - Zacznij tłumaczyć swoją treść. Przy każdym wpisie lub stronie kliknij ikonę "+" obok docelowego języka w polu języka WPML, aby utworzyć tłumaczenie.
- WPML automatycznie generuje tagi hreflang dla każdej strony, która ma tłumaczenia. Dodaje również tag
x-defaultwskazujący na Twoją domyślną wersję językową.
Aby zweryfikować wyjście, obejrzyj źródło przetłumaczonej strony i wyszukaj hreflang. Powinieneś zobaczyć tag <link> dla każdego języka, w tym dla bieżącej strony (samoodwołujący hreflang, który jest obowiązkowy).
WPML integruje się również z Yoast SEO i Rank Math. Gdy obie wtyczki są aktywne, wtyczka SEO przejmuje generowanie hreflang i dodaje własną warstwę walidacji, która może wychwytywać częste błędy konfiguracyjne.
Konfiguracja hreflang z Polylang
Polylang to popularna darmowa alternatywa dla WPML. Automatycznie generuje tagi hreflang dla wszystkich powiązanych tłumaczeń:
- Zainstaluj i aktywuj Polylang z katalogu wtyczek WordPress.
- Przejdź do Języki > Języki i dodaj każdy język wspierany przez Twoją witrynę. Ustaw locale, kod języka i format URL (zalecany podkatalog).
- Przypisz język do każdego istniejącego wpisu i strony. Polylang dodaje kolumnę języka do Twojej listy wpisów, dzięki czemu łatwo widzisz, które wpisy są przetłumaczone.
- Połącz tłumaczenia ze sobą. Podczas edycji wpisu użyj sekcji "Tłumaczenia" w pasku bocznym, aby połączyć go z odpowiednikami w innych językach.
- Polylang automatycznie wyprowadza tagi hreflang w
<head>dla wszystkich połączonych tłumaczeń.
Ważna różnica w stosunku do WPML: Polylang nie dodaje automatycznie tagu x-default we wszystkich konfiguracjach. Aby upewnić się, że jest obecny, przejdź do Języki > Ustawienia > Hreflang i zweryfikuj, że x-default jest ustawiony na Twój podstawowy język. Jeśli używasz Polylang Pro (wersja premium), jest to obsługiwane automatycznie.
Konfiguracja hreflang z TranslatePress
TranslatePress przyjmuje inne podejście, pozwalając tłumaczyć treść bezpośrednio na frontendzie:
- Zainstaluj i aktywuj TranslatePress.
- Przejdź do Ustawienia > TranslatePress i dodaj swoje języki.
- Kliknij "Przetłumacz witrynę" na pasku administratora, aby otworzyć wizualny edytor tłumaczeń.
- Nawiguj do dowolnej strony i kliknij elementy tekstowe, aby przetłumaczyć je inline.
- TranslatePress automatycznie obsługuje generowanie tagów hreflang dla wszystkich przetłumaczonych stron.
TranslatePress przechowuje tłumaczenia w bazie danych zamiast tworzyć oddzielne wpisy, co oznacza, że zarządzanie treścią jest prostsze, ale opcje struktury URL są bardziej ograniczone.
Łączenie Yoast SEO lub Rank Math z wtyczkami wielojęzycznymi
Zarówno Yoast SEO, jak i Rank Math rozpoznają popularne wtyczki wielojęzyczne i przejmują generowanie tagów hreflang, gdy obie są aktywne. Ta integracja dodaje dodatkową walidację:
- Dopasowanie URL kanonicznego: Wtyczka SEO weryfikuje, czy href hreflang pasuje do kanonicznego URL każdej strony, co zapobiega częstej błędnej konfiguracji.
- Obsługa noindex: Strony oznaczone jako noindex są automatycznie wyłączane z wyjścia hreflang, ponieważ wyszukiwarki i tak nie powinny ich indeksować.
- Integracja z sitemap: Adnotacje hreflang są dołączane do mapy witryny XML generowanej przez wtyczkę SEO, co daje wyszukiwarkom drugie źródło danych hreflang.
Jeśli używasz Yoast SEO z WPML lub Polylang, sprawdź SEO > Ogólne > Funkcje i upewnij się, że funkcja hreflang nie jest wyłączona. Rank Math obsługuje to automatycznie bez dodatkowej konfiguracji.
Ręczne wdrażanie hreflang w WordPress
Dla witryn z niestandardową konfiguracją wielojęzyczną (np. używających oddzielnych instalacji WordPress dla każdego języka lub podejścia headless CMS) możesz potrzebować ręcznie dodać tagi hreflang:
function add_hreflang_tags() {
if (is_singular()) {
$post_id = get_the_ID();
// Zdefiniuj mapowanie język-URL
// Przechowuj tłumaczenia jako post meta lub w niestandardowej tabeli
$translations = array(
'en' => get_post_meta($post_id, '_url_en', true),
'de' => get_post_meta($post_id, '_url_de', true),
'fr' => get_post_meta($post_id, '_url_fr', true),
);
// Usuń puste wpisy
$translations = array_filter($translations);
// Dodaj bieżącą stronę (samoodwołujący hreflang jest wymagany)
$current_lang = get_locale();
$lang_code = substr($current_lang, 0, 2); // 'en_US' staje się 'en'
$translations[$lang_code] = get_permalink();
// Wyprowadź tagi hreflang
foreach ($translations as $lang => $url) {
echo '<link rel="alternate" hreflang="' . esc_attr($lang) . '" href="' . esc_url($url) . '" />' . "\n";
}
// x-default (zwykle wskazuje na angielski lub Twój podstawowy język)
if (!empty($translations['en'])) {
echo '<link rel="alternate" hreflang="x-default" href="' . esc_url($translations['en']) . '" />' . "\n";
}
} elseif (is_front_page() || is_home()) {
// Obsłuż stronę główną osobno
$home_translations = array(
'en' => 'https://example.com/en/',
'de' => 'https://example.com/de/',
'fr' => 'https://example.com/fr/',
);
foreach ($home_translations as $lang => $url) {
echo '<link rel="alternate" hreflang="' . esc_attr($lang) . '" href="' . esc_url($url) . '" />' . "\n";
}
echo '<link rel="alternate" hreflang="x-default" href="' . esc_url($home_translations['en']) . '" />' . "\n";
}
}
add_action('wp_head', 'add_hreflang_tags');W konfiguracji produkcyjnej zastąp zakodowane tablice URL dynamicznymi wyszukiwaniami z Twojego systemu mapowania tłumaczeń, niezależnie czy to post meta, niestandardowa tabela bazy danych czy wywołanie API do Twojej platformy zarządzania tłumaczeniami.
Dodawanie hreflang do map witryny XML
Dla witryn z tysiącami stron deklarowanie hreflang w mapie witryny XML może być bardziej wydajne niż dodawanie tagów do każdej strony HTML. Podejście z mapą witryny XML zmniejsza rozmiar strony i daje wyszukiwarkom scentralizowane źródło danych hreflang. Oto format XML:
<url>
<loc>https://example.com/en/about/</loc>
<xhtml:link rel="alternate" hreflang="en"
href="https://example.com/en/about/" />
<xhtml:link rel="alternate" hreflang="de"
href="https://example.com/de/ueber-uns/" />
<xhtml:link rel="alternate" hreflang="x-default"
href="https://example.com/en/about/" />
</url>Zarówno WPML, jak i Polylang automatycznie dodają adnotacje hreflang do swoich map witryny. Jeśli używasz Yoast SEO obok wtyczki wielojęzycznej, Yoast również zawiera hreflang w swojej mapie witryny. Dla ręcznych wdrożeń możesz użyć wtyczki takiej jak "XML Sitemap Generator for Google" i dostosować wyjście sitemap, aby uwzględnić wpisy hreflang.
Możesz używać zarówno tagów hreflang HTML, jak i adnotacji w mapie witryny XML jednocześnie. Google przetwarza oba i godzi je. W przypadku konfliktów między nimi Google używa własnej heurystyki, aby określić właściwe mapowanie.
Kluczowe zasady hreflang, których musisz przestrzegać
Hreflang jest słynnie łatwy do błędnego wdrożenia. Przestrzegaj tych zasad, aby uniknąć typowych pułapek:
- Dwukierunkowe (wzajemne) linkowanie jest obowiązkowe: Jeśli strona A (angielska) zawiera hreflang wskazujący na stronę B (niemiecką), strona B również musi zawierać hreflang wskazujący z powrotem na stronę A. Jeśli linkowanie jest tylko jednokierunkowe, wyszukiwarki całkowicie je ignorują. To najczęstszy błąd hreflang.
- Samoodwołujący hreflang jest wymagany: Każda strona musi zawierać tag hreflang wskazujący na samą siebie. Jeśli Twoja angielska strona ma tagi hreflang dla wersji niemieckiej i francuskiej, musi też mieć tag hreflang dla wersji angielskiej wskazujący na własny URL.
- Używaj wyłącznie URL-i kanonicznych: URL w każdym tagu hreflang musi dokładnie pasować do kanonicznego URL tej strony. Jeśli strona ma tag
rel="canonical"wskazujący na inny URL, użyj kanonicznego URL w tagu hreflang, nie URL bieżącej strony. - Każdy wariant językowy potrzebuje pełnego zestawu: Przy 4 wersjach językowych każdy wariant strony musi zawierać wszystkie 4 tagi hreflang plus x-default. Niekompletne zestawy powodują, że wyszukiwarki ignorują całą adnotację hreflang dla tej grupy stron.
- Strony muszą zwracać kod statusu 200: Nie umieszczaj w tagach hreflang URL-i, które przekierowują (301/302) lub zwracają błędy (404/500). Wyszukiwarki oznaczają je jako błędy hreflang i mogą ostatecznie przestać przetwarzać Twoje adnotacje hreflang.
- Zawsze uwzględniaj x-default: Tag x-default służy jako fallback dla użytkowników, których język lub region nie pasuje do żadnego z określonych wariantów. Bez tego ci użytkownicy mogą w ogóle nie zobaczyć Twojej treści w wynikach wyszukiwania.
Debugowanie i walidacja Twojego wdrożenia hreflang
Po skonfigurowaniu tagów hreflang dokładna walidacja jest kluczowa. Nawet drobne błędy mogą uczynić całą Twoją konfigurację hreflang bezużyteczną:
- Analiza InspectWP: Przepuść każdą wersję językową swojej witryny przez InspectWP. Wykrywa wszystkie tagi hreflang i wymienia każdy wariant językowy, dzięki czemu łatwo zweryfikujesz, czy wszystkie tagi są obecne i wskazują na poprawne URL-e.
- Google Search Console: Sprawdź raport Targetowanie międzynarodowe (pod Starsze narzędzia i raporty) pod kątem błędów hreflang. Google zgłasza problemy takie jak brakujące linki zwrotne, nieznane kody języków i konflikty hreflang z tagami kanonicznymi.
- Ręczna inspekcja kodu źródłowego: Obejrzyj źródło każdej wersji językowej i zweryfikuj, czy tagi hreflang są obecne, dwukierunkowe i samoodwołujące. Sprawdź, czy URL-e są bezwzględne (nie względne) i używają poprawnego protokołu (https, nie http).
- Audyt z Ahrefs lub Screaming Frog: Dla dużych witryn użyj narzędzia crawlera, aby sprawdzić wszystkie strony jednocześnie. Te narzędzia mogą zidentyfikować brakujące tagi hreflang, niewzajemne linkowanie i niedopasowania kodów języków w całej witrynie.
Hreflang dla sieci WordPress Multisite
Jeśli prowadzisz WordPress Multisite, gdzie każda podwitryna reprezentuje inny język, wdrożenie hreflang wymaga świadomości cross-site. WPML obsługuje konfiguracje Multisite i łączy treść między podwitrynami. Dla ręcznych wdrożeń musisz zapytywać bazy danych innych podwitryn, aby znaleźć odpowiadający przetłumaczony wpis i dynamicznie skonstruować URL hreflang. Funkcja WordPress switch_to_blog() pozwala odpytywać dane z innej podwitryny w tej samej sieci.
Rozważania wydajnościowe dla dużych witryn wielojęzycznych
Na witrynach z wieloma językami (10+) tagi hreflang mogą dodawać znaczący markup do każdej strony. Każda strona potrzebuje jednego tagu na język plus x-default, więc witryna z 15 językami dodaje 16 elementów <link> do head każdej strony. Dla witryn wrażliwych na wydajność warto rozważyć następujące strategie:
- Używaj hreflang w mapie witryny XML zamiast HTML: Przeniesienie deklaracji hreflang do mapy witryny całkowicie usuwa markup z Twoich stron, zmniejszając rozmiar strony.
- Cachuj wyjście hreflang: Jeśli dynamicznie generujesz tagi hreflang (np. z zapytań do bazy danych), cachuj wynik za pomocą transientów WordPress lub Twojego object cache, aby uniknąć powtarzających się trafień do bazy danych przy każdym ładowaniu strony.
- Używaj nagłówka HTTP dla treści innych niż HTML: Dla PDF-ów i innych zasobów innych niż HTML możesz deklarować hreflang za pomocą nagłówka HTTP
Linkzamiast tagów HTML.