Hreflang Tagi: najlepszy przewodnik

Czym są tagi hreflang?

Hreflang to kod — w szczególności atrybut HTML — który określa wszystkie adresy URL w witrynie, które wykorzystują tę samą treść. Atrybut hreflang został wprowadzony przez Google ponad dekadę temu i umożliwia użytkownikom pokazywanie wyszukiwarkom relacji między wieloma stronami internetowymi w różnych językach. Okazuje się to przydatne, gdy treści są tworzone dla określonej grupy odbiorców. W przypadku firm, które mają wiele wersji tej samej strony internetowej w różnych językach, tag hreflang przekazuje te odmiany wyszukiwarkom i pomaga dostarczyć użytkownikom odpowiednią wersję.

Na przykład, jeśli ktoś wpisze w Google „Ikea” w USA, zobaczy ten wynik:

Chociaż to samo zapytanie wprowadzone przez osobę wyszukującą w Kanadzie, zwróci następujący wynik:

Po co całe zamieszanie? Tag hreflang umożliwia wyszukiwarkom dostarczanie użytkownikom wyników na podstawie ich preferencji dotyczących kraju i języka, co sprawia, że ​​znaczenie tagu hreflang jest nieocenione: optymalizuje wrażenia użytkownika i prowadzi do lepszych rankingów wyszukiwania. Jak to jest z wygraną?

Dlaczego Hreflang ma znaczenie dla SEO?

Wszystko sprowadza się do spersonalizowanych wyników. Cała ciężka praca związana z tłumaczeniem strony internetowej na wiele języków jest stracona, jeśli użytkownik nie zostanie skierowany do wyników dostosowanych do niego. Krótko mówiąc, hreflang SEO umożliwia wyszukiwarkom dostarczanie użytkownikom najbardziej odpowiedniej wersji strony internetowej firmy na podstawie ich języka i lokalizacji. Masz stronę zoptymalizowaną pod kątem określonych preferencji użytkownika? Nie tylko chcesz, aby tam wylądowały, ale także chcesz, aby pozostały — z kilku powodów — a tagi hreflang SEO to sposób na to, jak to zrobić.

Wdrożenie tej praktyki poprawia wrażenia użytkownika, minimalizuje powracanie do wyników wyszukiwania i zapewnia wyższe rankingi. (Jeśli na początku ci się nie uda, spróbuj, spróbuj ponownie niekoniecznie jest przydatnym przysłowiem podczas nawigowania w wyszukiwarkach internetowych). Celem tutaj nie jest zwiększenie ruchu, a raczej serwowanie właściwych treści odpowiednim użytkownikom, którzy chcą szybkich i niezawodnych zwrotów. Tagi Hreflang są kluczem do osiągnięcia tych niuansów.

Potrzebujesz innego powodu? Korzystanie z hreflang eliminuje problem duplikatów treści. Wyobraź sobie, że Twoja firma oferuje te same treści w języku angielskim pod różnymi adresami URL skierowanymi do USA i Kanady; różnice są prawdopodobnie niewielkie i odzwierciedlone w szczegółach walutowych (USD w porównaniu z CAD) i lingo (system imperialny w porównaniu z systemem metrycznym).

Tag hreflang pomaga wyszukiwarkom rozpoznać i zrozumieć relacje między tymi stronami — oraz odrębnymi odbiorcami, dla których każda została utworzona. Bez hreflang Google może mieć skłonność do postrzegania tych stron jako zduplikowanych treści i zwracania tylko jednego z wyników; z hreflang jest bardzo wyraźnie komunikowane wyszukiwarce, że chociaż treść jest (w dużej mierze) taka sama, jest zoptymalizowana dla różnych populacji. Jak to z piórkiem w czapce (albo tuque, dla naszych kanadyjskich przyjaciół)?

Te szczegóły mają znaczenie, więc czytaj dalej, aby dowiedzieć się więcej.

Jak wyglądają tagi hreflang?

Tagi hreflang są proste, spójne i mają następującą składnię:

 <link rel=“alternate” hreflang=“x” href=“https://www.example.com/nowa-strona” />

Ten format informuje, że połączona strona jest alternatywną wersją bieżącej strony, wyświetlaną w języku „x”. Tagi hreflang służą jako sygnały dla wyszukiwarek, a nie dyrektywy. Innymi słowy atrybut hreflang sygnalizuje wyszukiwarce, że użytkownik, który wyszukuje zapytanie w języku „x”, będzie preferował ten wynik od strony o bardzo podobnej treści w języku „y”. Kolejna różnica między sygnałami a dyrektywami? Google może nie rozpoznać atrybutów hreflang, jeśli zostaną one uznane za niedokładne — w wyniku innych czynników SEO zastępują atrybut hreflang, powodując, że alternatywna wersja strony Twojej firmy ma wyższą pozycję niż najlepsza wersja.

Korzystanie z HTML-a Hreflang

W przypadku witryn, które zostały przetłumaczone na wiele języków, skonstruowanie tagu hreflang jest tak proste, jak 1-2-3. Każdy z tych kroków używa składni wspomnianej powyżej (<link rel=“alternate” hreflang=“x” href=“https://www.example.com/nowa-strona” />) jako podstawy.

1. Atrybut hreflang musi zawierać prawidłową wartość, która składa się z języka; informacja ta jest przekazywana w dwuliterowym kodzie zwanym formatem ISO 639-1. Gdybyś chciał przetłumaczyć przykładową stronę na przykład na portugalski, wyglądałoby to tak:

    <link rel=“alternate” hreflang=“pt” href=“https://example.com/wersja-portugalska” />

   Region jest opcjonalny i, jeśli jest używany, powinien być w formacie ISO 3166-1 Alpha 2. Oto dwa różne tagi, których możesz użyć do kierowania reklam po portugalsku w Portugalii i Brazylii:

    PT-PT: <link rel="alternate" hreflang="pt-pt" href="https://example.com/pt/nasza-strona" />
   PT-BR: <link rel=“alternate” hreflang=“pt-br” href=“https://example.com/br/nasza-strona” />

   Kody regionalne niekoniecznie są intuicyjne (kod dla Wielkiej Brytanii to „gb”, a nie „uk”), więc sprawdź dokładnie! Użyj tej listy, aby zweryfikować prawidłowe kody języka i regionu przed umieszczeniem nieprawidłowych informacji w witrynie.

2. Każdy adres URL wymaga odsyłaczy do każdego innego adresu URL, z których wszystkie powinny wskazywać na kanoniczną lub preferowaną wersję danej witryny. Im więcej masz języków, tym więcej linków hreflang będziesz potrzebować; choć kuszące może być ich ograniczenie, nie da się uniknąć tego kroku. Co więcej, rel=”alternate” hreflang=”x”markup i rel=”canonical” mogą i powinny być używane razem. Każdy język powinien mieć link rel=”canonical” wskazujący na siebie. Zaczynając od strony głównej example.com, wyglądałoby to tak:

    <link rel="canonical" href="http://example.com/">
   <link rel="alternate" href="http://example.com/" hreflang="pt" />
   <link rel="alternate" href="http://example.com/pt-pt/" hreflang="pt-pt" />
   <link rel="alternate" href="http://example.com/pt-br/" hreflang="pt-br" />

   Aby uzyskać więcej informacji o kanonicznych, przeczytaj, Kanoniczne tagi i adresy URL: prosty przewodnik dla początkujących.

3. Ostatnim krokiem do udanej konstrukcji hreflang jest zakorzenienie się w self-links. Atrybut hreflang na każdej stronie wymaga odniesienia do siebie i wszelkich stron, które służą jako alternatywa dla niego. Google zdecydowanie zaleca ustawienie strony „x-default”, która ustanawia pojedynczy adres URL jako domyślną wersję, która nie jest kierowana na określony język lub region dla użytkowników, którzy nie spełniają określonych kryteriów.Jeśli ktoś odwiedził stronę pt-pt, tylko strona kanoniczna zmieniłbym:

    <link rel="canonical" href="http://example.com/pt-pt/">
   <link rel="alternatywny" href="http://example.com/"hreflang="pt" />
   <link rel="alternatywny" href="http://example.com/pt-pt/"hreflang="pt-pt" />
   <link rel="alternatywny" href="http://example.com/pt-br/"hreflang="pt-br" />

To dużo do strawienia! Ale dotarłeś tak daleko, co oznacza, że ​​jesteś gotowy na kolejny krok: naukę implementacji tagów hreflang.

Wdrażanie tagów hreflang

Istnieją trzy sposoby implementacji tagów hreflang, a wszystko sprowadza się do umieszczenia:

1 – Implementacja tagów Hreflang za pomocą HTML:

Dla tych, którzy dopiero zaczynają przygodę z hreflang, korzystanie z podstawowych tagów HTML jest najłatwiejszym i najszybszym sposobem na rozpoczęcie pracy. Po prostu dodaj odpowiednie tagi hreflang (patrz wyżej) w tagu <head> swojej strony internetowej.

Przykład: webmaster witryny example.com chce udostępnić swoją stronę główną użytkownikom anglojęzycznym i hiszpańskojęzycznym w Stanach Zjednoczonych; użycie następujących adnotacji w sekcji <head> kodu HTML ich witryny umożliwia osiągnięcie tego celu:

 <link rel="alternate" href="https://www.example.com" hreflang="en-us" />
<link rel="alternate" href="https://www.example.com/es" hreflang="es-us" />

Gdyby chcieli pokazać stronę główną hiszpańskojęzycznym użytkownikom w Wenezueli i Meksyku, adnotacja hreflang wyglądałaby tak:

 <link rel="alternate" href="https://www.example.com/ve" hreflang="es-ve" />
<link rel="alternate" href="https://www.example.com/mx" hreflang="es-mx" />

Największa pojedyncza wada tej metody? Hreflang HTML może szybko stać się niechlujny i czasochłonny. Pamiętaj też, że istnieje różnica między elementami <head> i <header>; <head> zawiera elementy, które nie pojawią się na stronie, w tym przypadku atrybut hreflang.

2 – Implementacja nagłówków HTTP Hreflang:

W przypadku plików PDF i treści innych niż HTML w witrynie użyj nagłówków HTTP, aby zaimplementować hreflang. Nazwa jest nieco myląca: implementacja nie odbywa się na stronie za pomocą <head> lub <header>. Zamiast tego wszystko odbywa się na zapleczu witryny. Korzystanie z nagłówków HTTP nie tylko określa względny język wariantów dokumentu, ale także optymalizuje tę zawartość.

Przykład: Aby zidentyfikować dokument PDF w witrynie w wersji angielskiej i francuskiej, łącze pojawiające się w nagłówku HTTP będzie wyglądać tak:

 Link: <http://en.example.com/document.pdf>; rel="alternatywny"; hreflang="pl", 
<http://fr.example.com/document.pdf>; rel="alternatywny"; hreflang="fr"

Największa wada tego sposobu realizacji? Korzystanie z nagłówków HTTP zwiększa obciążenie każdego żądania wysłanego w witrynie, co może spowolnić przeglądanie przez użytkownika.

3 – Wdrażanie Hreflang w Twojej mapie witryny XML

Ostatnią opcją implementacji hreflang jest użycie znaczników mapy witryny XML; używa to atrybutu xhtml:link w XML, aby dodać adnotację do każdego adresu URL.

Chociaż istnieje więcej niż jeden sposób na zaimplementowanie hreflang w mapie witryny XML, zalecamy coś takiego:

Alternatywnie możesz użyć niektórych przykładów poniżej.

Słowo ostrzeżenia: znaczniki potrzebne dla pojedynczego adresu URL z parą zmiennych języka/lokalizacji będą wyglądać na zbyt długie! To powiedziawszy, czytaj dalej o korzyściach. (Jest wiele!)

Przykład:

 <url>
<loc>http://www.example.com/uk/</loc> 
<xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> 
<xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> 
<xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" />
</url>

Zwróć uwagę, że trzeci adres URL jest odwołujący się do siebie; określa to konkretny adres URL przeznaczony dla en-gb i określa dwie inne kombinacje języka/lokalizacji. Teraz zaimplementowanie obu tych adresów URL do mapy witryny wyglądałoby tak:

 <url>
<loc>http://www.example.com/</loc> 
<xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> 
<xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> 
<xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" />
</url>
<url>
<loc>http://www.example.com/au/</loc> 
<xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> 
<xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> 
<xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" />
</url>

Zakładając, że możesz spojrzeć poza morze tekstu, zauważysz, że zmieniane są tylko adresy URL w elemencie <loc> — wszystko inne pozostaje bez zmian! Uff. Ta metoda polega na tym, że każdy adres URL ma własny atrybut hreflang i zwraca linki do innych adresów URL.

Wygląda na dużo pracy, prawda? Z jednej strony tak, ta metoda jest długa i wymaga sporo danych wyjściowych, gdy robi to dla wielu adresów URL. To powiedziawszy, korzyść jest prosta: normalni użytkownicy nie będą przeszkadzać tym znacznikom; nie dodaje się dodatkowej wagi strony, a generowanie tego rodzaju znaczników nie wymaga wielu wywołań bazy danych podczas ładowania strony.

Wreszcie, wdrożenie hreflang za pomocą mapy witryny XML ma dużą zaletę — wszystko jest zdefiniowane w jednym pliku. Eliminuje to potrzebę edytowania wielu dokumentów HTML za każdym razem, gdy strona jest zmieniana lub usuwana. Plus, zero spowolnienia witryny. Innymi słowy, jest co polubić!

Nadal nie wiesz, jaki tryb wdrożenia wybrać? Aby uzyskać więcej wskazówek dotyczących architektury i struktury witryny, zapoznaj się z najlepszymi praktykami technicznymi SEO.

Znajdowanie i naprawianie problemów z Hreflang

Teraz, gdy pomyślnie wdrożyłeś hreflang na swojej stronie (wstaw tutaj wirtualną piątkę!), konserwacja jest koniecznością. Przeprowadzanie regularnego audytu wybranej implementacji zapewni, że jest ona prawidłowo skonfigurowana. Komunikowanie się z osobami w Twojej firmie, które zajmują się treścią witryny, będzie miało długą drogę — chcesz, aby wiedzieli o hreflang, aby nie zepsuli przypadkowo Twojej implementacji!

W tym miejscu należy wspomnieć o dwóch krytycznych punktach: Jeśli strona zostanie usunięta, sprawdź, czy jej odpowiedniki zostały zaktualizowane; gdy strona jest przekierowywana, zmień adresy URL hreflang na jej odpowiedniki. Zakładając, że ty i twój zespół robicie te rzeczy konsekwentnie i regularnie przeprowadzacie audyty, powinno to być płynne.

W międzyczasie, oto krótki przegląd najczęstszych błędów hreflang i sposobów ich naprawienia:

1 – Brak adnotacji hreflang do samodzielnego odniesienia

O co tyle szumu? Ważne jest, aby za każdym razem, gdy dodajesz tag hreflang do strony internetowej, używać odsyłającego do siebie tagu hreflang. Pamiętaj, że Google stwierdza, że ​​„każda wersja językowa musi się wymieniać tak samo, jak wszystkie inne wersje językowe”.

Jak to naprawić: przejrzyj wszystkie strony, których dotyczy problem, i dodaj do każdej z nich samoodwołujący się tag hreflang, korzystając z wybranej metody implementacji.

2 – Nieprawidłowa adnotacja Hreflang

O co tyle szumu? Wyszukiwarki ignorują nieprawidłowe tagi hreflang, co prowadzi do przeoczenia alternatywnych wersji Twojej strony internetowej.

Jak to naprawić: sprawdź strony, których dotyczy problem, i usuń nieprawidłowe tagi hreflang i zastąp je tymi, które używają prawidłowych formatów kodu języka/lokalizacji.

3 – Strona odwołuje się do więcej niż jednego języka w hreflang

O co tyle szumu? Każdy element treści jest przeznaczony do obsługi jednego języka/lokalizacji językowej. Co najmniej dwa sprzeczne odniesienia spowodują zmylenie wyszukiwarek i spowodują ignorowanie atrybutów hreflang.

Jak to naprawić: przejrzyj strony, których dotyczy problem, i sprawdź adresy URL, które w atrybutach hreflang odwołują się do konkretnej strony, pod kątem błędów. Usuń wszelkie niepoprawne atrybuty hreflang i pozostaw tylko jeden poprawny atrybut na język.

4 – Brak wzajemnego hreflang (brak tagu zwrotnego)

O co tyle szumu? Tagi hreflang są dwukierunkowe (jeśli strona A łączy się ze stroną B w adnotacjach hreflang, strona B musi w zamian odsyłać do strony A).

Jak to naprawić: sprawdź strony, których dotyczy problem, i w razie potrzeby dodaj dwukierunkowe tagi hreflang. Uwaga: międzynarodowy raport kierowania w Google Search Console (znajdujący się na karcie „język”) oznaczy wszystkie przypadki braku tagów zwrotnych.

Na przykład:

5 – Hreflang na niekanoniczny

O co tyle szumu? Rel="alternate" hreflang="x" nakazuje wyszukiwarkom wyświetlenie przetłumaczonej (zlokalizowanej) wersji strony; Atrybut rel=canonical oznaczy, że nie jest to autorytatywna (kanoniczna) wersja. Te sprzeczne atrybuty wprowadzą w błąd wyszukiwarki.

Jak to naprawić: sprawdź strony, których dotyczy problem, i zmodyfikuj adnotacje hreflang, aby wskazywały tylko kanoniczne adresy URL. Jeśli natkniesz się na stronę z nieprawidłowym tagiem kanonicznym, usuń ją. Dzięki temu atrybut hreflang jest właściwie rozumiany i śledzony przez wyszukiwarkę.

6 – Niezgodność języka Hreflang i HTML

O co tyle szumu? Wyszukiwarki (inne niż Google) stają się zdezorientowane, gdy istnieje niespójność między zadeklarowanym atrybutem hreflang i językiem HTML dla jednego lub więcej adresów URL; ważne jest, aby te dwa atrybuty były ze sobą spójne.

Jak to naprawić: Przejrzyj strony, których dotyczy problem, i zmień atrybut języka HTML, aby upewnić się, że pozostaje zgodny z zadeklarowanym atrybutem hreflang.

7 – Hreflang na zepsutą stronę

O co tyle szumu? Wyszukiwarka nie może zwrócić treści, które nie istnieją! Dlatego atrybuty hreflang, które wskazują na martwe strony, zostaną przeoczone.

Jak to naprawić: przejrzyj strony, których dotyczy problem, i zmień adnotacje hreflang, aby upewnić się, że prowadzą do działających stron.

8 – Więcej niż jedna strona dla tego samego języka w hreflang

O co tyle szumu? Gdy jeden lub więcej adresów URL odwołuje się do co najmniej dwóch stron w tym samym języku (lub lokalizacji w języku) w adnotacjach hreflang, wyszukiwarka staje się zdezorientowana.

Jak to naprawić: przejrzyj strony, których dotyczy problem, i usuń jedną z adnotacji hreflang, aby dla każdego języka znajdowała się jedna strona.

9 – Brak adnotacji hreflang X-default

O co tyle szumu? Chociaż atrybuty hreflang x-default są opcjonalne, są one zalecane jako najlepsza praktyka SEO dla wszystkich adnotacji hreflang.

Jak to naprawić: przejrzyj strony, których dotyczy problem, i upewnij się, że każda z nich ma ustawiony atrybut hreflang „x-default”, który wskazuje na stronę, która NIE jest specyficzna dla określonego języka lub lokalizacji.

Masz pytania? Zapoznaj się z aktualizacją algorytmu Core Web Vitals, która przedstawia dodatkowe praktyki SEO w zakresie technologii, o których chcesz być na bieżąco w tym roku.

Problemy, które Google może zignorować

Zrobiłeś swoją część w przestrzeganiu najlepszych praktyk — nadal będą chwile, kiedy wyszukiwarki ignorują pewne problemy. Dzieje się tak głównie wtedy, gdy wyszukiwarka wielokrotnie widzi ten sam problem i uważa, że ​​można go rozwiązać po ich zakończeniu. Nie przejmuj się! To jest naprawdę bardzo pomocne. Oto garść problemów z tagami hreflang, które Google faktycznie „naprawia” za Ciebie:

1. Podkreślenie zamiast myślnika: to częsty błąd i Google uwzględnia go. Każdy. Pojedynczy. Czas.
2. Używanie en-UK zamiast en-GB: Rozmawialiśmy o tym wcześniej… fakt, że kody regionalne niekoniecznie są intuicyjne. Zapewniamy, że Google Cię chroni: Wielka Brytania jest kodem zastrzeżonym, co oznacza, że ​​Google rozwiązuje ten powszechny problem.
3. Hreflang nie ma autoreferencji: Google niedawno stwierdził, że hreflang do autoreferencji jest opcjonalny; to powiedziawszy, pozostaje dobrą praktyką.
4. Względne a bezwzględne adresy URL: Chociaż zarówno kanoniczny, jak i hreflang mogą używać ścieżek względnych, bezwzględne jest bardziej bezwzględne! Stąd zalecenie, aby używać go, gdy jest to możliwe.

Przekierowywanie użytkowników: słowo ostrzeżenia

W wielu przypadkach strony internetowe przekierowują użytkowników na podstawie kombinacji plików cookie, adresu IP i/lub języka przeglądarki; uważaj na przekierowanie! Dla użytkowników może to przełożyć się na frustrujące (czytaj poniżej przeciętne) doświadczenie; dla wyszukiwarek próba zindeksowania treści staje się problematyczna. Co więcej, przekierowujący użytkownicy mogą zerwać nawiązane połączenia potrzebne do tagów hreflang.

Oto, co Google ma do powiedzenia na temat tej praktyki:

Nie używaj analizy IP w celu dostosowania treści. Analiza lokalizacji IP jest trudna i generalnie nierzetelna. Ponadto Google może nie być w stanie prawidłowo zaindeksować odmian Twojej witryny. Większość (ale nie wszystkie) indeksów Google pochodzi ze Stanów Zjednoczonych i nie próbujemy zmieniać lokalizacji w celu wykrycia odmian witryn. Użyj jednej z przedstawionych tutaj metod jawnych (hreflang, alternatywnych adresów URL i wyraźnych linków).

Traktuj roboty wyszukiwarek tak, jak użytkowników z dowolnej lokalizacji. Traktowanie bota wyszukiwarki inaczej niż użytkownika jest uważane za maskowanie — praktyka prezentowania różnych treści lub adresów URL użytkownikom i wyszukiwarkom — jest naruszeniem wskazówek Google dla webmasterów.

Chcesz zatwierdzoną poprawkę, która zapewni użytkownikom oczekiwane wyniki? Użyj tej samej logiki wykrywania, aby zasugerować użytkownikowi lepszą wersję strony na małym banerze. Jedynym zastrzeżeniem jest to, że jeśli jest zbyt duży, może być postrzegany jako pełnoekranowy (co powoduje, że treść jest całkowicie lub częściowo zasłonięta dla użytkownika).

Hreflang Pro wskazówka

Istnieje rozszerzenie Google Chrome, które automatyzuje proces sprawdzania wdrożenia hreflang w witrynie. Zapoznaj się z informacjami na temat tego i innych dodatków SEO Chrome, które pomogą Ci zarządzać codzienną konserwacją SEO.

Wniosek

Zrozumienie, wykorzystanie i rozwiązywanie problemów z hreflang to wymóg dzisiejszego SEO. Chcesz mieć pewność, że robisz wszystko, co w Twojej mocy, aby zwiększyć widoczność swojej witryny w każdym zakątku świata? Zwycięskie kopanie głęboko, aby odkryć lokalne tendencje kulturowe i wzorce zakupowe, które wpływają na wyszukiwanie, aby określić najlepszą strategię dla Twojej międzynarodowej kampanii SEO.

Gotowy do rozpoczęcia pracy z agencją SEO? Zarejestruj się na bezpłatne konsultacje SEO już dziś — i pozwól Victorious przeprowadzić Cię przez cały proces.