Configuration de l'optimisation SEO d'un site web multilingue avec Hugo

Que faire avec `canonical`, `lang` et `hreflang`

Sommaire

Traduire votre site Hugo peut améliorer votre classement sur Google et Bing - mais uniquement si le contenu traduit est de haute qualité, localisé et correctement structuré pour le référencement multilingue.

Les pages localisées (et non seulement traduites, mais également adaptées culturellement) réduisent souvent le taux de rebond, augmentent le temps passé sur le site et améliorent les conversions. Ce sont des signaux de comportement des utilisateurs qui peuvent positivement affecter votre classement SEO.

beaucoup de drapeaux de différents pays devant un bâtiment administratif

Hugo est un générateur de site web statique. En essence, il convertit les fichiers Markdown en pages HTML d’une manière très configurable et est assez rapide. Pour plus de détails, veuillez consulter ici Fiche de Référence Hugo, vous pouvez également explorer la liste des articles liés à Hugo en bas de cette page.

Question principale : Devriez-vous traduire pour le SEO ?

Scénario La traduction aide-t-elle le SEO ? Notes
Traduction humaine + localisation + structurée pour le SEO ✅ Oui, bénéfice fort Meilleure option
Traduction de haute qualité par IA + révision + hreflang ✅ Potentiellement Peut être classée si la qualité est bonne
Traduction automatique uniquement + canonical ❌ Non Ne sera pas classée — utilisée uniquement pour l’UX
Traduction automatique + aucun canonical ou hreflang ⚠️ Risque Peut déclencher des pénalités de duplication

HTML requis pour les sites avec des traductions littérales (automatisées)

  1. Chaque page doit avoir l’attribut lang dans la balise html, par exemple :
<html lang="de">
  1. Chaque page doit avoir une liste de liens alternatifs pour cette page en d’autres langues, par exemple, le HTML suivant décrit les URLs alternatives pour la même ou une page similaire en trois langues :
<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. Chaque page du site web traduit doit spécifier l’URL canonique pour cette page (celle du premier ou de la langue originale), comme :
<link rel="canonical" href="https://www.glukhov.org/post/2025/10/multi-language-website-seo-with-hugo/">

Cela informera les moteurs de recherche de ne pas indexer les pages non canoniques. Certains moteurs de recherche peuvent toutefois ignorer cela et indexer toutes les pages.

Pour les pages web traduites professionnellement / manuellement

Ne pas spécifier <link rel="canonical" peut entraîner des pénalités de duplication par les moteurs de recherche. Mais si vous traduisez manuellement vos pages web ou faites appel à un professionnel, vous pouvez espérer que les moteurs de recherche accepteront votre page non canonique comme originale.

Modèles Hugo pour les sites localisés

Nous devons garder à l’esprit que le thème Hugo pourrait déjà supporter tout cela.

<html lang=…

Ouvrez le fichier layouts/_default/baseof.html soit dans le dossier de votre site Hugo soit dans le dossier de votre thème et assurez-vous qu’il y a quelque chose comme :

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

Maintenant, ouvrez le fichier layouts/partials/seo-localise.html et mettez-y ce code de modèle HTML :

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

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

{{ end }}

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

<!-- Balises alternatives hreflang -->
{{ range .AllTranslations }}
    <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}

Si vous traduisez manuellement votre site web, ce code pourrait ressembler à :

{{ $canonical := .Permalink }}

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

<!-- Balises alternatives hreflang -->
{{ range .AllTranslations }}
    <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}

config.toml

Dans votre config.toml, assurez-vous de configurer :

# configurez les langues sur votre site web

defaultContentLanguage = "en"

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

  [languages.es]
    weight = 2
    languageName = "Espagnol"

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

Ajustez cela en fonction des langues de votre site.

Exécutez maintenant la commande hugo pour générer un site web, puis hugo serve pour lancer le serveur web de développement, ouvrez le site web et consultez le code source d’une page. Assurez-vous que tous ces balises <html> et <link> ont les attributs corrects.

Liens utiles : Générateur de site web statique Hugo

Liens utiles : Markdown