WEB — Webサイトの基礎
多言語ページは本文・URL・hreflangを揃える
ENボタンだけを付けても、記事本文の英語版はできません。多言語サイトでは、各言語の内容、移動先のURL、検索向けの対応関係をそれぞれ用意します。
この記事の目次
対応する記事を用意する
日本語の記事と同じテーマの英語記事を独立したURLで公開します。メニューだけ翻訳して本文が日本語のままなら、その状態を読者へ明示します。翻訳や編集版にした本文が、元記事の重要な条件を落としていないかも確認します。
言語ボタンは同じ記事へ向ける
記事でENを押したら、その記事の英語版へ進むようにします。トップページへ戻すだけでは、読者が同じ内容を探し直す必要があります。対応版が存在しない場合の案内も決めます。
相互の対応を指定する
hreflangは、言語や地域の異なる版の関係を伝えます。Googleの案内では、各版から自分自身と相手の完全なURLを指定し、相互に参照する必要があります。英語版からの戻り参照が抜けていないか確認します。
実際の言語と表示を点検する
hreflangは本文を翻訳する仕組みではありません。日本語と英語のURLをそれぞれ直接開き、タイトル、本文、ナビ、リンク先を確認します。初回アクセスの自動転送で片方が見られなくならないかも検査し、検索向け設定と利用者の切り替え操作の両方を確認します。

画像を選ぶと拡大できます。
- 対応する本文を、それぞれ独立したURLで用意します。
- 言語ボタンは、同じ記事の相手言語版へ向けます。
- 自分自身と相手版を含むhreflangの対応を確認します。
三つの仕組みを別々に完成させる
多言語対応には、読める本文、読者が使う切り替えリンク、検索向けの対応指定があります。一つができても残りが自動で完成するわけではありません。英語のナビが表示されるだけなら、記事を英語で読める状態かを別に確かめます。
対応する記事の組を一覧にすると、切り替え先と設定の確認に同じ基準を使えます。各組には日本語URLと英語URL、公開済みかどうかを記録します。同じカテゴリの別記事へリンクしていないか、まだ作っていない版を指定していないかも見ます。
記事を読みながらENへ切り替える例
日本語でPDFの整理方法を読んでいる人が、ENを押す場面を考えます。期待するのは、そのPDF記事を英語で続けて読むことです。英語トップへ戻されるだけでは、同じテーマを探す作業が増えます。対応する英語記事を用意し、そこへ直接リンクします。
英語版では本文だけでなく、見出し、目次、関連記事の案内も確認します。戻るJAリンクが同じ日本語記事へ向いているかを見ます。両方のURLを直接開く試験も行い、以前の言語設定などによって、意図した版を読めなくなる条件がないか確認します。切り替え操作と直接アクセスは、別の入口として扱います。
一組ごとの確認表
| 対象 | 合っている状態 |
|---|---|
| 本文 | それぞれの言語で意味と重要な条件が伝わる |
| 言語ボタン | 同じテーマの対応版へ進む |
| 正規URL | それぞれの公開ページの設計と一致する |
| hreflang | 自分と対応版を相互に示す |
| 一覧 | 各言語の記事を通常のリンクから探せる |
英語版を要約や編集版として作る場合も、元記事で重要な条件を省いて別の結論にならないかを確認します。更新時は対になる原稿を一緒に見直します。言語の指定が正しくても、片方の本文が旧仕様のままなら読者の理解はそろいません。メタ情報と実際に読む内容の両方を更新の対象にします。