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

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

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

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

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

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

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

これで統合は完了です。あとは 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 と、自動コンテンツ翻訳、編集コントロールが、 ソースファイルを複製することなく実現できます。

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

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

よくある質問

自動翻訳は Astro のアイランドでも機能しますか？

+

はい。React、Vue、Svelte、Solid のアイランドはクライアントサイドでハイドレートされ、その出力を DOM に描画します。Lingvit の MutationObserver はこのコンテンツが表示されるとすぐに検知して翻訳します — アイランドがどのフレームワークを使っていても関係ありません。

Astro の静的出力（SSG）でも動作しますか？

+

はい。Lingvit はページ読み込み後、完全にクライアントサイドで動作します。静的出力の場合、HTML はビルド時に事前生成され、Lingvit がブラウザー内でそれを翻訳します。SSR の場合、Lingvit はハイドレーション後に動作します。Lingvit の視点からはどちらも同じように機能します。

Lingvit は Astro の組み込み i18n ルーティングとどう連携しますか？

+

両者は異なるレイヤーで動作します。Astro のルーティングは URL 構造（/fr/、/de/）とリダイレクトを担当します。Lingvit は実際のテキストコンテンツの翻訳を担当します。両方を組み合わせて使うことができます — ルーティングは Astro、コンテンツは Lingvit というように。

Astro の Content Collections も翻訳できますか？

+

はい。Content Collection のコンテンツ（MDX、Markdown）は、ビルド時に Astro によって HTML に変換されます。その HTML は、訪問者のブラウザーでページが読み込まれた際に Lingvit によって監視され、クライアントサイドで翻訳されます。