Hugoで多言語ウェブサイトのSEOを構成する

`canonical`、`lang`および`hreflang`の使い方

目次

Hugoウェブサイトの翻訳
は、GoogleやBingのランキングを向上させることができるが、翻訳されたコンテンツが高品質で、ローカライズされており、多言語SEOに適切に構成されている場合に限る。

ローカライズされたページ（単なる翻訳ではなく、文化的に適応されたもの）は、バウンスレートを低下させ、サイト滞在時間を増加させ、コンバージョンを改善する傾向にある。
これらは、SEOランキングにポジティブに影響を与えるユーザーの行動信号である。

さまざまな国際的な国旗が行政ビルの前で並んでいる

Hugo は静的ウェブサイトジェネレータである。
本質的には、Markdown ファイルを非常に設定可能な方法でHTMLページに変換し、かなり高速である。
詳細についてはこちらを参照してください Hugoチートシート。また、このページの下部にあるHugo関連の記事のリストもご参照ください。

主な質問：SEOのために翻訳すべきですか？

シナリオ 翻訳がSEOに役立つか メモ
人間による翻訳＋ローカライズ＋SEO構造化 ✅ はい、強い利点 最も良い選択肢
高品質なAI翻訳＋編集＋hreflang ✅ 有可能 質が良い場合、ランクイン可能
自動翻訳のみ＋canonical ❌ いいえ ランクインしない — UXのためにのみ使用
自動翻訳＋canonicalまたはhreflangなし ⚠️ リスク 重複ペナルティを引き起こす可能性あり

リテラル（自動）翻訳を持つサイトに必要なHTML

  1. 各ページには、htmlタグにlang属性が必要です。例えば：
<html lang="de">
  1. 各ページには、他の言語のこのページの代替リンクのリストが必要です。例えば、以下のHTMLは、同じまたは類似のページの3つの言語の代替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=…

あなたのHugoウェブサイトフォルダまたはテーマフォルダ内の layouts/_default/baseof.html ファイルを開き、以下のようなコードが含まれていることを確認してください：

<!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