ウェブサイトを多言語化した理由と方法

さまざまな言語を使う人にとって役立つサイトにし、検索エンジンやAIシステムにも見つけやすく、理解しやすくするために多言語化しました。目的はSEOとGEOによる見つけやすさの向上であり、検索順位や引用を保証するものではありません。

多言語化した理由

人々は自分の言語で検索し、質問します。その言語で明確かつ関連性の高いページを用意することで、検索エンジンにはより有用なコンテンツを提供でき、生成AIシステムには回答に役立つ文脈を伝えられます。英語で検索する人だけでなく、より多くの人に自分の仕事を知ってもらうためです。

実装した方法

単に文章を翻訳するのではなく、多言語対応をサイト構造の一部として実装しました。以下はNext.jsでの実装から抜粋した、簡略化した例です。

1. 各言語に予測しやすいURLを用意する

英語をデフォルト言語としてルートURLで提供し、それ以外の言語にはプレフィックスを付けます。これにより、各言語の同じページに安定したURLを割り当てられます。対応言語の一覧を一元管理し、ルーティングと言語リンクで共通して使います。

export const locales = ['en', 'de', 'es', 'fr', 'ja', 'pt'] as const;
export type Locale = (typeof locales)[number];
export const defaultLocale: Locale = 'en';

export function localizedPath(locale: Locale, pathname = '') {
  const path = pathname === '/' ? '' : pathname;
  return locale === defaultLocale ? path || '/' : `/${locale}${path}`;
}

2. 翻訳を辞書で管理する

各言語の辞書に、ページタイトル、説明、ナビゲーション、記事本文をまとめています。コンポーネントに表示文言を直接埋め込むのではなく、選択中の辞書から取得することで、翻訳ページでも同じレイアウトを保ちます。

// src/locales/de.ts
pageTitles: {
  'blog/how-and-why-i-localized-my-website':
    'Warum und wie ich meine Website lokalisiert habe',
}

// In the page component
const title = t.pageTitles[articleKey];

3. クローラーに各言語版を伝える

各言語ページに個別のcanonical URLを設定し、hreflang alternateで対応する他言語版を示します。これらのルートはサイトマップにも追加します。翻訳同士の関係を明確にできますが、検索順位やAIの引用が保証されるわけではありません。

const pathname = `/${articleKey}`;
const url = localizedUrl(locale, pathname);

return {
  alternates: {
    canonical: url,
    languages: getLanguageAlternates(pathname),
  },
};

この方法はブログ記事以外にも使えます。ナビゲーションやページ本文を翻訳すれば訪問者にとって使いやすくなり、一貫したURLとメタデータによって各言語版も判別しやすくなります。ただし、翻訳の正確さと有用性は欠かせません。技術的なSEOは発見を助けますが、良いコンテンツの代わりにはなりません。