theonehub.app

WEB — Webサイトの基礎

多言語ページは本文・URL・hreflangを揃える

多言語ページは本文・URL・hreflangを揃えるのアイキャッチ

ENボタンだけを付けても、記事本文の英語版はできません。多言語サイトでは、各言語の内容、移動先のURL、検索向けの対応関係をそれぞれ用意します。

この記事の目次

対応する記事を用意する

日本語の記事と同じテーマの英語記事を独立したURLで公開します。メニューだけ翻訳して本文が日本語のままなら、その状態を読者へ明示します。翻訳や編集版にした本文が、元記事の重要な条件を落としていないかも確認します。

言語ボタンは同じ記事へ向ける

記事でENを押したら、その記事の英語版へ進むようにします。トップページへ戻すだけでは、読者が同じ内容を探し直す必要があります。対応版が存在しない場合の案内も決めます。

相互の対応を指定する

hreflangは、言語や地域の異なる版の関係を伝えます。Googleの案内では、各版から自分自身と相手の完全なURLを指定し、相互に参照する必要があります。英語版からの戻り参照が抜けていないか確認します。

実際の言語と表示を点検する

hreflangは本文を翻訳する仕組みではありません。日本語と英語のURLをそれぞれ直接開き、タイトル、本文、ナビ、リンク先を確認します。初回アクセスの自動転送で片方が見られなくならないかも検査し、検索向け設定と利用者の切り替え操作の両方を確認します。

同じ記事の日英本文を用意し、言語リンクと相互指定を揃える
同じ記事の日英本文を用意し、言語リンクと相互指定を揃える
画像を選ぶと拡大できます。
  1. 対応する本文を、それぞれ独立したURLで用意します。
  2. 言語ボタンは、同じ記事の相手言語版へ向けます。
  3. 自分自身と相手版を含むhreflangの対応を確認します。

三つの仕組みを別々に完成させる

多言語対応には、読める本文、読者が使う切り替えリンク、検索向けの対応指定があります。一つができても残りが自動で完成するわけではありません。英語のナビが表示されるだけなら、記事を英語で読める状態かを別に確かめます。

対応する記事の組を一覧にすると、切り替え先と設定の確認に同じ基準を使えます。各組には日本語URLと英語URL、公開済みかどうかを記録します。同じカテゴリの別記事へリンクしていないか、まだ作っていない版を指定していないかも見ます。

記事を読みながらENへ切り替える例

日本語でPDFの整理方法を読んでいる人が、ENを押す場面を考えます。期待するのは、そのPDF記事を英語で続けて読むことです。英語トップへ戻されるだけでは、同じテーマを探す作業が増えます。対応する英語記事を用意し、そこへ直接リンクします。

英語版では本文だけでなく、見出し、目次、関連記事の案内も確認します。戻るJAリンクが同じ日本語記事へ向いているかを見ます。両方のURLを直接開く試験も行い、以前の言語設定などによって、意図した版を読めなくなる条件がないか確認します。切り替え操作と直接アクセスは、別の入口として扱います。

一組ごとの確認表

対象合っている状態
本文それぞれの言語で意味と重要な条件が伝わる
言語ボタン同じテーマの対応版へ進む
正規URLそれぞれの公開ページの設計と一致する
hreflang自分と対応版を相互に示す
一覧各言語の記事を通常のリンクから探せる

英語版を要約や編集版として作る場合も、元記事で重要な条件を省いて別の結論にならないかを確認します。更新時は対になる原稿を一緒に見直します。言語の指定が正しくても、片方の本文が旧仕様のままなら読者の理解はそろいません。メタ情報と実際に読む内容の両方を更新の対象にします。

参考リンク