Hreflang dla stron międzynarodowych
Wskazywanie wyszukiwarkom wariantów językowych i regionalnych
Hreflang dla stron międzynarodowych to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Problem rozwiązywany przez hreflang
Gdy publikują Państwo ten sam artykuł po angielsku, turecku i japońsku, wyszukiwarki muszą wiedzieć, którą wersję wyświetlić w wynikach wyszukiwania poszczególnych użytkowników. Bez hreflang Google może wyświetlić wersję w niewłaściwym języku albo potraktować warianty jako zduplikowaną treść.
Tag link
Każdą alternatywną wersję należy zadeklarować za pomocą <link rel="alternate" hreflang="..." href="..."> w elemencie <head>. Atrybut hreflang jest kodem języka BCP-47 (en, tr) albo parą język-region (en-US, en-GB, pt-BR).
<link rel="alternate" hreflang="en" href="https://example.com/en/article">
<link rel="alternate" hreflang="tr" href="https://example.com/tr/article">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/article">Wymagane odwołania wzajemne
Każda wersja musi zawierać odwołania do wszystkich pozostałych wersji, w tym do samej siebie. Google ignoruje klastry hreflang, których odwołania nie są dwukierunkowe. Strona angielska odwołuje się do TR i JA, strona turecka do EN i JA, i tak dalej.
Odwołanie do samej siebie
Każda strona powinna odwoływać się do samej siebie za pomocą hreflang. Strona angielska musi zawierać <link rel="alternate" hreflang="en" ...> wskazujący na jej własny adres URL. Jest to część „wzajemności” — Google używa tego odwołania do samej siebie, aby potwierdzić przynależność do klastra.
Wartość x-default
Wartości hreflang="x-default" należy użyć do wskazania strony zastępczej dla użytkowników, których języka Google nie może dopasować. Zwykle wskazuje ona na wersję angielską albo stronę docelową z wyborem języka, aby użytkownicy spoza obsługiwanych grup trafili w odpowiednie miejsce.
Kody języków a kody regionów
en dotyczy wszystkich osób anglojęzycznych. Kody en-US, en-GB i en-AU dotyczą wariantów krajowych, gdy treść różni się zależnie od regionu (waluta, pisownia, wysyłka). Nie należy określać regionu, jeśli treść nie różni się od wersji ogólnej.
Alternatywne deklaracje
hreflang można również zadeklarować w nagłówku HTTP Link (w przypadku plików innych niż HTML, takich jak PDF) albo w mapie witryny XML za pomocą <xhtml:link rel="alternate" hreflang="...">. Wszystkie trzy metody są równoważne — należy wybrać tę, którą najłatwiej utrzymywać.
Deklaracja w mapie witryny
Deklarowanie hreflang w mapie witryny lepiej skaluje się niż tagi HTML w witrynach obsługujących wiele języków: jeden wpis mapy witryny na adres URL zawiera wszystkie alternatywy, eliminując powielanie w szablonach poszczególnych stron. Search Console wskazuje brakujące odwołania wzajemne, dzięki czemu błędy są wykrywane na wczesnym etapie.
Typowe błędy
Użycie podkreślenia (en_US) zamiast łącznika (en-US), wskazanie adresu URL, który nie zwraca kodu 200, połączenie adresów http i https w jednym klastrze albo pominięcie odwołania do samej siebie — każdy z tych błędów po cichu unieważnia hreflang. Po uruchomieniu witryny należy uruchomić raport International Targeting w Google Search Console.
Nie zastępuje tłumaczenia
hreflang informuje Google tylko o tym, które tłumaczenie już istnieje. Same strony nadal muszą zawierać rzeczywiście przetłumaczoną treść — Google nie przetłumaczy jej za Państwa. Witryny, które dodają hreflang do stron zawierających w 80% treść angielską, po cichu wprowadzają zamieszanie w indeksie.
Łączenie z og:locale i lang
Wartości <html lang="..."> i og:locale należy ustawić zgodnie z rzeczywistym językiem strony. hreflang informuje wyszukiwarki o stronach powiązanych; lang i og:locale informują przeglądarki oraz sieci społecznościowe o bieżącej stronie. Oba mechanizmy są potrzebne, aby uzyskać pełny obraz.
Sprawdzenie wiedzy
Na co wskazuje hreflang="x-default"?
Podsumowanie
hreflang łączy przetłumaczone wersje strony, aby wyszukiwarki wyświetlały właściwy język. Należy używać kodów BCP-47, deklarować alternatywy wzajemnie (w tym dodawać odwołanie do samej siebie), określać x-default jako wersję zastępczą oraz weryfikować konfigurację w raporcie International Targeting w Google Search Console. Jakość tłumaczenia i tagi lang/og:locale również muszą być zgodne.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Hreflang dla stron międzynarodowych” jest bezpłatna?
Tak — pełny tekst „Hreflang dla stron międzynarodowych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Hreflang dla stron międzynarodowych”?
Wskazywanie wyszukiwarkom wariantów językowych i regionalnych Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Hreflang dla stron międzynarodowych”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- OpenGraph — og:title, og:description i og:image
- Znaczniki meta Twitter Cards
- Podstawy danych strukturalnych JSON-LD
- Hreflang dla stron międzynarodowych