Overslaan en naar de inhoud gaan

Hoe moet ik de hreflang-tag implementeren?

In De hreflang-tag: onmisbaar in uw internationale SEO vertelden we u al wat de hreflang-tag is en wanneer u ze dient te implementeren. In dit artikel gaan we dieper in op hoe u dit attribuut kunt toevoegen op uw websites. 

De Hreflang-tag implementeren: 3 methodes

Hreflang implementeren kan op 3 manieren en elk manier heeft z’n voor- en nadelen:

  • via een link element in HTML <head>
  • via de HTTP header
  • via de XML sitemap 

Vóór u van start gaat, is het belangrijk dat u besluit welke talen u wil targeten. Begin met de generische vormen  en voeg daarna land-specifieke varianten toe. Bijvoorbeeld, als u Nederlandstalige en Franstalige gebruikers wil targeten, begin dan met bedrijf.com/nl en bedrijf.com/fr. Als u later dan nog specifiek België en Nederland wilt targeten, dan voegt u bedrijf.com/nl-nl, bedrijf.com/nl-be en bedrijf.com/fr-be toe. Gebruikers in Frankrijk zullen dan, als het goed is, op de generische variant terechtkomen. 

Wanneer u gaat implementeren, zijn er 3 basisprincipes die u steeds in acht moet houden:

  1. Gebruik de correcte hreflang attributen. Dat wil zeggen: gebruik de correcte afkorting voor talen en landen. Voor talen is dat het ISO 639-1 formaat. Voor de regio/het land is dat ISO 3166-1 alpha 2 formaat. Vergeet ook nooit dat u eerst de taal en dan de regio moet invullen. 
  2. Elke URL moet ook naar zichzelf verwijzen. Een beetje zoals een lift ook een knop heeft voor de verdieping waar iemand zich op bevindt. Bijvoorbeeld: als u 4 taalvarianten heeft, dan heeft elke pagina 4 tags: een link naar elke taalversie inclusief naar zichzelf.
  3. Elke URL heeft een link nodig naar elke taalvariant van die pagina.

hreflang url verwijzingen icon

Link element in HTML <head>

De eerste methode is om hreflang code in te voegen in de <head> sectie van elke pagina

hreflang link element in HTML code voorbeeld

Zoals we al zeiden, moet elke variatie naar elke andere variatie verwijzen. Als u nu 20 taalvarianten nodig zou hebben, dan wordt uw code erg zwaar en vertraagt uw website. Elke gebruiker download (van server naar browser) al deze code, maar heeft er slechts een fractie van nodig. Ook het CMS wordt meer onder druk gezet, het moet verschillende keren de database aanspreken om deze links te genereren.

Deze methode is wel ideaal voor de zoekmachines, maar minder geschikt voor de gebruiker. Dus, voor websites met veel taalvarianten kiest u beter een andere methode. 

Hreflang in de HTTP header

Deze methode dient specifiek voor alle niet-HTML inhoud, zoals PDF’s.  

Ook deze methode voegt extra gewicht toe aan uw website en is dus wederom niet ideaal als u veel taalvarianten heeft. 

hreflang in de HTTP header code voorbeeld

Via de XML-sitemap

Deze methode is feitelijk de beste methode, hoewel ze ook zeer barok overkomt. Het komt er op neer dat u elke URL, hun zelf-verwijzing en elke variant opneemt in de XML-sitemap. Voor ons voorbeeld met Engels, Nederlands, Duits en Engels komt het neer op onderstaande code:

hreflang via XML sitemap code voorbeeld

Het lijkt zeer veel werk, maar het voordeel is dat het veel minder moeite kost wanneer er aanpassingen moeten gebeuren aan de website. De aanpassingen moeten dan niet pagina per pagina gebeuren, maar enkel in de XML-sitemap. Deze methode is ook het minst belastend voor gebruikers en het CMS (want de database wordt veel minder aangesproken). 

In ons voorbeeld hebben we nu 4 talen getarget. Betekent dat dat gebruikers met een andere taalinstelling uw website niet kunnen bereiken? Hoegenaamd niet! Hiervoor bestaat een specifiek hreflang attribuut: x-default. 

X-Default

Het x-default attribuut stuurt een gebruiker wiens taalinstelling niet overeenkomen met uw taalvarianten naar de variant van uw keuze. Dit is dan een extra lijn in uw code. In ons voorbeeld van 4 talen zijn dat dan 5 links.  

hreflang x-default code voorbeeld

Deze link verwijst dan naar dezelfde URL als de EN variant. 

Over het gebruik van rel=canonical

De canonical tag wordt gebruikt om aan de zoekmachine aan te geven dat gelijkaardige URL’s eigenlijk dezelfde zijn. In se heeft het een gelijkaardige functie als de hreflang tag, namelijk voorkomen dat de zoekmachine dezelfde content die in meerdere URL’s te vinden is of zelfs op andere websites ten onrechte als duplicate content bestempeld. De hreflang-tag vervult natuurlijk nog een functie die de canonical niet vervult, namelijk de gebruiker naar de juiste taalvariant leiden.

Op  de homepage van de EN-versie van ons voorbeeld ziet dat er zo uit: 

hreflang rel=canonical EN code voorbeeld

Op de homepage van de NL-versie moet u de canonical tag aanpassen als volgt: 

hreflang rel=canonical NL code voorbeeld

En zo moet u de homepage van elke taalvariant aanpassen. 

Vaak voorkomende fouten bij hreflang implementatie

Als u het hreflang attribuut verkeerd toepast, dan kan het zijn dat Google de code negeert of zelfs afstraft voor de hele website. Let daarom op de volgende meest voorkomende fouten: 

  • Een underscore ( nl_be ✗) gebruiken tussen taal en land in plaats van een streepje ( nl-be ✓) 
  • Taal en land omwisselen: be-nl ✗, in plaats van nl-be ✓
  • Enkel een landcode gebruiken (/be ✗)
  • Verkeerde taal en/of landcodes gebruiken
  • Geen zelf-verwijzingsattribuut
  • Meer dan 1 URL voor dezelfde hreflang waarde
  • De hreflang link verwijst naar een doorverwijspagina
  • Dubbel gebruik van x-default
  • EU als landcode gebruiken (de EU is geen land)
  • UK gebruiken als landcode in plaats van GB
  • Conflicterende hreflang en rel=canoncial tags
  • Gebroken hreflang link

Nuttige tools voor het implementeren van de hreflang-tag

Tot slot bieden we u ook een aantal nuttige tools om deze taak tot een goed einde te brengen. 

hreflang tag generator

Deze generator is gemaakt door Aleyda Solis die ook veel over dit onderwerp schreef. De tool genereert link elementen. Ook als u link elementen niet gebruikt, kan het nuttig zijn om voorbeeld code te genereren. 

hreflang XML sitemap generator

The Media Flow heeft een hreflang XML sitemap generator gecreëerd. Upload een excel (CSV) bestand met URL’s per taal en u krijgt een XML sitemap terug. Een goede stap als u de derde methode gaat toepassen. 

Let er op dat u elke taal en x-default in een aparte kolom zet.  

hreflang tag validator

Deze tool dient om uw link elementen te valideren indien u de eerste 2 methodes toegepast heeft. De beste hiervoor is  flang, by DejanSEO. Voor het valideren van de sitemap zijn er nog geen tools beschikbaar


Let's get together

Zeg JA tegen onze mailinglist !
We laten enkel van ons horen als we écht iets nieuws te tonen hebben. En er is ook nog altijd onze private policy natuurlijk.

CAPTCHA Deze vraag is om te controleren dat u een mens bent, om geautomatiseerde invoer (spam) te voorkomen.