Webflow多言語サイト運用の落とし穴—相対リンクは「ページ指定」にすること

多言語サイトをWebflowで運用していると、テキストや画像の翻訳よりも先に「リンクが想定と違うページへ飛ぶ」問題にぶつかることがあります。特に、英語以外のロケール（例えばフランス語）から内部リンクをクリックしたのに、なぜか英語版に戻ってしまうケース。これはサイトの体験を一気に崩してしまう、地味に深刻な不具合です。

原因はコードの複雑さではなく、実は「リンクの種類」の指定ミス。Webflowの多言語展開では、内部リンクを文字列の相対URLで直書きするのではなく、必ず「ページ」を選んで紐付ける必要があります。

その背景と対策、実務でのチェック方法までをまとめます。

• 結論: Webflowの多言語（Localization）では、リンクを「URL直書き」ではなく、必ずリンクタイプを「Page（ページ）」で指定すること。そうしないと、言語切替時や遷移時に英語版など別ロケールへ飛ぶケースが発生する。
• 理由: Webflowの自動ロケールルーティングは「ページ指定リンク」にだけ適用される。相対パスを文字列で書いてもロケールは自動補完されない。
• 対策: ナビ、ボタン、本文内リンクを含む内部リンクはすべて「ページ指定」へ統一。CMSでも可能な限りURL直書きを避ける。

なぜ起きるのか

WebflowのLocalizationは、各言語ごとに /en や /fr のようなサブディレクトリ配下でページを公開し、同一ページの言語違いを内部的にページ単位で関連付けている。

この「ページ単位の関連付け」があるからこそ、ユーザーが言語を切り替えた時に同じ文脈のページへスムーズに遷移できます。一方で、リンクの設定が文字列のURL直書きだと、Webflowは「どのページの他言語版か」を判断できず、単なる文字列として解釈します。結果、せっかく言語別にページを用意していても、そのリンクだけ文脈から外れたロケールへ飛んでしまうのです。

• 自動ルーティングが効く条件: リンクの設定が「Page」または「Collection page」になっていること。
• 効かないケース: リンクタイプを「URL」にして about や /about といった相対パスを直書きした場合。クリック時は書いたパスへそのまま遷移し、ロケールを見てくれない。

結果として、例えばフランス語サイト上のリンクでも /about に直書きしていれば、英語版 /about へ飛んでしまう、といった言語逆戻りが起きる。

運用現場では、ページの追加や差し替えのタイミングで「とりあえずURLを入れておく」ことが起こりがちです。最初は気づかれなくても、ロケールを跨ぐ導線で違和感が積み重なり、コンバージョン前に離脱してしまう原因になります。

小さな事例から学ぶ

とあるサイトで、言語切替用のロケールスイッチャーは正しく動いているのに、本文中のボタンを押すと英語版に戻ってしまう現象がありました。調べると、そのボタンは URL タイプで /about と直書きされており、Webflowの自動ルーティングが効かない設定になっていました。

同じボタンを「Page: About」に設定し直したところ、フランス語では /fr/about、英語では /en/about に自動で遷移。ページ同士の関連付けはWebflowが持っているため、コンテンツ側でURL文字列を管理する必要はありませんでした。

この改善によって、「戻される感じ」が消え、各言語の体験がシームレスに。加えて、運用チームは今後の更新でもURLを手で書く必要がなくなり、ヒューマンエラーのリスクを下げることができました。

‍

よくある誤解

• 相対パスならロケールに合わせてくれる: いいえ。文字列の相対URLはそのまま解釈され、ロケール自動切替は行われない。
• <a> に id を付ければ直る: 無関係。id の有無はロケールルーティングに影響しない。重要なのはリンクタイプの指定。

相対パスは「人間にとって分かりやすい簡略表記」に過ぎません。Webflowの多言語ルーティングは、URL文字列ではなく「同一ページ同士の紐付け情報」を手がかりに動きます。だからこそ、リンクタイプで「Page」を選ぶことが本質的な解決策になります。

実運用でのベストプラクティス

• 内部リンクはすべて「ページ指定」へ統一
  • ナビゲーション、ボタン、カード、フッター、記事本文内の内部リンクなど。
  • コレクション一覧から各詳細へ飛ばす場合はCollection pageを選ぶ。
• CMS本文でのリンクも極力直書きを避ける
  • 可能であればリンクフィールドやコレクション参照を利用し、URL文字列管理を減らす。
• スラッグの統一は“あれば良い”が必須ではない
  • 各ロケールでスラッグが異なっても、ページ指定リンクならWebflowが対応ページに解決してくれる。
• 新規ページ追加・編集時の点検
  • 誤って「URL」指定になっていないかを定期的にチェック。

特にガバナンス上の工夫として、レビュー時に「リンクタイプがURLになっていないか」を見るチェック項目を入れておくと、トラブルの芽を早期に摘めます。共通コンポーネント（ヘッダー、フッター）から着手すると、サイト全体の安定度が一気に上がります。

正しい設定の手順（Webflowデザイナー）

• リンク要素を選択する
• 右側の設定パネルでリンク設定を開く
• リンクタイプをURLではなくPage（またはCollection page）に切り替える
• 対応するページを選択して保存
• 必要であれば、他のロケールでも同じリンク要素が「Page」指定になっているかを確認

ポイントは「Page」指定にするだけで、各ロケールのパス差異を気にしなくてよくなることです。スラッグが各言語で違っていても、Webflowが裏側で正しく解決してくれます。

運用チェックリスト

• 内部リンクにURL直書きはないか
• ナビゲーションとフッターの共通リンクは「Page」指定か
• CMSのリッチテキスト内リンクは、可能ならリンクフィールド/参照で運用しているか
• 言語別公開後、主要導線で英語へ“逆戻り”しないかを目視確認したか

具体例

• フランス語ページ上のボタンを /about と直書きした場合、常に /about（多くは英語版）へ遷移する。
• 同じボタンのリンクを「Page: About」に設定した場合、フランス語サイトでは /fr/about、英語サイトでは /en/about へ自動的に遷移する（該当ロケールのページが存在する場合）。

まとめ

• 内部リンクは「Page（ページ）」で指定が鉄則。
• URL直書きはロケール無視になりやすく、言語逆戻りの原因。
• 運用のコスト削減と言語体験の一貫性のため、リンク運用ルールをチームで統一しておくと安心。

リンクは一見地味ですが、体験の“つなぎ目”です。ここがほつれていると、どれだけ翻訳やデザインに力を入れても、ユーザーは迷子になります。今日から内部リンクの「Page指定」徹底を運用ルールに取り入れ、安心して伸ばせる多言語運用に整えていきましょう。

‍