MeerTalen Website SEO configureren met Hugo

Wat doe je met `canonical`, `lang` en `hreflang`

Inhoud

Je Hugo website vertalen kan je Google- en Bing-ranking verbeteren - maar alleen als de vertaalde inhoud van hoge kwaliteit is, gelokaliseerd is en correct is opgesteld voor multilingual SEO.

Gelokaliseerde pagina’s (niet alleen vertaald, maar cultureel aangepast) verminderen vaak de bounce rate, verhogen de tijd op de site en verbeteren conversies. Dit zijn gebruikersgedragssignalen die positief kunnen invloed hebben op je SEO-rankings.

veel verschillende vlaggen voor een administratiegebouw

Hugo is een statische websitegenerator. In essentie converteert het Markdown bestanden naar HTML-pagina’s op een zeer configureerbare manier en is vrij snel. Voor de details zie hier Hugo Cheat Sheet, je bent ook welkom om de lijst met Hugo-gerelateerde artikelen aan het einde van deze pagina te verkennen.

Hoofdvraag: Moet je vertalen voor SEO?

Scenario Vertaling helpt SEO? Opmerkingen
Menselijke vertaling + gelokaliseerd + SEO-gestructureerd ✅ Ja, sterke voordelen Beste optie
Hoge kwaliteit AI-vertaling + bewerken + hreflang ✅ Potentieel Kan ranken als kwaliteit goed is
Automatische vertaling alleen + canonical ❌ Nee Rankt niet — alleen gebruikt voor UX
Automatische vertaling + geen canonical of hreflang ⚠️ Risico Kan duplicatenstraffen veroorzaken

Vereiste HTML voor sites met letterlijke (geautomatiseerde) vertalingen

  1. Elke pagina moet het lang-attribuut in de html-tag hebben, bijvoorbeeld:
<html lang="de">
  1. Elke pagina moet een lijst met alternatieve links voor deze pagina in andere talen bevatten, bijvoorbeeld, de HTML hieronder beschrijft alternatieve URLs voor dezelfde of vergelijkbare pagina in drie talen:
<link rel="alternate" hreflang="en" href="https://www.glukhov.org/post/2025/10/multi-language-website-seo-with-hugo/">
<link rel="alternate" hreflang="de" href="https://www.glukhov.org/de/post/2025/10/multi-language-website-seo-with-hugo/">
<link rel="alternate" hreflang="ru" href="https://www.glukhov.org/ru/post/2025/10/multi-language-website-seo-with-hugo/">
  1. Elke vertaalde websitepagina moet de canonical URL voor deze pagina opgeven (deze uit de eerste of taal van de originele pagina), zoals:
<link rel="canonical" href="https://www.glukhov.org/post/2025/10/multi-language-website-seo-with-hugo/">

Dit zal zoekmachines adviseren om niet-canonical pagina’s te negeren bij het indexeren. Sommige zoekmachines negeren dit natuurlijk wel en indexeren alle pagina’s.

Voor professioneel / handmatig vertaalde webpagina’s

Niet opgeven van <link rel="canonical" kan ervoor zorgen dat zoekmachines duplicatenstraffen opleggen. Maar als je handmatig vertaalt, of een professionele vertaling bestelt, kun je hopen dat zoekmachines je niet-canonical pagina als origineel aanvaarden.

Hugo-sjablonen voor gelokaliseerde websites

We moeten onthouden dat de Hugo website theme mogelijk al ondersteuning biedt voor al deze functies.

<html lang=…

Open het bestand layouts/_default/baseof.html in je Hugo website-map of in de map van je thema en zorg ervoor dat er iets staat zoals:

<!DOCTYPE html>
<html class="no-js" lang="{{ .Site.Language.Lang }}">
<head>
...
	{{ partial "seo-localise.html" . }}	
</head>
...

Open nu het bestand layouts/partials/seo-localise.html en voeg daar deze HTML-sjablooncode toe:

{{ $defaultLang := .Site.Params.defaultContentLanguage | default "en" }}
{{ $canonical := .Permalink }}

{{ if .IsTranslated }}
  {{ $original := .Translations.GetByLang $defaultLang }}
  {{ if $original }}
    {{ $canonical = $original.Permalink }}
  {{ end }}

{{ end }}

<!-- Canonical URL -->
<link rel="canonical" href="{{ $canonical }}">

<!-- Hreflang Alternate Tags -->
{{ range .AllTranslations }}
    <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}

Als je je website handmatig vertaalt, kan deze code er ongeveer zo uitzien:

{{ $canonical := .Permalink }}

<!-- Canonical URL -->
<link rel="canonical" href="{{ $canonical }}">

<!-- Hreflang Alternate Tags -->
{{ range .AllTranslations }}
    <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}

config.toml

In je config.toml, zorg er dan voor dat je het volgende instelt:

# configureer talen op je website

defaultContentLanguage = "en"

[languages]
  [languages.en]
    weight = 1
    languageName = "Engels"

  [languages.es]
    weight = 2
    languageName = "Español"

  [languages.fr]
    weight = 3
    languageName = "Français"

Pas bovenstaande aan op basis van de talen van je site.

Voer nu de opdracht hugo uit om een website te genereren, en hugo serve om de ontwikkelaarswebsite te starten, open de website en bekijk de bron van een pagina. Zorg ervoor dat alle <html>- en <link>-tags de juiste attributen hebben.