ウェブサイトに言語セレクターを追加する方法 (2 つの方法）

この投稿を次のように要約します: 8分で読めます

チャットGPT

困惑

グロック

Google AI

言語セレクターを Web サイトに追加するには 2 つの方法があります。現在のページの各言語バージョンへのリンクのリストとして自分で構築するか、構成できるスイッチャーを追加する Web サイト翻訳ツールを使用します。どちらを選択しても、セレクターはすべてのページに表示され、各言語にその言語（ドイツ、スペイン、フランセ）でラベルを付ける必要があります。また、訪問者が切り替わったときに同じページに留まり、リダイレクトするのではなく選択できるようにする必要があります。

どちらの方法も、コピーできるコードと、W3C と Google が推奨する設計ルールとともに、段階的に以下に示します。

主なポイント

言語セレクターは、テキストをスクリプトと交換するのではなく、言語ごとに実際の個別の URL にリンクする必要があります。検索エンジンがすべてのバージョンにインデックスを付けることができるのは、個別の URL です。
言語に独自の名前 (“ドイツ語” ではなく “ドイツ語”) でラベルを付け、フラグだけに依存しないでください。W3C は、言語を識別するために国旗を使用しないようアドバイスしています。
セレクターをすべてのページ、通常はヘッダーまたは固定コーナーの同じ場所に置き、訪問者が切り替わったときに同等のページに留めます。
IP アドレスやブラウザの設定によって訪問者に言語を強制しないでください。Google は、言語バージョン間の自動リダイレクトを推奨せず、代わりにそれらをリンクすることを提案しています。
ConveyThis などの翻訳ツールでは、セレクターを自動的に追加し、コードなしでセレクターのスタイル（フラグ、ラベル、位置、色）を設定できます。

優れた言語セレクターとは何か

これらのルールは、W3C 国際化ガイダンスと多言語サイトに関する Google のドキュメントから引用されています

すべてのページに置いてください。W3C は次のように述べています: “代替言語バージョンへのリンクを追加することが常に最善であり、すべてのページでそうすることが最善です” (W3C).
各言語を独自の言語で命名します。英語のページをスキャンしているドイツ語話者は、“ドイツ語ではなく ” Deutsch“を探します。” W3C では、リンクは “が指すページの言語で記述することを推奨しています。”
旗をラベルとしてではなく、オプションの装飾として扱います。W3C は次のように述べています: “言語を識別するために国旗を使用したいという誘惑に抵抗してください。国によっては複数の言語があり、複数の国で話されている言語もあります。” スタイルにフラグを使用する場合は、常にその横に言語名を表示します。
訪問者を同じページに留めておいてください。からスペイン語に切り替えます /pricing 着陸すべきだ /es/pricing、スペインのホームページにはありません。
リダイレクトを強制しないでください。Google は次のようにアドバイスしています: “ユーザーをサイトの 1 つの言語バージョンから別の言語バージョンに自動的にリダイレクトすることは避けてください”、代わりに他の言語バージョンにハイパーリンクを追加することを提案しています (Google検索セントラル)。ブラウザに基づいて言語を提案したい場合は、リダイレクトの代わりに訪問者が閉じることができるバナーを使用してください。
見つけやすく、使いやすくします。おなじみの場所（ヘッダーの右上、またはコンテンツの多いサイトのフッター）に置き、携帯電話をタップできる大きさにし、キーボードで動作することを確認します。

方法1: 言語セレクターを自分で構築する

独自の HTML またはテーマを管理し、各言語にすでに独自の URL がある場合は、これを使用します。

ステップ1: すべての言語に独自のURLがあることを確認する

セレクターはバージョン間をリンクするため、最初にバージョンが存在する必要があります: example.com/about, example.com/de/about, example.com/es/about。まだ構造を選択している場合は、を参照してください多言語SEOにおけるサブディレクトリとサブドメイン.

ステップ2:セレクターマークアップを追加する

最も簡単にアクセスできるセレクターはリンクのリストです。各リンクには、どの言語につながるかが記載されています(hreflang) そしてそのテキストがどの言語にあるか(lang):

<nav aria-label="Language">
  <ul class="lang-switcher">
    <li><a href="/about" hreflang="en" lang="en" aria-current="true">English</a></li>
    <li><a href="/de/about" hreflang="de" lang="de">Deutsch</a></li>
    <li><a href="/es/about" hreflang="es" lang="es">Español</a></li>
    <li><a href="/fr/about" hreflang="fr" lang="fr">Français</a></li>
  </ul>
</nav>

このマークアップが機能する理由は 3 つあります

プレーンなリンクはクロール可能であるため、検索エンジンはすべての言語バージョンを検出します。
lang 各リンクでは、スクリーンリーダーが “Deutsch” を正しく発音できます。
aria-current 訪問者が今読んでいる言語を示します。

約 5 つ以上の言語があるため、ドロップダウンを使用するとスペースが節約されます。リストを開くボタンではなく、ボタンを使用します <select> これは変更時にナビゲートするため、キーボードユーザーにとっては厄介です。

ステップ3: 現在のページのリンクを生成する

各リンクは、他の言語の現在のページを指す必要があります。CMS では、これは通常、多言語プラグインまたはテンプレート変数から得られます。静的サイトでは、同等の URL のマップからビルド時にリストを生成します。各言語のホームページへのリンクをハードコードしないでください。

ステップ4: ページヘッドにhreflangタグを追加する

目に見えるセレクターは人用です。検索エンジンも必要です <link rel="alternate" hreflang="…"> のタグ <head> 各ページの内容、ページ自体を含むすべての言語バージョン、および x-default。私たちの完全なフレフランガイド正確なマークアップを表示します。

ステップ5:テスト

ディープページ（ホームページではない）から言語を切り替え、同等のページにアクセスしたことを確認します。
キーボードでセレクターにタブを付け、マウスなしで開きます。
電話で確認し、各言語を簡単にタップできることを確認してください。
翻訳されたページでソースを表示し、hreflang タグが存在することを確認します。

デザインと行動を完全に制御できます。コストは、URL マッピング、hreflang タグ、翻訳を自分で維持することです。

方法2:ウェブサイト翻訳ツールのセレクターを使用する

翻訳ツールは、言語バージョン、その URL、hreflang タグ、セレクターを一緒に作成し、すべての同期を維持します。と ConveyThisプラグイン、アプリ、またはスクリプトをインストールするとスイッチャーが追加され、コードを記述せずにダッシュボード設定からカスタマイズできます。

変更できる設定は次のとおりです

設定	オプション
フラッグスタイル	長方形、正方形、または円形の旗、または旗がまったくない
言語ラベル	英語でのフルネーム (“スペイン語”)、言語自体でのフルネーム (“スペイン語”)、または 2 文字コード (“ES”)
位置	ページの固定コーナー、またはページ上の任意の要素内（要素の ID、たとえばヘッダーのスポットを指定します）
メニュー方向	リストが上向きか下向きか、あるいは自動的に開くか
見て	背景、テキスト、境界線、ホバーの色；丸みを帯びた角または正方形の角
どのフラグが言語を表すか	例えば、英語の米国国旗の代わりに英国やオーストラリアの国旗(フラグを変更する方法)

上記のベストプラクティスに従うには、ConveyThis を使用します

ラベルを言語のネイティブ名に設定します。旗は視覚的な追加として保持するか、オフにします。
スイッチャーは、表示される要素の ID を指定してヘッダーの内側に配置し、訪問者が期待する場所に配置します。
使用する強い理由がない限り、ブラウザ言語によるオプションの自動リダイレクトをオフにしたままにしてください。ダッシュボード自体は、検索エンジンのクローラーがそのようなリダイレクトに従う可能性があることを警告します。
URL構造（サブフォルダ、サブドメイン、または ?lang； Extreme プランの第 2 レベルドメイン）。Hreflang タグは自動的に追加されます。

現在のデザインについて詳しくは、こちらをご覧ください新しい言語スイッチャーに会うまたはプラットフォームガイドを参照してください WordPress そして Shopify.

コードを書かなくても、セレクター、URL、hreflang は自動的に同期され、ほとんどのプラットフォームで動作します。完全にカスタムビルドの場合よりもマークアップの制御は少なくなりますが、スイッチャーを配置してスタイルを設定することはできます。

どの方法を選択すべきでしょうか？

もしあなたが…	選ぶ
すでに翻訳ページと開発者を抱えています	方法1:自分で作る
セレクターだけでなく翻訳も必要です	方法 2: 翻訳ツール
WordPress、Shopify、Wix、Webflow、または同様のプラットフォームを実行します	方法2、プラットフォームのプラグインまたはアプリ経由
非常に具体的なデザインが必要です	メソッド 1、またはメソッド 2 を独自のヘッダー要素内に配置し、一致するようにスタイル設定します

一般的な言語セレクターの間違い

フラグのみを使用します。スペインの国旗はスペイン、メキシコ、アルゼンチンを意味しますか？スイスの国旗はドイツ、フランス、イタリアですか？必ずラベルを追加してください。
言語を英語のみでリストします。日本人訪問者は “Japanese” という単語を認識できない場合があります。
訪問者が切り替わった後にホームページにアクセスしないようにします。
デスクトップ上のハンバーガーメニュー、または小さなアイコンの後ろにセレクターを非表示にします。
IP またはブラウザ言語によって自動的にリダイレクトされ、戻る方法はありません。
スクリプトのみで言語を切り替え、個別の URL がないため、検索エンジンは 1 つの言語のみを表示します。

よくある質問

言語セレクターはどこに行くべきですか？ ほとんどのサイトでは、訪問者が期待するヘッダーの右上に配置しています。コンテンツの多いサイトでは、フッターで同じことを繰り返すことがよくあります。すべてのページの同じ場所に保管してください。

言語スイッチャーでフラグを使用する必要がありますか？ 言語名とのみ。旗は言語ではなく国を表すため、それ自体が多言語国の訪問者や広く話されている言語の話者を混乱させます。

私のウェブサイトはブラウザに基づいて自動的に言語を切り替える必要がありますか？ 無理しないほうがいいよ。Google は、言語バージョン間の自動リダイレクトを行わないことを推奨しています。訪問者を支援したい場合は、訪問者が受け入れるか却下できる提案を示し、セレクターを常に表示したままにしてください。

言語セレクターはSEOに役立ちますか？ セレクター自体は、検索エンジンがクロール可能なリンクを通じて言語バージョンを発見するのに役立ちます。各言語のランキングは、個別の URL、hreflang タグ、翻訳されたメタデータによって異なります。

スイッチャー、翻訳ページ、hreflangを一緒に設定するには、 ConveyThis 無料をお試しください。計画は進行中です価格設定ページ.