Internationalizing Websites

Web サイトの国際化

SEO のベストプラクティスに沿って、Next.js の Web サイトに多言語対応を追加するための完全なワークフローです。

このスキルを使用する場面

• 既存の Web サイトに新しい言語バージョンを追加する場合
• 新しい Web サイトで i18n（国際化）を設定する場合
• 複数言語向けの SEO を設定する場合
• ユーザーが「言語を追加」「翻訳」「ローカライズ」「hreflang」「多言語」に言及した場合

対応言語

主なターゲット市場：

• 🇺🇸 英語（en）- グローバル市場
• 🇯🇵 日本語（ja）- アジア市場
• 🇨🇳 中国語（zh）- 中国市場

以下の言語にも対応しています：

• 韓国語（ko）、ポルトガル語（pt）、スペイン語（es）、フランス語（fr）、ドイツ語（de）
• アラビア語（ar）、ベトナム語（vi）、ヒンディー語（hi）、インドネシア語（id）、タイ語（th）
• 繁体字中国語（zh-hk）、イタリア語（it）、ロシア語（ru）

国際化のワークフロー

このチェックリストをコピーして、進捗を記録してください。

i18n Progress:
- [ ] Step 1: Prepare base language files
- [ ] Step 2: Add new language files
- [ ] Step 3: Update configuration files
- [ ] Step 4: Add translations
- [ ] Step 5: Configure SEO elements
- [ ] Step 6: Validate and test

ステップ 1：ベース言語のファイルを準備する

英語（en.json）のファイルがテンプレートとして存在することを確認してください。

必要なディレクトリ：

• i18n/messages/en.json - メインの翻訳
• i18n/pages/landing/en.json - ランディングページの翻訳

構造を確認する：

# Check if base files exist
ls i18n/messages/en.json
ls i18n/pages/landing/en.json

存在しない場合は、Web サイトに必要なすべての翻訳キーを含めて作成してください。

ステップ 2：新しい言語のファイルを追加する

言語追加スクリプトを実行します。

node scripts/i18n-add-languages.mjs

このスクリプトで行うこと：

• en.json をすべてのターゲット言語のファイルにコピーします
• i18n/locale.ts に新しいロケールを追加します
• i18n/request.ts に言語マッピングを追加します
• public/sitemap.xml に新しい言語の URL を追加します

スクリプトの設定（i18n-add-languages.mjs 内）：

• languages 配列 - 追加する言語の一覧
• languageNames オブジェクト - 言語の表示名
• targetDirs 配列 - 翻訳ファイルを含むディレクトリ

詳しい手順については、WORKFLOW.md を参照してください。

ステップ 3：設定の更新を確認する

i18n/locale.ts を確認する：

export const locales = ["en", "ja", "zh", "ko", ...];

export const localeNames: any = {
  en: "English",
  ja: "日本語",
  zh: "中文",
  ko: "한국어",
  ...
};

i18n/request.ts を確認する：

• 言語コードのマッピングが設定されている
• zh-CN → zh、zh-HK → zh-hk のマッピングが含まれている

public/sitemap.xml を確認する：

• すべての言語バージョンが記載されている
• 各 URL に hreflang タグがある

ステップ 4：翻訳を追加する

オプション A：AI 翻訳を使用する（より迅速ですが、レビューが必要です）：

# Add structured data and pricing translations
node scripts/i18n-add-schema.js

スクリプトの translations オブジェクトで翻訳を設定してください。

オプション B：手動で翻訳する（品質を重視する場合に推奨）：

各言語のファイルを編集し、適切な翻訳を追加してください。

# Open language file
code i18n/messages/ja.json

翻訳のベストプラクティス：

• 可能であればネイティブスピーカーに依頼する
• ターゲット言語の SEO キーワードを維持する
• 単に翻訳するだけでなく、現地の文化に合わせて内容を調整する
• 書式（プレースホルダー、変数）を統一する

言語コードについては、reference/locale-codes.md を参照してください。

ステップ 5：SEO 要素を設定する

hreflang タグ - サイトマップで自動設定されますが、確認してください。

詳しくは、reference/hreflang-guide.md を参照してください。

ローカライズされたメタタグ - 各言語のファイルで翻訳します。

{
  "metadata": {
    "title": "Your Site Title",
    "description": "Your SEO description"
  }
}

URL 構造 - 正しい形式になっていることを確認します。

• 英語：https://example.com/ または https://example.com/en/
• 日本語：https://example.com/ja/
• 中国語：https://example.com/zh/

ステップ 6：検証とテスト

プロジェクトをビルドします：

npm run build

重要：続行する前に、エラーをすべて修正してください。

手動テスト：

1. 言語切り替え：

   • 各言語版にアクセスします
   • 言語切り替えにすべての言語が表示されることを確認します
   • 各言語のリンクをクリックし、正しいページが読み込まれることを確認します

2. コンテンツの表示：

   • 各言語ですべてのページが正しく表示されることを確認します
   • 未翻訳のテキストがないことを確認します（英語以外のページに英語が残っていないか確認します）
   • 特殊文字が正しく表示されることをテストします（日本語、中国語、アラビア語）

3. SEO 要素：

   • <html lang="..."> 属性がページの言語と一致していることを確認します
   • <link rel="alternate" hreflang="..."> タグが存在することを確認します
   • メタタグが正しい言語になっていることを確認します

自動検証：

# Check sitemap
curl https://your-site.com/sitemap.xml | grep hreflang

# Validate hreflang (use online tool)
# Google Search Console > Internationalization > hreflang

SEO チェックリスト - reference/seo-checklist.mdを参照してください。

検証に失敗した場合：

• エラーメッセージを注意深く確認します
• 設定ファイルに誤字がないか確認します
• 言語コードが正しいことを確認します
• ステップ 3 に戻り、問題を修正します

すべての検証に合格してから続行してください。

重要な注意事項

言語コードの標準

ISO 639-1（2 文字コード）を、必要に応じて地域バリアントと組み合わせて使用します：

• en - 英語
• ja - 日本語
• zh - 簡体字中国語
• zh-hk - 繁体字中国語（香港）
• pt - ポルトガル語
• pt-br - ブラジルポルトガル語

完全な一覧はreference/locale-codes.mdを参照してください。

SEO への影響

適切な i18n は SEO を改善します：

• ユーザーの母語で情報を提供できます
• 重複コンテンツによるペナルティを回避できます
• 検索エンジンが適切な言語版を提供しやすくなります

避けるべき一般的な SEO の誤り：

• ❌ IP に基づく自動リダイレクト（検索エンジンがすべての言語版をクロールできなくなります）
• ❌ hreflang タグの欠落（重複コンテンツの問題につながります）
• ❌ 言語間で URL 構造に一貫性がない
• ❌ メタタグが未翻訳

翻訳の品質

AI 翻訳と人間による翻訳：

• ✅ AI：迅速で費用対効果が高く、初稿の作成に適しています
• ⚠️ AI：文化的なニュアンスを見落とす場合があり、レビューが必要です
• ✅ 人間：品質が高く、文化に合わせた調整ができます
• ⚠️ 人間：時間がかかり、費用も高くなります

推奨される方法：

1. AI を使って翻訳の初稿を作成します
2. ネイティブスピーカーにレビューと推敲を依頼します
3. 対象市場のユーザーを対象にテストします
4. フィードバックに基づいて改善を重ねます

Next.js の i18n ルーティング

このシステムではルーティングに next-intl を使用します：

• URL からロケールを自動検出します
• 言語切り替えコンポーネント
• ローカライズされたナビゲーション

設定は i18n/locale.ts と i18n/request.ts にあります。

国際化後のタスク

言語を追加した後は、次の作業を行います：

1. 更新したサイトマップを Google Search Console に送信します
2. 言語／地域ごとに Search Console のプロパティを作成します
3. Analytics で海外からの自然検索トラフィックを監視します
4. 言語によってコンバージョン率が異なる場合は、翻訳の A/B テストを実施します
5. 海外からのクロールエラーに関するアラートを設定します

スクリプトの場所

i18n スクリプトはすべて scripts/ ディレクトリにあります：

• i18n-add-languages.mjs - 新しい言語ファイルを追加します
• i18n-add-schema.js - 構造化データの翻訳を追加します

参考資料

• WORKFLOW.md - 詳細なステップごとのワークフロー
• reference/hreflang-guide.md - hreflang の実装ガイド
• reference/locale-codes.md - 言語コードのリファレンス
• reference/seo-checklist.md - 国際 SEO チェックリスト

トラブルシューティングについては、WORKFLOW.mdのトラブルシューティングのセクションを参照してください。