🧭 1. Hugoのマルチ言語機能とは？

Hugoは config に言語設定を追加するだけで、
言語別のURL生成・翻訳ファイル・メニュー・コンテンツ管理 を自動で行ってくれます。

Hugoのマルチ言語の特徴

  • 言語ごとにフォルダを分けて管理できる
  • 言語別のメタデータ（title, description）を設定可能
  • i18n翻訳ファイルでUI文言を切り替えられる
  • 言語スイッチャー（Language Switcher）も簡単に実装できる

補足
Hugoは「多言語サイト」を最初から想定して設計されているため、WordPressよりも構築が簡単なケースもあります。

📁 2. ディレクトリ構成を理解する

Hugoでは、言語ごとにコンテンツを分けるのが基本です。

例：日本語（ja）と英語（en）の場合

# content ディレクトリの構成例
content/
  ja/
    _index.md
    about.md
  en/
    _index.md
    about.md

注意
言語フォルダ名は config の languages で設定したキーと一致させる必要があります。

⚙️ 3. configファイルで言語設定を追加する

Hugoのマルチ言語設定は config.yaml（または toml/json）に記述します。

基本的な設定例

# config.yaml
defaultContentLanguage: ja   # デフォルト言語
defaultContentLanguageInSubdir: true  # /ja/ を付けるかどうか

languages:
  ja:
    languageName: "日本語"
    weight: 1
    title: "マイサイト（日本語）"
  en:
    languageName: "English"
    weight: 2
    title: "My Website (English)"

補足
weight は言語の優先順位です。小さいほど優先されます。

📝 4. 言語別のコンテンツを作成する

言語ごとにフォルダを作ったら、記事もそれぞれの言語で作成します。

例：日本語版と英語版の記事

# content/ja/about.md
---
title: "このサイトについて"
---

これは日本語版のページです。

# content/en/about.md
---
title: "About This Site"
---

This is the English version of the page.

注意
同じ記事でも、言語ごとに別ファイルとして管理します。

🌐 5. i18n翻訳ファイルでUI文言を切り替える

テーマ内のUI文言（「続きを読む」「前へ」「次へ」など）は、
i18n ディレクトリで翻訳できます。

i18nファイルの例

# i18n/ja.yaml
read_more:
  other: "続きを読む"

# i18n/en.yaml
read_more:
  other: "Read more"

補足
PaperMod などのテーマは i18n に対応しているため、翻訳ファイルを置くだけで自動反映されます。

🔗 6. 言語切り替えリンク（Language Switcher）を追加する

テーマによっては自動で表示されますが、
自作テーマの場合はテンプレートに以下のように追加します。

{{ range .Site.Languages }}
  <a href="{{ .Lang | relLangURL }}">{{ .LanguageName }}</a>
{{ end }}

注意
言語切り替えリンクは「現在のページの別言語版」へリンクするように設計するのが理想です。

🧪 7. マルチ言語サイトでよくあるつまずき

  • 言語フォルダ名が config と一致していない
  • defaultContentLanguageInSubdir の設定を忘れてURLが崩れる
  • i18nファイルのキー名がテーマと一致していない
  • 言語別のメニュー設定を忘れてメニューが表示されない
  • 言語ごとに baseURL を変えたいのに設定していない

補足
マルチ言語サイトは「設定漏れ」が原因で崩れることが多いです。チェックリストを活用しましょう。

📚 参考リンク

🔧 拡張案（次にやると良いこと）

  1. 言語別のOGP画像を設定する
  2. 多言語対応のサイトマップを最適化する
  3. hreflangタグを追加してSEOを強化する
  4. GitHub Actionsで言語別ビルドを自動化する
  5. 翻訳管理ツール（Crowdin など）と連携する

✅ まとめ

  • Hugoは標準でマルチ言語機能をサポート
  • 言語フォルダと config の設定が最重要
  • i18nファイルでUI文言も翻訳可能
  • 初心者でも手順通りに進めれば簡単に多言語サイトが作れる