Atrybut rel=”alternate” hreflang=”x-default”

Czym jest atrybut rel=”alternate”

Zacznij może od samego początku i wyjaśnijmy Ci czym jest atrybut rel=”alternate”. W tym artykule Atrybuty rel=”noopener” i rel=”noreferrer wyjaśniliśmy, że sam znacznik rel oznacza relację pomiędzy linkami. Co jednak oznacza wartość „alternate”?

Informuje ona robota Google i przeglądarki internetowe, że wskazany link jest alternatywną wersją dokumentu np. w sytuacji, gdy korzystamy właśnie z wielojęzycznych stron, gdzie jest ten sam content, lecz w innym języku.

Ok, wiesz już czym jest rel i „alternate”, co daje Ci atrybut rel=”alternate” dodawany w kodzie HTML do linków np.:

<a href="{adres_domeny}" rel="alternate" />

Zanim jednak przejdziemy do szczegółowego opisu atrybutu rel=”alternate” zachęcamy Cię do sprawdzenia pozostałych poradników na naszym blogu, które poruszają podobne tematy.

1. Atrybuty HTML [spis atrybutów HTML]
2. Atrybut loading=”lazy”
3. Atrybut fetchPriority
4. Atrybut rel=”prefetch”
5. Atrybut rel=”preconnect”
6. Atrybut rel=”preload”
7. Atrybuty rel=”sponsored”
8. Atrybut rel=”canonical” [linki kanoniczne]
9. Atrybut rel=”dns-prefetch”
10. Atrybut rel=”alternate” hreflang=”x-default”
11. Atrybuty rel=”noopener” i rel=”noreferrer”
12. Linki dofollow vs linki nofollow

Rel=”alternate” i „hreflang=”x-default”

Do atrybutu rel=”alternate” możemy dodać dodatkowe  wartości takie jak np. hreflang=”x-default”. W tym artykule pominiemy jak powinna wyglądać cała struktura hreflangów, ponieważ nadaje się to na osobny wpis. Kierujemy go natomiast do osób, które już znają podstawy stosowania atrybutów takich jak np. rel=”alternate” hreflang=”en”.

Mówią w dużym skrócie za pomocą hreflangów możemy wskazać robotowi Google, że nasza strona posiada inne wersje jezykowe. Możemy to także zrobić za pomocą sitemapy, jednak w tym artykule skupimy się tylko na znacznikach HTML.

A więc przechodząc do meritum atrybut rel=”alternate” hreflang=”x-default” znajdzie zastosowanie wszędzie tam, gdzie nie skorzystamy z lokalizowania hreflangów. Co to oznacza dla Ciebie?

Wyobraź sobie sytuację, że masz wersje swojej strony internetowej skierowanej na język polski (Polska), język niemiecki (Niemcy) i język angielski (USA i UK).

W takiej sytuacji zastosujesz następujące hreflangi:

<a href="{adres_domeny/pl} rel="alternate" hreflang="pl" />

<a href="{adres_domeny/en} rel="alternate" hreflang="en" />

<a href="{adres_domeny/de} rel="alternate" hreflang="de" />

Oznacza dla robota Google, że na Twojej stronie znajduje się więcej niż 1 język, wskazana podstrona przypisana jest do jednego z nich. Kiedy więc i jak trzeba zastosować hreflang=”x-default”/>, aby zrobić to poprawnie?

Stosując poniższy kod:

<a href="{adres_domeny} rel="alternate" hreflang="x-default" />

Mówisz robotowi Google:

To jest nasza główna strona przeznaczona na wszystkie języki, gdzie użytkownik znajdzie możliwość wybrania jednego z nich. Jeżeli nie wiesz gdzie przekierować użytkownika, zrób to proszę tutaj.

Dlaczego „proszę”? Wszystkie atrybutu to jedynie wytyczne dla robota Google, jednak nie musi on się do nich stosować. Tak samo jest z atrybutem rel=”alternate” hreflang=”x-default”. Jednak jest spora szansa, że jednak tak się stanie, dlatego warto stosować te atrybutu, a zwłaszcza x-default.

Wprowadzając go do kodu HTML informujesz Google nie tylko o tym, gdzie użytkownik znajdzie wybór języka, lecz także prosisz Google o to, aby zawsze wybierał ten URL, gdy wyniki wyszukiwania nie pasują do innych języków.

Ciekawe, dodatkowe informacje na temat atrybutu rel=”alternate” hreflang=”x-default” znajdziesz na oficjalnym blogu Google dla developerów.