使用 Hugo 配置多语言网站的 SEO

“如何处理 `canonical`、`lang` 和 `hreflang`”

目录

将您的 Hugo 网站 翻译成其他语言可以提高在 Google 和 Bing 上的排名 - 但前提是翻译内容质量高、本地化得当，并且为多语言 SEO 做好结构优化。

本地化页面（不仅仅是翻译，而是文化适应）通常可以降低跳出率、增加用户停留时间并提高转化率。这些是用户行为信号，可以对您的 SEO 排名产生积极影响。

许多不同国家的旗帜在行政大楼前

Hugo 是一个静态网站生成器。本质上，它以非常可配置的方式将 Markdown 文件转换为 HTML 页面，并且速度非常快。有关详细信息，请参见此处 Hugo 快速参考，您也可以查看页面底部的 Hugo 相关文章列表。

主要问题：是否应为 SEO 翻译？

情景 翻译有助于 SEO 吗？ 备注
人工翻译 + 本地化 + SEO 结构 ✅ 是，有显著好处 最佳选择
高质量 AI 翻译 + 编辑 + hreflang ✅ 潜在可能 如果质量好，可以排名
仅自动翻译 + canonical ❌ 否 不会排名，仅用于用户体验
自动翻译 + 没有 canonical 或 hreflang ⚠️ 风险 可能触发重复内容处罚

对于使用字面（自动化）翻译的网站所需的 HTML

  1. 每个页面的 <html> 标签中必须包含 lang 属性，例如：
<html lang="de">
  1. 每个页面必须包含其他语言的替代链接列表，例如，以下 HTML 描述了相同或类似页面在三种语言中的替代 URL：
<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. 每个翻译后的网站页面必须指定该页面的 canonical URL（原始页面或第一语言的页面），例如：
<link rel="canonical" href="https://www.glukhov.org/post/2025/10/multi-language-website-seo-with-hugo/">

这将告诉搜索引擎跳过非 canonical 页面的索引。当然，有些搜索引擎可能会忽略这一点，并索引所有页面。

对于专业/手动翻译的网页

不指定 <link rel="canonical" 可能会导致搜索引擎施加重复内容处罚。但如果您手动翻译网站页面，或订购专业翻译，您可以希望搜索引擎接受您的非 canonical 页面作为原始页面。

用于本地化网站的 Hugo 模板

我们应该记住，Hugo 网站主题 可能已经支持了所有这些功能。

<html lang=…

打开文件 layouts/_default/baseof.html，在您的 Hugo 网站文件夹或主题文件夹中，并确保有如下内容：

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

现在打开文件 layouts/partials/seo-localise.html，并将以下 HTML 模板代码放入其中：

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

如果您手动翻译网站，此代码可能如下所示：

{{ $canonical := .Permalink }}

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

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

config.toml

在您的 config.toml 中，确保设置如下：

# 配置网站上的语言

defaultContentLanguage = "en"

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

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

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

根据您的网站语言进行调整。

现在执行 hugo 命令生成网站，然后执行 hugo serve 启动开发网站主机，打开网站并查看页面源代码。确保所有 <html> 和 <link> 标签都有正确的属性。

有用的链接：Hugo 静态网站生成器

有用的链接：Markdown