SEO & I18n: ウェブサイトを多言語化するための究極ガイド

    世界中のより多くのユーザーにリーチしたいですか？ウェブサイトを多言語化することは、オーディエンスを拡大し、SEO（検索エンジン最適化）を改善する最良の方法の一つです。このブログ記事では、国際SEOの基本—しばしばi18n（「国際化」の略）と呼ばれる—を明確で理解しやすい言葉で解説します。必要な重要な決定について学び、hreflangなどの技術要素の使用法を理解し、なぜIntlayerのようなツールがあなたの多言語Next.jsプロジェクトを簡素化できるのかを説明します。

    1. ウェブサイトを多言語化するとはどういうことか？

    多言語ウェブサイトは、複数の言語でそのコンテンツを提供します。たとえば、英語版（example.com/en/）、フランス語版（example.com/fr/）、スペイン語版（example.com/es/）があるかもしれません。このアプローチにより、検索エンジンはユーザーの好みや地理的位置に基づいて正しい言語バージョンを表示できます。

    これをうまく行えば、英語を話さないユーザーにとってはるかに使いやすい体験を提供することができ、より良いエンゲージメント、より高いコンバージョン率、そして異なる地域でのSEOの改善につながります。

    2. 適切なURL構造の選択

    複数の言語バージョンを持つことを決定した場合、サイトのURLを整理するための明確で一貫した方法が必要です。各言語（または地域）は、インターネット上で独自の「アドレス」を持つべきです。以下は、多言語ウェブサイトを構築するための一般的な3つの方法です。

    1. 国別コードのトップレベルドメイン（ccTLD）

      • 例: example.fr, example.de
      • 利点: コンテンツが対象としている国について検索エンジンに強い信号を送ります（例: .fr = フランス）。
      • 欠点: 複数のドメインを管理することは、より高価で複雑になる可能性があります。

    2. サブドメイン

      • 例: fr.example.com, de.example.com
      • 利点: 各言語が独自のサブドメインに存在するため、言語を追加または削除するのが比較的簡単です。
      • 欠点: 検索エンジンはサブドメインを別のサイトとして扱うことがあり、メインドメインの権威を薄める可能性があります。

    3. サブディレクトリ（サブフォルダ）

      • 例: example.com/fr/, example.com/de/
      • 利点: 管理が簡単で、すべてのトラフィックがメインドメインに向かいます。
      • 欠点: ccTLDほどの強力なローカルSEO信号にはなりません（ただし、適切に実施すれば非常に効果的です）。

    ヒント: グローバルブランドを持ち、シンプルさを保ちたい場合、サブディレクトリが最も効果的です。1つまたは2つの主要国をターゲットにし、それぞれを強調したい場合は、ccTLDを採用するのが良いでしょう。

    3. Hreflangを使用した言語ターゲティングのマスター

    3.1. Hreflangとは何ですか？

    複数の言語で同一または非常に似たコンテンツがある場合、Googleのような検索エンジンは、どのバージョンをユーザーに表示するかを混乱する可能性があります。Hreflangは、特定のページがどの言語（および地域）を対象としているか、そして別の言語/地域ページが何であるかを検索エンジンに伝えるHTML属性です。

    3.2. なぜこれは重要なのか？

    1. 重複コンテンツの問題を防ぎます（検索エンジンが同じコンテンツを複数回公開していると考える場合）。
    2. フランス語のユーザーがフランス語のバージョンを表示し、スペイン語のユーザーがスペイン語のバージョンを表示します。
    3. 全体的なユーザーエクスペリエンスを改善し、エンゲージメントが向上し、SEOランキングが上がります。

    3.3. <head>タグでのHreflangの使用法

    HTML内で、次のようなものを追加します：

    html
    <link rel="alternate" hreflang="en" href="https://example.com/en" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr" />
<link rel="alternate" hreflang="es" href="https://example.com/es" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en" />
    • hreflang="en": ページの英語バージョンを示します。
    • hreflang="fr": ページのフランス語バージョンを示します。
    • hreflang="es": ページのスペイン語バージョンを示します。
    • hreflang="x-default": 他の言語がユーザーの好みに一致しない場合の「フォールバック」言語またはデフォルトURLです。

    簡単な注意: これらのタグ内のURLは、最終ページに直接ポイントすることを確認してください。追加のリダイレクトは不要です。

    4. コンテンツを本当に「ローカル」にする（単なる翻訳ではない）

    4.1. ローカリゼーションと翻訳

    • 翻訳は、テキストを一言一句別の言語に変換することを意味します。
    • ローカリゼーションは、コンテンツの形式、通貨、測定単位、文化的な参照をローカルオーディエンスに合わせて適応させることを意味します。たとえば、フランスをターゲットにする場合、€を使用します。

    4.2. 重複コンテンツの回避

    良い翻訳でも、構造があまりにも似ていると、検索エンジンがあなたのサイトを重複コンテンツとしてフラグできる場合があります。Hreflangは、これらのページが重複ではなく、言語のバリエーションであることを明確にします。

    5. テクニカルSEOの必須要件

    5.1. 言語宣言（langおよびdir）

    HTMLタグで、次のように言語を宣言できます：

    html
    <html lang="en"></html>
    • lang="en"は、ブラウザと支援技術が言語を理解できるようにします。

    右から左に読む言語（アラビア語やヘブライ語など）の場合は、次を追加します：

    html
    <html dir="rtl" lang="ar"></html>
    • dir="rtl"は、テキストの方向が右から左であることを保証します。

    5.2. カノニカルタグ

    カノニカルタグは、ほぼ重複するページがある場合に、どのページが「オリジナル」または主要バージョンであるかを検索エンジンに伝えます。通常、多言語サイトには自己参照のカノニカルがあります。

    html
    <link rel="canonical" href="https://example.com/fr/produits" />

    6. 複数言語でのオンページSEO

    6.1. タイトルとメタ説明

    • 各言語用に翻訳および最適化されています。
    • 各市場のためにキーワードリサーチを実施します。英語で検索されるものがフランス語やスペイン語では異なる場合があります。

    6.2. ヘッダー（H1、H2、H3）

    あなたの見出しは、各地域のローカルフレーズやキーワードを反映するべきです。元の英語の見出しをGoogle翻訳で機械的に翻訳して終わりにしないでください。

    6.3. 画像とメディア

    • 必要に応じてaltテキスト、キャプション、ファイル名をローカライズします。
    • ターゲット文化に響くビジュアルを使用します。

    7. 言語切替とユーザーエクスペリエンス

    7.1. 自動リダイレクトまたは言語セレクター？

    • 自動リダイレクト（IPまたはブラウザ設定に基づく）は便利ですが、旅行者やVPNユーザーを誤ったバージョンに送る可能性があります。
    • 言語セレクターはしばしばより透明性が高いです—ユーザーは自分の好きな言語を選択できます。

    以下は、シンプルなNext.js + Intlayerの例です：

    tsx
    import { useLocation, useNavigate } from "react-router-dom";
import {
  Locales,
  getHTMLTextDir,
  getLocaleName,
  getLocalizedUrl,
} from "intlayer";
import { useLocale } from "react-intlayer";
import { type FC } from "react";

const LocaleSwitcher: FC = () => {
  const location = useLocation(); // 現在のURLパスを取得します。例: /fr/about
  const navigate = useNavigate();

  const changeUrl = (locale: Locales) => {
    // 更新されたロケールでURLを構築します
    // 例: ロケールをスペイン語に設定した場合の/es/about
    const pathWithLocale = getLocalizedUrl(location.pathname, locale);

    // URLパスを更新します
    navigate(pathWithLocale);
  };

  const { locale, availableLocales, setLocale } = useLocale({
    onLocaleChange: changeUrl,
  });

  return (
    <ol>
      {availableLocales.map((localeItem) => (
        <li key={localeItem}>
          <a
            href={getLocalizedUrl(location, localeItem)}
            hrefLang={locale === localeItem ? "x-default" : localeItem}
            aria-current={locale === localeItem ? "page" : undefined}
            onClick={(e) => {
              e.preventDefault();
              setLocale(localeItem);
            }}
          >
            <span>
              {/* 各ロケールの言語 - 例: Français */}
              {getLocaleName(localeItem, locale)}
            </span>
            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
              {/* 現在のロケールに設定された言語 - 例: Francés */}
              {getLocaleName(localeItem)}
            </span>
            <span dir="ltr" lang={Locales.ENGLISH}>
              {/* 英語での言語 - 例: French */}
              {getLocaleName(localeItem, Locales.ENGLISH)}
            </span>
            <span>
              {/* 各ロケールの言語 - 例: FR */}
              {localeItem}
            </span>
          </a>
        </li>
      ))}
    </ol>
  );
};

    7.2. 設定の保存

    • ユーザーの言語選択をクッキーまたはセッションに保存します。
    • 次回サイトに訪問した際に、自動的に彼らの好みの言語を読み込むことができます。

    8. ローカルバックリンクを構築する

    バックリンク（外部サイトからのリンク）は、SEO要因として依然として重要です。多言語サイトを運営する際は考慮すべき点があります：

    • 地元のニュースサイト、ブログ、フォーラムにアプローチすること。たとえば、.frドメインがフランスのサブディレクトリを指すことで、ローカルのフランスSEOを強化できます。
    • 言語ごとのバックリンクを監視し、どの地域がより多くのPR/マーケティング努力を必要としているか確認します。

    9. 多言語サイトの監視と維持

    9.1. Google Analytics & Search Console

    • 各言語ディレクトリ（/en/, /fr/, /es/）のデータを分割します。
    • 各言語ごとにクロールエラー、重複コンテンツのフラグ、インデクシングの問題に注意します。

    9.2. 定期的なコンテンツ更新

    • 翻訳を新鮮に保ちます。英語の製品説明を変更した場合、フランス語、スペイン語などにも更新します。
    • 古くなった翻訳は、顧客に混乱をもたらし、ユーザーの信頼を損なうことがあります。

    10. 避けるべき一般的な落とし穴

    1. 機械翻訳されたコンテンツ 人間のレビューなしの自動翻訳は、エラーが多くなる可能性があります。

    2. 不正確または欠落したhreflangタグ タグが不完全であったり間違ったコードが含まれている場合、検索エンジンは言語バージョンを自動的に判断できません。

    3. JavaScriptのみによる言語切替 Googleが各言語のユニークなURLをクロールできない場合、ページが正しいローカル検索結果に表示されない可能性があります。

    4. 文化的ニュアンスの無視 一国で通用するジョークやフレーズが、別の国では不快または意味を持たない場合があります。

    まとめ

    ウェブサイトを多言語化することは、単にテキストを翻訳する以上のものです。効果的なURL構造の設定、hreflangタグを使用して検索エンジンが正しいバージョンを提供できるようにし、ローカライズされたビジュアル、言語選択、整然としたナビゲーションを伴った素晴らしいユーザーエクスペリエンスを提供することが重要です。これらのベストプラクティスに従うことで、グローバル市場での成功に向けた準備が整い、ユーザー満足度を高め、地域ごとに優れたSEO結果を実現できます。

    Next.js（特にNext.js 13以上のApp Router）を使用している場合、Intlayerのようなツールがこのプロセス全体を簡素化できます。ローカライズされたサイトマップの生成から、hreflangリンクや言語検出の自動処理までをサポートし、質の高い多言語コンテンツの作成に集中できるようになります。

    グローバルに進出する準備はできましたか？ 今すぐこれらのSEOおよびi18n戦略を実施し、世界中の新しい訪問者があなたのサイトを発見し、関与する様子を見守りましょう！

    このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。

    ブログへのGitHubリンク
    Intlayerとi18next