Astro の国際化：i18n ルーティング vs 自動翻訳

Astro の組み込み i18n ルーティングでできること

v3.5 以降、Astro は astro.config.mjs にファーストパーティの i18n 設定ブロックを提供しています。そこで ロケールを宣言すれば、すぐに URL ベースのルーティングが使えます。

// astro.config.mjs
import { defineConfig } from "astro/config";

export default defineConfig({
  i18n: {
    defaultLocale: "en",
    locales: ["en", "fr", "de", "es"],
    routing: {
      prefixDefaultLocale: false,
    },
  },
});

この設定により、Astro はロケールプレフィックス付きの URL パスを自動生成します — src/pages/fr/ 配下に置いたページは /fr/about、 /fr/pricing のように配信されます。この ルーティングレイヤーは、さらに2つの URL ヘルパーも提供します。

• •getRelativeLocaleUrl(locale, path) — サイトルートからの相対パスに、ロケールプレフィックスを付けて生成します。
• •getAbsoluteLocaleUrl(locale, path) — 同様の機能に加えて完全なオリジンを付与します。canonical タグやサイトマップに便利です。
• •サーバー（SSR）モードでの Accept-Language ヘッダーによる 言語検出 — Astro は訪問者を自動的に希望のロケールへリダイレクトできます。

できないこと：コンテンツの翻訳です。 i18n 設定ブロックを有効にしても、得られるのは URL 構造とルーティングヘルパーだけです。 /fr/about の実際のコンテンツは、 手動翻訳したコピーを含む src/pages/fr/about.astro を作成するか、 ロケールごとのエントリーを持つ Content Collections を使うかして、フランス語で書く必要があります。 ルーティングレイヤーはあくまで構造的なものです。

従来のアプローチ：ロケールごとの Content Collections

多言語対応の Astro サイトで最も一般的なパターンは、ルーティングレイヤーとロケール別のコンテンツ ディレクトリを組み合わせることです。ブログの場合、コンテンツコレクションを言語ごとに構造化します。

src/
  content/
    blog/
      en/
        introducing-our-product.mdx
        how-it-works.mdx
      fr/
        introducing-our-product.mdx   ← 手動でのフランス語翻訳
        how-it-works.mdx              ← 手動でのフランス語翻訳
      de/
        introducing-our-product.mdx   ← 手動でのドイツ語翻訳
        how-it-works.mdx              ← 手動でのドイツ語翻訳

このアプローチは、特定の条件下ではうまく機能します。サイトの規模が小さく、専任の翻訳者が各ロケール ディレクトリを担当し、コンテンツの更新頻度が低い場合です。構造は明確で、出力も監査しやすく、翻訳された ファイルはそれぞれ独自のバージョン履歴を持つ独立した成果物になります。

しかし、メンテナンスの計算は急速に不利になっていきます。5言語で20ページとなると、同期を保つべき ファイルは100個に及びます。英語版のページが更新されるたびに、他の4つのロケール版は翻訳者が追いつくまで 遅れを取ります。英語ページは書き直されたのに、フランス語版は半年前のまま — というコンテンツドリフトが、 このアプローチで最もよく起こる失敗パターンです。規模が大きくなるほど、ロケール間の整合性を保つ負担は 静かに放置されがちになります。

自動翻訳：1つのスクリプトで全言語に対応

代替となるアプローチでは、コンテンツの複製は一切不要です。Astro のレイアウトの </body> 終了タグの直前に、Lingvit の スクリプトを追加します。

---
// src/layouts/Layout.astro
---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <slot name="head" />
  </head>
  <body>
    <slot />
    <script
      src="https://cdn.lingvit.com/widget/v1/widget.bundle.js"
      data-project-id="YOUR_PROJECT_ID"
      async
    ></script>
  </body>
</html>

これで統合は完了です。あとは Lingvit がレンダリング後の DOM を監視し、ダッシュボードで有効化した ターゲット言語に翻訳します。このアプローチには、いくつか注目すべき特性があります。

Astro の i18n ルーティングと自動翻訳は組み合わせられますか？

はい。SEO を重視するサイトには、この組み合わせが推奨されるアプローチです。2つの仕組みは異なる レイヤーで動作するため、きれいに補完し合います。

Astro の組み込みルーティングは URL 構造を担当します。 /fr/about や /de/pricing のような URL は、検索エンジンが 多言語コンテンツをインデックスする際に使うものです — 各ロケールはクロール可能な独自の URL、独自の canonical、独自の hreflang シグナルを持ちます。これは 多言語 SEO の正しい基盤であり、Astro のルーティングレイヤーはそれをしっかり提供してくれます。

Lingvit はそれらの URL 内の実際のコンテンツ翻訳を担当します。手動翻訳したコピーを含む src/pages/fr/about.astro を別途 維持する代わりに、単一のソースファイルだけを保持し、Lingvit にレンダリング後の出力を自動翻訳させます。 結果として、言語ごとに SEO インデックスされた URL と、自動コンテンツ翻訳、編集コントロールが、 ソースファイルを複製することなく実現できます。

どちらのアプローチを使うべきか

常に自動翻訳が正解とは限りません。従来のロケールファイル方式が明らかに適している場面もあります。

よくある質問