rel=”alternate” hreflang=”x” attribute

Wat je kunt verwachten van dit artikel

Het rel="alternate" hreflang="x" link attribuut wordt gebruikt om aan te geven in welke taal jouw content is opgesteld en voor welke geografische regio het bestemd is. Dit helpt zoekmachines om te bepalen welke content variant zij aan hun gebruikers moeten aanbieden en is met name van belang voor content die in meerdere talen beschikbaar is. In dit artikel duiken we in dit link attribuut.

Wat is het rel=”alternate” hreflang=”x” attribuut?

Het rel="alternate" hreflang="x” attribuut wordt gebruikt om aan te geven in welke taal jouw content is opgesteld en voor welke geografische regio het bestemd is.

Vaak wordt het rel="alternate" hreflang="x” attribuut onjuist de rel="alternate" hreflang="x” tag genoemd. Ten behoeve van de leesbaarheid noemen we dit het hreflang attribuut vanaf hier.

Als je een website hebt die in meerdere talen beschikbaar is dan is het hreflang attribuut essentieel om zoekmachines te helpen bij het tonen van jouw content aan hun gebruikers. Op dit moment ondersteunen enkel Google en Yandex het hreflang attribuut.

Waarom is het hreflang attribuut van belang?

Indien jouw website in meerdere talen beschikbaar is dan wil je dat zoekmachines de juiste taalvariant aan de juiste doelgroep tonen. Om zoekmachines hierbij te helpen maak je gebruik van het hreflang attribuut om aan te geven in welke taal de content is opgesteld en optioneel voor welke geografische regio het bestemd is.

Stel je voor dat je je in twee talen tot je klanten richt: Nederlands en Frans. Je hebt je content in beide talen opgesteld en je wil dit vervolgens duidelijk maken aan zoekmachines. De manier om dit te doen is via het hreflang attribuut (nl en fr in dit voorbeeld).

Een ander voorbeeld voor het hreflang attribuut is geografische targeting. Stel je voor dat je je richt op Nederlands-sprekende klanten in Nederland en België. In dat geval kan je gebruik maken van de combinatie van taal en geografische regio. Via het hreflang attribuut vermeld je beide varianten (nl-nl en nl-be in dit voorbeeld).

Los van het feit dat dit zoekmachines helpt om de juiste variant te tonen aan de zoekmachine gebruikers voorkomt het hreflang attribuut ook duplicate content problemen. Dit is met name van belang wanneer je je met dezelfde taal tot verschillende geografische regio’s richt (zoals in het voorbeeld met Nederland en België hierboven). In dergelijke gevallen is het van groot belang om het onderscheid duidelijk te maken, omdat de content anders identiek lijkt voor zoekmachines.

De anatomie van het hreflang attribuut

Laten we eens een kijkje nemen hoe het hreflang attribuut eruit ziet. Een voorbeeld:

<link rel="alternate" hreflang="nl" href="https://www.example.nl/" />

We lopen er stap-voor-stap doorheen:

  1. Het link rel="alternate" gedeelte maakt duidelijk dat het hier een pagina relatie betreft. In dit artikel richten we ons op het hreflang attribuut, maar er bestaan ook andere pagina relaties zoals voor mobiele websites, paginering en AMP varianten.
  2. Het hreflang="nl" gedeelte beschrijft de doelgroep. De definitie van de taal of een combinatie van taal en regio.
  3. Het href gedeelte beschrijft de URL van de pagina welke bestemd is voor de doelgroep zoals beschreven in het voorgaande gedeelte.

Hoe implementeer je het hreflang attribuut

Het hreflang attribuut kan op de volgende manieren geïmplementeerd worden:

  1. Middels het link element in de <head> sectie van jouw HTML pagina’s
  2. In de HTTP header
  3. In de XML sitemap

Doorgaans is de implementatie middels de <head> sectie van jouw HTML pagina’s het eenvoudigst.

Wanneer je het hreflang attribuut definieert moet je niet enkel de URL van de huidige variant vermelden, maar ook de gelokaliseerde varianten. Stel dat je een pagina in het Nederlands en het Frans hebt opgesteld, dan wordt de volledige hreflang definitie op beide pagina’s als volgt:

<link rel=”alternate” hreflang=”nl” href=”https://www.example.nl/” />
<link rel=”alternate” hreflang=”fr” href=”https://www.example.fr/” />

Daarnaast kan je ook een algemene (“fallback”) variant beschikbaar maken via de x-default waarde. Deze wordt dan getoond aan alle gebruikers waar je je niet specifiek tot richt.

Best practices voor het hreflang attribuut

De handigste manier om best practices voor het hreflang attribuut uit te leggen is middels een voorbeeld. Stel je voor dat we een meertalige website hebben waarin we met twee talen (Nederlands en Frans) ons specifiek richten op drie landen: Nederland, België en Frankrijk.

De volledige definitie van het hreflang attribuut is dan als volgt:

<link rel=”alternate” href=”https://www.example.nl/” hreflang=”nl-nl” />
<link rel=”alternate” href=”https://www.example.be/nl/” hreflang=”nl-be” />
<link rel=”alternate” href=”https://www.example.fr/” hreflang=”fr-fr” />
<link rel=”alternate” href=”https://www.example.be/fr/” hreflang=”fr-be” />
<link rel=”alternate” href=”https://www.example.nl/” hreflang=”x-default” />

Verwijs naar de pagina zelf, en de taalvarianten

We kunnen dit niet vaak genoeg herhalen: het hreflang attribuut moet zowel naar de huidige pagina verwijzen als naar de taalvarianten.

Als we naar de homepage voor Nederland in het voorbeeld hierboven kijken (https://www.example.nl/) dan zijn de vertaalde varianten:

  • https://www.example.be/nl/
  • https://www.example.fr/
  • https://www.example.be/fr/

Wederkerende hreflang attribuut verwijzingen

Iedere hreflang verwijzing moet wederkerend zijn. Dit betekent dat iedere variant naar de andere varianten verwijst.

Gebruik correcte taal- en regiodefinities

De waarde van het hreflang attribuut bestaat uit de taal (in ISO 639-1 formaat) en optioneel de geografische regio (in ISO 3166-1 Alpha 2 formaat).

Definieer eerst de taal, en dan optioneel de regio. Als je het verkeerd-om doet dan begrijpen zoekmachines de waarde van het hreflang attribuut niet.

Daarnaast is het niet mogelijk om een geografische regio te definiëren zonder een taaldefinitie. Kortom, de volgende definitie is ongeldig en mag NIET gebruikt worden:
<link rel="alternate" hreflang="us" href="https://www.example.com/" />

Maak gebruik van hreflang=”x-default”

Maak altijd gebruik van de fallback definitie via hreflang=”x-default”.

In het bovenstaande voorbeeld zien we de volgende definitie:

<link rel=”alternate” hreflang=”x-default” href=”https://www.example.nl/” />

Dit betekent dat https://www.example.nl/ de algemene fallback is voor gebruikers met andere talen en/of afkomstig uit andere landen. Indien mogelijk is het aan te raden om hiervoor een veelgebruikte taal zoals het Engels te hanteren.

Het hreflang attribuut en de canonical URL

Gebruik maken van het hreflang attribuut vervangt niet de toepassing van de canonical URL. Beide moeten gedefinieerd zijn. Bijvoorbeeld:

<link rel=”canonical” href=”http://www.example.nl/” />
<link rel=”alternate” hreflang=”nl-nl” href=”https://www.example.nl/” />
<link rel=”alternate” hreflang=”nl-be” href=”https://www.example.be/nl/” />

In dit voorbeeld is de Belgische pagina (https://www.example.be/nl/) de alternatieve variant voor de huidige pagina. Op die pagina is de definitie als volgt:

<link rel=”canonical” href=”http://www.example.be/nl/” />
<link rel=”alternate” hreflang=”nl-be” href=”https://www.example.be/nl/” />
<link rel=”alternate” hreflang=”nl-nl” href=”https://www.example.nl/” />

Maar wanneer de canonical URL naar een andere pagina verwijst dan de huidige dan MOET het hreflang attribuut dit ook doen. Bijvoorbeeld, als https://www.example.nl/home een alternatieve URL is voor https://www.example.nl/ dan is dit hoe de volledige definitie voor de /home variant eruit ziet:

<link rel=”canonical” href=”http://www.example.nl/” />
<link rel=”alternate” href=”https://www.example.nl/” hreflang=”nl-nl” />
<link rel=”alternate” href=”https://www.example.be/nl/” hreflang=”nl-be” />
<link rel=”alternate” href=”https://www.example.fr/” hreflang=”fr-fr” />
<link rel=”alternate” href=”https://www.example.be/fr/” hreflang=”fr-be” />
<link rel=”alternate” href=”https://www.example.nl/” hreflang=”x-default” />

Vervolgens moeten https://www.example.be/nl/, https://www.example.be/fr/ en https://www.example.fr/ allen verwijzen naar de Nederlandse variant middels <link rel="alternate" hreflang="nl-nl" href="https://www.example.nl/" />.

Samenvattend: de niet-canonical URL (/home in dit voorbeeld) wordt nooit gehanteerd in de definitie van het hreflang attribuut.

Absolute URLs

Hoewel niet in strijd met de specificaties van het link-element is de algemene consensus dat het gebruik van relatieve URLs in het hreflang attribuut vermeden moet worden. Relatieve URLs hebben een grotere kans verkeerd geïnterpreteerd te worden door zoekmachines. Dezelfde best practice geldt ook voor andere toepassingen van het link-element: canonical URL, pagination attributen, AMP en het mobile attribuut.

Vertalen is niet voldoende

Bij meertalige websites gaat het niet enkel om het vertalen van de content. Het draait allemaal om het bieden van een volledig gelokaliseerde ervaring, inclusief cultuurspecifieke verwijzingen, munteenheden, tijdzones en alle andere zaken die de website authentiek maken voor de lokale doelgroep.

Veelgestelde vragen over het hreflang attribuut

  1. Waarom wordt mijn hreflang attribuut genegeerd door zoekmachines?
  2. Kan ik meerdere hreflang attributen naar dezelfde pagina laten verwijzen?

1. Waarom wordt mijn hreflang attribuut genegeerd door zoekmachines?

Het hreflang attribuut is een signaal, niet een directive. Zoekmachines zijn daarom niet verplicht om jouw hreflang attribuut definities te volgen, hoewel ze dit meestal wel doen.

2. Kan ik meerdere hreflang attributen naar dezelfde pagina laten verwijzen?

Ja, je kan middels verschillende hreflang attributen voor dezelfde pagina duidelijk maken dat de pagina bedoeld is voor meerdere regio’s. Als je bijvoorbeeld een pagina hebt die zowel voor Nederlanders als Belgen getoond moet worden dan doe je dat als volgt:

<link rel=”alternate” hreflang=”nl-nl” href=”https://www.example.nl/” />
<link rel=”alternate” hreflang=”nl-be” href=”https://www.example.nl/” />

Daarnaast kan je ook een algemeen hreflang attribuut opnemen voor Nederlands sprekende gebruikers:

<link rel="alternate" hreflang="nl" href="https://www.example.nl/" />

Bronnen

  1. Google guidelines

Waarom wachten? Probeer het direct.

Eindelijk doorhebben wat er werkelijk gebeurt op jouw website.
Gelieve een geldige domeinnaam (www.voorbeeld.nl) op te geven.