i18nフォルダを使ったHugoタグ翻訳方法（Front Matterを触らないで済む方法）

多言語対応のHugoサイトを構築する場合、タグなどのタクソノミー用語も翻訳できると、より洗練されたユーザー体験になる。よくある悩みのひとつは、「記事一覧や詳細ページではタグを訪問者の言語で表示したいが、すべてのcontentファイルのfront matterに翻訳されたタグを毎回手動で書きたくない」というものだ。

ここでは、front matterを編集したり重複した翻訳タグを書くことなく、Hugoのi18nシステムでタグを多言語対応させる方法を解説する。

1. Front Matterでタグを翻訳しない

できるだけシンプル＆言語非依存でfront matterを書く:

text+++
title = "AI and Beatmaking"
date = 2025-06-02
tags = ["AI_Beatmaking", "Beatmaker_Mindset", "Consistency"]
+++

上記のように、タグ（tags）にはメンテナンスしやすいキー名（翻訳前）だけを指定。日本語記事用のja.mdや英語記事用のen.mdで、日本語タグや英語タグをわざわざ記述する必要はない。

2. i18n翻訳ファイル（TOML）を作る

i18nフォルダの中に、言語ごとのTOMLファイルを作成する。例えば:

• i18n/en.toml
• i18n/ja.toml

各ファイルの記述例は以下の通り。

en.toml

[AI_Beatmaking]
other = "AI Beatmaking"

[Beatmaker_Mindset]
other = "Beatmaker Mindset"

[Consistency]
other = "Consistency"

ja.toml

[AI_Beatmaking]
other = "AIビートメイキング"

[Beatmaker_Mindset]
other = "ビートメイカー・マインドセット"

[Consistency]
other = "一貫性"

必要なタグは、すべての言語ファイルにそれぞれ追加する。

3. テンプレートでi18nを呼び出す

例えばpost_preview.htmlやsingle.htmlでタグ一覧を表示する際、こう記述する:

{{ if .Params.tags }}
  <div class="blog-tags">
    {{ range .Params.tags }}
      {{ $key := . | replaceRE "[- ]" "_" }}
      <a href="{{ "tags" | absLangURL }}/{{ . | urlize }}/">{{ i18n $key | default . }}</a>&nbsp;
    {{ end }}
  </div>
{{ end }}

• replaceRE "[- ]" "_"で、タグ文字列に含まれるハイフンやスペースをアンダースコアに変換（AI-BeatmakingやAI BeatmakingもAI_Beatmakingに統一）。これでi18nファイルのキーと一致する。
• urlizeで、タグ一覧ページへのURLもSEO・リンクフレンドリーに自動変換。
• i18n $key | default .で、該当言語用i18nファイルに翻訳があればそれを表示。なければ元のタグ名を表示する。

4. Front Matterの翻訳・書き換えは不要

この方法なら、コンテンツファイル（*.md）には常に同じタグキーを書くだけでOK。Hugoは自動的に現在表示されている言語に基づいて、i18nファイルから正しい翻訳を選択し、タグを表示する。

5.（お好みで）en.tomlを残す／削除

• en.tomlを削除した場合：英語表示時はタグキー（例：AI_Beatmaking）そのままが表示される。
• en.tomlを残しておけば、スペースや表記ゆれを整えて「AI Beatmaking」など好きな形で表示が可能。

この方法のメリット

• 一元管理：翻訳はi18nファイルだけで一括管理・一括更新可能。
• ミスが減る：各記事ファイルで言語別タグを書き直さなくて済む。
• 拡張性：新しい言語やタグ追加もi18nファイルを書くだけ。

タグリスト表示のテンプレート・サンプル

<ul>
  {{ range .Params.tags }}
    {{ $key := . | replaceRE "[- ]" "_" }}
    <li>
      <a href="{{ "tags" | absLangURL }}/{{ . | urlize }}/">{{ i18n $key | default . }}</a>
    </li>
  {{ end }}
</ul>

結果例:

• 英語サイトの場合：
  “AI Beatmaking”, “Beatmaker Mindset”, “Consistency”
• 日本語サイトの場合：
  “AIビートメイキング”, “ビートメイカー・マインドセット”, “一貫性”

タグは自動的に各言語のi18n TOMLの内容に翻訳され、該当タグアーカイブへのリンク付きで表示される。もし翻訳が未登録でも、自動的にキー値（元のタグ名）で表示される。front matterを翻訳・重複記入する必要はない。

まとめ

タグ翻訳をi18nフォルダ＆テンプレートに任せることで、Front Matterはシンプルなまま、サイト管理もぐっと楽に。サイトの多言語化・拡張にも強い設計になる。