Configuring Multi-Language Website SEO with Hugo

What to do with `canonical`, `lang` and `hreflang`

Page content

Translating your Hugo website can improve your Google and Bing ranking - but only if the translated content is high quality, localized, and properly structured for multilingual SEO.

Localized pages (not just translated, but culturally adapted) often reduce bounce rates, increase time-on-site and improve conversions. These are user behavior signals that can positively affect your SEO rankings.

a lot of various country flags in front of administrative building

Hugo is a static website generator. In the essence it converts the Markdown files to Html pages in a very configurable way and is pretty fast. For the details please see here Hugo Cheat Sheet, you are also welcome to explore list of Hugo-related articles on the bottom of this page.

Main question: Should You Translate for SEO?

Scenario Translation Helps SEO? Notes
Human translation + localized + SEO structured ✅ Yes, strong benefit Best option
High-quality AI translation + editing + hreflang ✅ Potentially Can rank if quality is good
Auto-translation only + canonical ❌ No Won’t rank — used only for UX
Auto-translation + no canonical or hreflang ⚠️ Risk May trigger duplicate penalties

Required HTML for sites with literal (automated) translations

  1. Each page must have lang attribute in html tag, for example:
<html lang="de">
  1. Each page must have list of alternative links for this page in other languages, for example, html below is descibing alternative urls for same or similar page in three languages:
<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. Each translated website page must specify canonical url for this page (the one in first or language of original page), like:
<link rel="canonical" href="https://www.glukhov.org/post/2025/10/multi-language-website-seo-with-hugo/">

This will advise search engines to skip indexing non-canonical pages. Some search engines of course can ignore this, and index all pages.

For professionally / manually translated web page

Not specifying <link rel="canonical" can cause search engine to impose duplication penalties. But if you do manual translation of your website pages, or order professional one, you can hope search engines would accept your non-canonical page as original.

Hugo templates for localised websites

We should keep in mind that the Hugo website theme might be supporting all this already.

<html lang=…

Open file layouts/_default/baseof.html either in your Hugo website folder or your theme’s folder and make sure there is something like:

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

Now open file layouts/partials/seo-localise.html and put there this html template code:

{{ $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 }}

If you translate your website manually, this code might be looking like

{{ $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 your config.toml, make sure you set:

# configure languages on your website

defaultContentLanguage = "en"

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

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

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

Adjust above based on your site’s languages.

Now execute hugo command to generate a website, then hugo serve to run developer web site host, open website and view a page source. Make sure all those <html> and <link> tags have proper attributes.