Wat is hreflang?

Hreflang is een belangrijke HTML-tag voor websites met content in meerdere talen. Met hreflang-tags kunnen zoekmachines de content van je website weergeven in de voorkeurstaal van de gebruiker. Het implementeren van hreflang-tags is cruciaal voor zowel de gebruikerservaring als de zichtbaarheid van je website.In deze handleiding voor beginners bespreken we de voordelen van hreflang-tags en laten we zien hoe je ze in je website kunt invoegen.

  

Waarom zijn hreflang-tags belangrijk voor SEO?

Hreflang-tags spelen een cruciale rol voor zoekmachineoptimalisatie (SEO) als je gebruikers in meerdere landen wilt bereiken. De tag zorgt er namelijk voor dat de zoekmachines de content in de juiste taal weergeven en helpt je dubbele content te voorkomen.  

Content in meerdere talen tonen

Overweeg je om een meertalige webshop te maken waarbij je aan klanten in verschillende landen verkoopt? Het is essentieel om hreflang-tags toe te voegen, aangezien zoekmachines deze gebruiken om te bepalen in welke taal content moet worden weergegeven.

Laten we zeggen dat je Netflix bezoekt vanuit Spanje. Zelfs als je Netflix.com in het zoekveld invoert, zie je de inhoud van de website waarschijnlijk in het Spaans. Dit is hoe hreflang-tags zouden moeten werken als ze correct zijn ingevoegd. 

Hetzelfde geldt voor de content op je website of in je webshop. Als je pagina hreflang-tags mist, loop je het risico dat je vertaalde content niet aan de juiste gebruikers wordt getoond.

Voorkom dubbele content

Hreflang kan je ook helpen voorkomen dat zoekmachines de content van je vertaalde pagina’s registreren als duplicate content. Duplicate content is content die identiek is aan content die al op andere pagina’s bestaat. Dit geldt zowel voor content die identiek is aan de content op je eigen website als voor content op andere websites. Dubbele content is een probleem omdat websites met content die niet uniek is het risico lopen een lagere rang te krijgen in de zoekresultaten.

Hreflang-tags zijn belangrijk voor duplicate content omdat ze zoekmachines een signaal geven dat de verschillende taalversies van de content gericht zijn op gebruikers in meerdere landen of regio’s. Als je bijvoorbeeld een productbeschrijving hebt geschreven voor een handgemaakte keramische vaas die in je webshop wordt verkocht en je hebt de beschrijving laten vertalen in het Zweeds, Noors en Fins, dan voorkomt de hreflang-tag dat je bijna identieke teksten als duplicate content worden geregistreerd.

Hoe zien hreflang-tags eruit?

Hreflang-tags hebben een eenvoudige en gestandaardiseerde syntaxis. Een goed begrip van de hreflang-structuur is essentieel bij het implementeren van de juiste tags op je website. Hieronder bekijken we drie specifieke voorbeelden van hreflang-tags die in verschillende contexten kunnen worden gebruikt.

Hreflang – 3 voorbeelden

1. Laten we ervan uitgaan dat je een reisblog hebt waar je spannende berichten schrijft over al je reizen in het Nederlands, Spaans en Deens. Je hebt veel tijd besteed aan het schrijven en vertalen, dus je wilt er zeker van zijn dat je blogberichten correct worden weergegeven in zoekmachines. Gebruik in dit geval deze hreflang-tags om onderscheid te maken tussen de drie:  
   
   <link rel=”alternate” href=”https://voorbeeld.com/nl/page” hreflang=”nl”> 
   <link rel=”alternate” href=”https://voorbeeld.com/es/page” hreflang=”es”> 
   <link rel=”alternate” href=”https://voorbeeld.com/da/page” hreflang=”da”>  
   
2. Een ander voorbeeld is een tandartspraktijk in Spanje die onlangs de content op zijn website heeft vertaald naar het Portugees in de hoop Portugese klanten aan te trekken. Als de tandartspraktijk ook Engelstalige pagina’s heeft, moeten de hreflang-tags er als volgt uitzien:  
   
   <link rel=”alternate” href=”https://voorbeeld.com/en/page” hreflang=”en”> 
   <link rel=”alternate” href=”https://voorbeeld.com/es/page” hreflang=”es”> 
   <link rel=”alternate” href=”https://voorbeeld.com/pt/page” hreflang=”pt”> 
   
3. Laten we tot slot een voorbeeld bekijken waarbij verschillende tags nodig zijn voor verschillende varianten van dezelfde taal. Stel je een groot online nieuwsplatform voor dat artikelen schrijft in Brits Engels, Amerikaans Engels en Indiaas Engels. Deze varianten van het Engels hebben de volgende regionale taalcodes: EN-GB, EN-US en EN-IN.
   
   De hreflang-tags van dit nieuwsplatform zouden er als volgt uit moeten zien: 
    
   <link rel=”alternate” href=”https://voorbeeld.com/en-gb/page” hreflang=”en-gb”> 
   <link rel=”alternate” href=”https://voorbeeld.com/en-in/page” hreflang=”en-in”> 
   <link rel=”alternate” href=”https://voorbeeld.com/en-us/page” hreflang=”en-us”>

Hoe worden hreflang-tags opgebouwd?

We hebben net drie voorbeelden gezien van hoe hreflang tags eruit kunnen zien. Nu gaan we er een opsplitsen in kleinere delen en bekijken wat de afzonderlijke delen betekenen.

Laten we eens kijken naar een tag van de reisblog uit het voorbeeld in de vorige sectie.

<link rel=”alternate” href=”https://voorbeeld.com/es/page” hreflang=”es”>

link rel=“alternate”: De link in deze tag is een alternatieve versie van deze pagina.

hreflang=“es”: Het is alternatief omdat de content in een andere taal is geschreven en die taal is Spaans.

href=“https://voorbeeld.com/es/page”: De alternatieve pagina is te vinden op deze UR

Hreflang taalcodes

Hier zijn enkele mogelijkheden:

• Nederlands: NL
• Deens: DA
• Zweeds: SE
• Noors: NO
• Arabisch: AR
• Engels: EN
• Brits Engels: EN-GB
• Amerikaans Engels: EN-US
• Japans: JA

Je kunt taalcodes voor alle talen gemakkelijk online vinden.

Hreflang tag generator

Het eigenlijke proces om hreflang-tags te maken is vrij eenvoudig, maar als je tags voor veel talen en pagina’s moet gebruiken, kan het proces tijdrovend zijn. Hier kun je tijd besparen door een hreflang tag generator zoals deze te gebruiken.

3 tips voordat je hreflang-tags implementeert

Voordat we ons gaan verdiepen in hoe je hreflang-tags in je website kunt invoegen, kijken we eerst naar drie vuistregels die de kans op fouten minimaliseren. Hoewel de tags zelf vrij eenvoudig zijn, kunnen er gemakkelijk fouten optreden als je ze verkeerd invoegt.  

1. Hreflang tags zijn bidirectioneel: Dit betekent dat ze altijd in beide richtingen moeten wijzen. Concreet betekent dit dat als de tag op je Deense pagina naar de Franse pagina verwijst, de tag op de Franse pagina terug moet verwijzen naar de Deense pagina. Op deze manier geef je aan de zoekmachines aan dat je beide pagina’s beheert en dat de twee pagina’s aan elkaar zijn gekoppeld.
    

2. Zelfverwijzende hreflang-tags zijn een goed idee: Dit betekent in het kort dat hreflang-tags niet alleen naar andere talen moeten verwijzen, maar ook naar zichzelf. Stel dat je dezelfde categoriepagina op je online hebt in het Engels (https://voorbeeld.com/cat-food) en in het Zweeds (https://voorbeeld.com/kattmat). Elk van deze pagina’s moet dan deze hreflang-tags hebben:
    
   <link rel=”alternate” hreflang=”en” href=”https://voorbeeld.com/cat-food” /> 
    
   <link rel=”alternate” hreflang=”se” href=”https://voorbeeld.com/kattmat”/>  
    

3. Gebruik x-default tags om de gebruikerservaring te verbeteren: Deze tag is erg nuttig als je een website hebt met content in het Deens, Zweeds en Engels, maar regelmatig bezoekers hebt uit bijvoorbeeld Duitsland.
   
   Hier kun je hreflang x-default tags gebruiken om ervoor te zorgen dat je Duitstalige bezoekers naar de Engelse pagina worden geleid, die ze waarschijnlijk beter begrijpen dan de Deense.
   
   Hreflang x-default tags geven gebruikers dus een betere ervaring op je website, omdat ze niet op een pagina terechtkomen met content die ze niet begrijpen.
   
   Deze tag ziet er als volgt uit:
   
   <link rel=”alternate” hreflang=”x-default” href=”https://voorbeeld.com/” /> 
   

Hoe worden hreflang-tags geïmplementeerd?

Nu we hebben gezien hoe hreflang tags eruit zien, laten we eens kijken hoe ze worden geïmplementeerd. Dit kan op drie manieren, afhankelijk van de context en het type content..

HTML gebruiken

De meest eenvoudige manier om zoekmachines te laten weten dat je pagina in meerdere talen bestaat, is door de hreflang-tag in de HTML-code van een webpagina op te nemen. De tag moet bovenaan de code in het <head>-element worden ingevoegd.

<head>- is een container voor metadata en wordt tussen de <html> -tag en de <body> -tag geplaatst.

Hier is een voorbeeld van een pagina die beschikbaar is in het Engels, Spaans en Nederlands.

<!DOCTYPE html> 
< > 
<head> 
  <title>Je geweldige paginatitel</title> 

<link rel=”alternate” href=”https://voorbeeld.com/en/pagina” hreflang=”en”> 

<link rel=”alternate” href=”https://voorbeeld.com/es/pagina” hreflang=”es”> 

<link rel=”alternate” href=”https://voorbeeld.com/nl/pagina” hreflang=”nl”> 

 
</head> 
<body> 
 
Jouw betoverende content
 
</body> 
</html> 

Elke keer dat je een pagina vertaalt, moet een nieuwe hreflang-tag worden toegevoegd aan alle versies van de pagina. Als je de pagina bijvoorbeeld al in het Nederlands, Engels en Spaans hebt, maar besluit om hem in het Duits te vertalen, moet de Duitse hreflang-tag in de HTML-code op alle pagina’s worden ingevoegd. Dit betekent dat je nu in totaal vier tags op elke pagina hebt, omdat alle versies bidirectioneel moeten zijn en zowel naar elkaar als naar zichzelf moeten verwijzen.

Deze methode kan tijdrovend worden, vooral als je veel pagina’s en veel talen op je website hebt. Hier kan het voordelig zijn om de hreflang generator te gebruiken die we hierboven hebben genoemd.

De HTTP-header gebruiken

Als je pagina’s hebt met content die niet in HTML-indeling is, kun je de hreflang-tag voordelig invoegen in de http-header van de pagina. Een voorbeeld van dit soort content zijn PDF-bestanden.

HTTP-headercodes bevatten informatie over de gegevens die van een server naar een client worden verzonden, zoals de datum en de voorkeurstaal.

Stel dat je dezelfde PDF in drie verschillende talen hebt: Nederlands, Duits en Zweeds. De HTTP-header in elk van de bestanden zou er dan zo uit moeten zien:

HTTP/1.1 200 OK

Content soort: applicatie/pdf

Link: <https://voorbeeld.com/nl/doc.pdf>; rel=”alternate”; hreflang=”nl”  

<https://voorbeeld.com/de/doc.pdf>; rel=”alternate”; hreflang=”de”  

<https://voorbeeld.com/se/doc.pdf>; rel=”alternate”; hreflang=”se”

Via de XML-sitemap

De derde methode die je kunt gebruiken om je hreflang-tags te implementeren, is om ze in de XML-sitemap van je pagina op te nemen. Je kunt hier meer lezen over sitemaps.

Kort gezegd is een XML-sitemap een bestand dat zoekmachines voorziet van informatie over de afzonderlijke pagina’s van je website.

Het belangrijkste voordeel van deze methode is dat je al je hreflang-tags op één plaats kunt bewerken. Wanneer je de HTML-methode en de http header-methode gebruikt, moet je telkens een nieuwe tag toevoegen aan elke pagina wanneer je bestaande content vertaalt naar een nieuwe taal. Dat kan behoorlijk tijdrovend zijn.

Als je voor deze methode kiest, voeg dan een <loc>-element toe voor elke URL en voeg <xhtml:link> in voor elke taal waarin de pagina beschikbaar is.Je kunt hier de instructies van Google lezen en een voorbeeld bekijken.

HTML-lang vs Hreflang 

HTML-lang is ook een tag die kan worden geïmplementeerd om websites met content in meerdere talen te optimaliseren. Er is echter een verschil tussen de twee tags.

Het belangrijkste verschil is dat HTML-lang een tag is die in HTML wordt ingevoegd om zoekmachines en gebruikers een signaal te geven over de taal van de hele website.

Hreflang geeft meer gedetailleerde signalen af door talen op te geven op alle afzonderlijke pagina’s van je website. Dit maakt het gemakkelijker om content af te stemmen op meerdere landen en talen.

De zoekmachine van Google gebruikt geen HTML-lang. Daarom raden ze websites met content in verschillende talen aan om de hreflang-tag te gebruiken. Microsoft Bing en bepaalde schermlezers gebruiken echter HTML-lang. Het kan daarom zinvol zijn om beide te gebruiken als je je website wilt optimaliseren voor verschillende zoekmachines en schermlezers.

Hreflang-tags: van vitaal belang voor meertalige websites

Als je de gebruikerservaring wilt verbeteren en het verkeer naar je website wilt verhogen door content in meerdere talen te publiceren, is het cruciaal dat je weet hoe je hreflang-tags moet maken en implementeren. Een meertalige website biedt nieuwe kansen, nieuwe gebruikers, nieuwe lezers en meer conversies. We hopen dat deze gids je op weg helpt!