多言語SEOに対応するWebflowウェブサイトの翻訳方法

各言語版をクロール可能でユーザー第一のサイトにするために、Webflowのロケール別URL、SEO項目のローカライズ、CMSの整合性、hreflang、品質検証のワークフローを計画しましょう。

Grant Davies更新日

多言語SEOに対応したWebflowサイトの翻訳方法：ロケールURLのラベル /en /fr /de とCMSが表示されたWebflowデザイナーのキャンバス

Webflowサイトの翻訳は、単なるデザインやCMSの作業ではありません。国際SEOの構造を決める重要な判断です。Webflowを使うチームは、言語切り替えウィジェットやサードパーティのオーバーレイから導入しがちですが、後になって、Googleが各言語版を確実にクロールできない、メタデータが英語のまま残る、CMSコレクション間の整合性が崩れるとhreflangのクラスターも壊れる、といった問題に気づくことがあります。

このガイドでは、Webflowを使うマーケターやフリーランスの方に向けて、Googleの多言語サイトに関するドキュメントに基づき、クローラーが巡回できるロケール構成の作り方を解説します。言語ごとの個別URL、SEOフィールドのローカライズ、CMS間の整合性、hreflangとサイトマップ、標準機能とサードパーティによる翻訳手法の比較、そして複数言語の混在を防ぐレビューフローを取り上げます。検索順位を保証するものではなく、各言語版を検索エンジンに発見してもらうためにGoogleとBingが文書で示している手法を紹介します。

結論：Webflowの各言語ページは個別のURLで公開する

要点：Webflowの各言語版は、それぞれクロール可能な個別のURLで公開し、主要コンテンツ、ナビゲーション、メタデータをローカライズしましょう。Cookieやブラウザーの言語設定による切り替えだけに頼らないことが重要です。

Googleは、Cookieやブラウザーの設定だけに頼るのではなく、言語版や地域版ごとに異なるURLを使うことを推奨しています。Webflowでは通常、/fr/や/de-de/などのサブディレクトリ、ロケール別のCMSアイテム、それらのURLにリンクする目に見える言語セレクターを用意します。Webflowの公開処理でページを事前レンダリングしておくと、クローラーもユーザーと同じHTMLを確認しやすくなります。

推測した言語や所在地に基づいて、訪問者を自動的にリダイレクトするのは避けましょう。Googleは自動リダイレクトを推奨せず、代わりにユーザーが操作できる言語・国セレクターの設置を勧めています。ユーザーには選択肢を、クローラーにはたどれるリンクを用意しましょう。

WebflowのURLとロケールの設計

翻訳を始める前に、各ロケールをどのURLに対応させるか決めておきましょう。Webflowでよく使われる構成は次のとおりです。

  • 1つのサイト内でロケール別のサブディレクトリ（example.com/fr/about）を使う構成。フリーランスやマーケティングチームにとって、最もシンプルな選択肢になることが多い方法です。
  • 法務上の理由やアクセス解析の都合で分離が必要な場合は、ロケール別のサブドメイン（fr.example.com）を使う構成。
  • デザインシステムが大きく異なる場合は、主要市場ごとにWebflowサイトを分ける構成。

どの構成を選ぶ場合でも、各言語版には、ナビゲーションとサイトマップに掲載された、リンク可能で安定したURLが必要です。Googleは主に表示されているコンテンツからページの言語を判定します。各URLでは、本文とナビゲーションの両方で、基本的に1つの言語を使いましょう。

早い段階で「元ページ → ロケールURL → CMSアイテムID → hreflangコード」の対応表を作成しましょう。フランス語を追加する際には、どの英語ページにフランス語の対応ページがあり、どのページを意図的に単一言語のままにしているのか、正確に把握できる状態にしておきます。

URL設計と併せて、国際SEOと多言語SEOの戦略の違いも検討し、対象とする言語・国がビジネス目標に沿うようにしましょう。

ロケールごとのSEOタイトル、メタ情報、Open Graph

Webflowには、タイトルタグ、メタディスクリプション、Open Graphのタイトルと説明文など、ページ単位のSEO設定があり、Twitterカードも設定できる場合が多くあります。表示されるH1だけでなく、ロケールURLごとに、これらすべてをローカライズしましょう。

SEOタイトルとメタディスクリプションは、複数の言語版で英語のメタデータを使い回さず、ロケールURLごとに固有の内容にローカライズしましょう。フランス語の商品ページに英語の<title>があると、Googleに一貫しないシグナルを送り、フランス語の検索結果でのクリック率も下がりかねません。

ローカライズしたWebflowページごとのチェックリスト：

  1. タイトルタグ — 英語をそのまま直訳するのではなく、現地ユーザーの検索意図に合わせて作成する。
  2. メタディスクリプション — 対象言語で、ページ固有のわかりやすい要約を作成する。
  3. Open Graph／ソーシャルメディア — 市場ごとの違いに応じて、プレビューのテキストや画像をローカライズする。
  4. スラッグ — ユーザーに役立つ場合はローカライズを検討する。後から変更する場合は、リダイレクトを維持する。
  5. canonical — 意図的に重複ページを統合する場合を除き、各ロケールURLの正規URLには、そのURL自体を指定する。

Googleの有用なコンテンツに関するガイダンスは、ユーザーを第一に考えたページを重視しています。内容が乏しい、または定型文しかない言語版は、SEOの面でも、回答の情報源としても十分ではありません。メタデータのローカライズは必要ですが、それだけでは不十分です。充実した本文コンテンツも欠かせません。

CMSコレクションと共通のデザインシステム

Webflow CMSは、ブログ、導入事例、チーム紹介ページ、商品カタログなどを支えています。多言語CMSの運用は、コレクション間の整合性が崩れるとうまくいきません。たとえば、フランス語の記事3件が英語の導入事例にリンクしていたり、共通の参照フィールドが別のロケールのアイテムを指していたりするケースです。

整合性を保つための実践的な方法：

  • ロケールごとに同じコレクション構造を用意する方法。言語ごとに個別のアイテムを作成し、共通の内部IDや参照フィールドで対応するアイテム同士を関連付けます。
  • Webflowのローカライズ機能や連携サービスが、1つのアイテム内でロケール別のフィールドをサポートしている場合は、フィールド単位でローカライズする方法。
  • コンポーネントは共通化し、コンテンツはローカライズする方法。デザインシステムのクラスは統一し、テキスト、画像、リンクをロケールごとに切り替えます。

CMSテンプレートに複数の言語が混在すると、たとえばドイツ語の記事に英語の著者紹介が表示されると、Googleにはユーザーの期待に合わないページとして映ります。コレクションのテンプレートで、共通UIの文言、データがないときの表示、フィルターのラベルを点検しましょう。

hreflang、canonical、サイトマップ

hreflangアノテーションは、別の言語版や地域版のURLをGoogleに伝えるものです。対象となるページ群全体で、相互に参照する必要があります。Webflowでは、次の方法でhreflangを実装できます。

  • サイトまたはページの<head>内にカスタムコードを追加する方法（多くの場合、ロケール対応表から生成）。
  • 利用環境が対応している場合、ホスティングのエッジ側でHTTPヘッダーを設定する方法。または、
  • XMLサイトマップにxhtml:linkで別言語版・地域版を記載する方法。

XMLサイトマップは、各言語版の発見を助けます。また、hreflangの実装手段として使う場合は、xhtml:linkによるhreflangアノテーションを含めることができます。新しいロケールを公開したら、更新したサイトマップを送信しましょう。

各言語・ロケールのURLには明確な正規URLを設定し、重複がある場合は、同じ言語の優先URLを指定しましょう。完全にローカライズしたページを公開しているのに、すべてのロケールのcanonicalを英語版ホームページに向けるのは避けてください。URL統合に関するシグナルが混乱します。

hreflangの主な実装方法を1つ選び、ロケールを追加・削除するたびに、相互参照の組み合わせ全体を再生成しましょう。一部のページにだけ手作業で個別にタグを追加していると、クラスターはすぐに崩れてしまいます。

hreflangの仕組みをさらに詳しく知るには、Googleのローカライズ版に関するドキュメントと併せて、多言語SEOに対応する製品機能もご確認ください。

標準機能とサードパーティによる翻訳手法の比較

Webflowを使うチームは、一般的に次の方法から選びます。

Webflow標準のローカライズ機能（利用プランで対応している場合）— Webflow内でロケール別フィールド、ローカライズしたページの公開、URLを管理します。メリット：デザイナーの作業フローになじみやすいこと。デメリット：コンテンツの品質チェックとSEOフィールドの適切な管理は、依然として必要です。

サードパーティの翻訳オーバーレイ — JavaScriptのレイヤーで、クライアント側のテキストを差し替えます。メリット：短期間で公開できるように見えること。デメリット：個別のURLやサーバー側でレンダリングされたHTMLがないと、クロールのしやすさで劣る場合が多いこと。Googleは、Cookieだけに依存した配信ではなく、クロール可能なURLを推奨しています。

エクスポート／TMS／再インポートのワークフロー — CATツールや翻訳プラットフォームで翻訳し、ローカライズしたCMSアイテムを公開します。メリット：用語集や翻訳メモリを活用して規模を拡大できること。デメリット：代替表示される英語が古いまま残らないよう、管理プロセスが必要です。

どの状況にも最適な方法はありません。デモの速さだけでなく、それぞれの方法でクロール可能な個別URL、ローカライズされたメタデータ、保守しやすいhreflangを実現できるかどうかで評価しましょう。

コンテンツ制作・編集のワークフローと品質チェック

複数言語が混在するページは、プラットフォームの不具合ではなく、プロセスの不備から生まれることがほとんどです。Webflowで実践できる品質チェックのワークフローは次のとおりです。

  1. ロケール別の入力完了チェック — 対象ロケールの必須フィールドに空欄がある場合は公開しない。
  2. 表示言語のスポットチェック — ナビゲーション、ボタン、フォームのラベル、エラーメッセージがページの言語と一致しているか確認します。
  3. リンク監査 — 意図的に別言語へ誘導する場合を除き、内部リンクの遷移先が同じロケール内に収まっているか確認します。
  4. SEO項目のレビュー — タイトル、メタ情報、OGがローカライズされているか確認します。
  5. hreflangの相互参照のサンプル確認 — ロケール単位の一括処理が終わるたびに、URLのペアを5組テストします。
  6. ステージング環境のクロール — レンダリング後のHTMLを取得し、言語とアノテーションを確認します。

ロケール対応表の管理責任者を決めましょう。ドイツ語版が存在するページを把握しているのが、デザイナーだけという状態は避けるべきです。

実装チェックリスト

Webflowで新しいロケールを公開するたびに、次のチェックリストを活用してください。

よくある間違い

Webflowの翻訳でSEOに悪影響を及ぼしやすいのは、次のようなミスです。

  1. Cookieやブラウザーの言語設定だけに依存 — クロール可能な別言語版URLがありません。
  2. ローカライズ済みページのメタデータが英語のまま — タイトルとディスクリプションが翻訳されていません。
  3. 共通部分だけを翻訳 — ナビゲーションはフランス語でも、本文は英語のままです。
  4. hreflangの相互参照の不備 — 一部のテンプレートにしか新しいロケールが追加されていません。
  5. IPアドレスによる自動リダイレクト — ユーザーやクローラーが別言語版にアクセスできなくなります。
  6. CMSの参照先のずれ — ローカライズ済みの投稿が英語のアセットにリンクしています。
  7. 内容の乏しいロケール別ページ — 市場での足場を「確保」するためだけに、仮のページが公開されています。
  8. 翻訳オーバーレイとネイティブのロケール機能の重複 — 2つのシステムが同じURLを取り合っています。

Bingウェブマスターガイドラインでも、各市場でのインデックス登録に向けて、クロール可能で有用なコンテンツと明確なサイト構造が重視されています。クロールしやすさに関するルールの多くは、Google以外にも当てはまります。

従来の検索と回答エンジンに共通する基盤

SEO項目をローカライズしたWebflowのロケール別ページでは、Google、Bing、回答エンジンのいずれに対しても、共通の基盤が重要です。クロール可能な各言語版、明確なエンティティ、根拠に裏付けられた主張、事実に即した構造化データ、そして英語だけの形ばかりのページではない、実質的なローカライズが求められます。以下のガイドは、同じ多言語配信の基準をプラットフォームごとの視点から捉えたものとして活用してください。

Google検索でページが検出されるには、クロール可能なロケール別URL、各言語に適したHTML、正確なタイトルと見出し、代替言語版がある場合は相互に参照するhreflangが必要です。技術的な基盤には、インデックス登録可能なコンテンツ（Cookieだけに依存した言語切り替えでは不十分）、ローカライズされたメタデータ、サイトマップ、適切なcanonicalの運用が含まれます。コンテンツ品質の要となるのは、各言語でユーザーを第一に考えたメインコンテンツです。権威性は、翻訳ツールの宣伝ではなく、組織情報の明確さと裏付けとなる情報源から生まれます。多言語対応では、市場別・言語別の各URLが単独で成り立つ必要があります。Search ConsoleのカバレッジとURL検査を使い、ロケールごとに状況を測定してください。確かな点と不確かな点：Googleは多言語対応とhreflangの動作を文書化していますが、特定のCMSや機械翻訳のポストエディット（MTPE）ワークフローによる検索順位は保証していません。

プラットフォーム別ガイド：Bing

Bingは、GoogleがURLやコンテンツの明確さに求めるものと同様に、構造が明確でクロール可能な多言語ページを検出し、インデックスに登録します。技術的な基盤には、取得可能なロケール別URL、有用なコンテンツ、Bing Webmaster Toolsでの監視が含まれます。UI要素だけを翻訳するのではなく、見出し、主張、FAQのローカライズを優先してください。権威性を示す要素としては、引き続き信頼できる情報源と一貫したエンティティが重要です。多言語対応では、クライアント側だけで動作する切り替え機能の背後に各言語版を隠さないでください。Bing Webmaster Toolsでインデックス登録状況とクロール統計を測定しましょう。確かな点と不確かな点：Bingのガイドラインは、クロール可能で有用なコンテンツを重視しています。翻訳ツールに関して、Bing独自のランキング要因を根拠なく想定しないでください。

プラットフォーム別ガイド：ChatGPT

ChatGPTは、各言語版が明確で、回答に活用しやすい公開ページを引用または要約することがあります。情報の発見は従来のクロールに基づく順位付けとは異なり、可視性は情報源として選ばれたり、回答内で参照されたりする形で現れます。技術的な基盤は、やはりアクセス可能なHTMLのURLです。テキストを隠してしまうウィジェット型のオーバーレイではありません。コンテンツ面では、直接的な回答、FAQ、用語集に基づく一貫した用語が役立ちます。権威性は、根拠と、ロケールをまたいだエンティティの一貫性から生まれます。多言語対応では、各ロケールのページが単独で読んで理解できる必要があります。測定は完全ではないため、引用状況の確認は仮説の検証として扱ってください。確かな点と不確かな点：MTPEや特定のCMS連携によってChatGPTに引用されることを保証する文書化された根拠はありません。

プラットフォーム別ガイド：Gemini

Geminiと関連するGoogleのAIサービスでは、一貫したエンティティ、正確な構造化データ、インデックス登録可能なローカライズ済みページが役立ちます。可視性とは、参照・認識されることであり、Gemini独自のランキング要因を根拠なく想定することではありません。技術的な基盤は、Google検索のクロール可能性やメタデータの品質と共通しています。コンテンツでは、各言語で主張や定義を明確に示す必要があります。権威性は、組織情報の一貫性と裏付けに左右されます。多言語対応では、用語集で製品名を統一することで、ロケール間の混乱を減らせます。従来どおりSearch Consoleで測定しつつ、AIの回答を抽出して定性的にも確認してください。確かな点と不確かな点：Geminiの挙動は、hreflangや各言語版に関するGoogle検索の公式ガイダンスの代わりにはなりません。

プラットフォーム別ガイド：Google AI Overviews

Google AI Overviewsは、回答の裏付けとなるページへのリンクを表示することがあります。掲載対象となるための基本は、引き続きユーザーを第一に考えた、インデックス登録可能なコンテンツです。AI Overviewsは言語切り替え機能ではなく、hreflangの代わりにもなりません。技術的な基盤は、クロール可能なロケール別HTMLと、事実に即した構造化データです。コンテンツ面では、各言語での簡潔な回答と明確な見出しが重要です。権威性の評価も、有用なコンテンツに求められる水準に沿ったものです。多言語対応では、翻訳されたページがAI Overviewsに掲載される保証はありません。Search Consoleで生成AI関連のレポートが利用できる場合はそれを使って測定し、従来のインデックス指標とは分けて管理してください。確かな点と不確かな点：どのような翻訳ワークフローでも、AI Overviewsへの掲載を約束することはできません。

GlotEOが担う役割

Webflowのローカライズを成功させるには、デザイン、CMS、SEO運用の各担当が、ロケールに関する情報を一元管理し、共有することが重要です。GlotEOのWebflow翻訳連携は、Webflowのビジュアル制作環境とクロール可能なURL構造を維持しながら、作業指示書、用語集、レビューステップを結び付け、チームによるウェブサイトのローカライズワークフローの管理を支援します。

少数のページを手作業で複製する運用から規模を拡大するなら、ウェブサイトのローカライズプラットフォームをご検討ください。SEOシグナルを損なうことなく、翻訳、QA、公開承認のプロセスを連携できます。ワークフロー別のプランを比較する際は、GlotEOの料金とプランをご確認ください。

戦略面の背景を理解するには、この実装ガイドと併せて国際SEOと多言語SEOの違いをご覧ください。また、hreflangやメタデータの管理が日々の編集業務の一部になったら、多言語SEOツールを活用してください。

参考文献