投稿日:2018年4月13日

多言語対応サイトでは訪問時にどうサイトを表示させるのが良いだろう?

タイトルまんま。

ええっと、表示方法や出し分け方法っていろいろ手法があるんやんな、どれがえんやっけ。今まで悩んだこと無いの、なんでやっけ。

サイトで多言語対応するにあたっての、ブラウザ言語設定での切り替え・出し分け・ローカライズ(?)に関する考察。

ユーザーにとってほんとに良いのはどういう挙動だろう?

これの最適解まとめたのってあんま見たことないなぁ〜と思ったので、時間出来たので調べてみました。そして調べる最中頭こんがらかったり、情報整理する必要が出たりしと挫折しそうになったので、同志のために記事にまとめました。あかんところあったらゆーて下さい。

頭に浮かんだ手法羅列

  • いったんデフォルト言語で出してユーザーが必要に応じてボタンなどから切り替え
  • URLのクエリで言語設定して該当言語のコンテンツをPHPでインクルード
  • ブラウザ言語設定を参照して該当言語のコンテンツを格納したページへリダイレクト
  • ブラウザ言語設定を参照してajaxでコンテンツをページ内で出し分け
  • PHPロケール情報から判定
  • 各言語ページの一個上の階層に親ページを用意して選択
  • 文字サイズボタンみたいにcookieで記憶させといて2回目以降訪問時に出し分け
    「コンテンツの表示の仕方」と「ユーザー言語の判定の仕方」と「ディレクトリ(URL)の作成方法」の問題が全部ごっちゃになってますが、いったん羅列、です。

結論

訪問時は特に出し分けはしない、もしくはサイトTOPへの初回訪問時のみブラウザ言語設定の言語のコンテンツを表示させるなどする(手法はJSでもPHPでも。)

サイト内に言語の切り替えボタンは必須。そこからユーザーの意志で各言語に行き来出来るようにする

最終で見ていた言語をcookieで保持しておいて次回訪問時にコンテンツをajaxで出し分け、とかもできればしない。(ユーザーが意図せぬ挙動となる可能性・検索結果が最適化されない問題)

ディレクトリ等コンテンツ自体を各言語で作成し、URLさえ叩けば目的言語のコンテンツに行けるようにするのが吉。

以上。一般的にはこうかと。もちろんコンテンツの内容や構成、目的によって例外もあり。理由は次項「理由」にて。

ex)
日本語
https://example.com/
https://example.com/about/
↑↓(※共通パーツとして各言語間を行き来出来るボタンをサイト内の目立つ位置に置く)↑↓
英語
https://example.com/en/
https://example.com/en/about/

一番単純なのが吉ってことですね。

今まで悩んだこと無いのは最適と思われる形が単純なものだったからか。

出し分けの具体的な手法メモったのは下の方に移動しました。ほんとは真っ先に調べたんだけど。
記事書いていろいろ情報をたどる間にいろいろ変にいじんないほうが良さそうだなーってなったので。

理由

サイトの情報を利用するのはエンドユーザーだけではないから。検索エンジンのクローラーに正しい情報を提供する→エンドユーザーを適切なコンテンツへ導く手助けにもなるよねって話。


最初常にブラウザの言語設定見て各言語にリダイレクトする前提でググってたら、グーグルさん(の検索結果)が俺にも優しくしてくれないと検索結果うまく出せないよって言い出した。

多地域、多言語のサイト – Search Console ヘルプ
https://support.google.com/webmasters/answer/182192?hl=ja

グーグルさん:「各言語で最適化された形で検索に引っ掛けるためにはリダイレクトとか1ソースで各言語列挙とかあんまおすすめしないぞ」

SEOという言葉を持ち出すと(古来の業者のバッドノウハウ的な対策が思い出されて)途端に胡散臭い感じがしていやなのですが、まぁ要するにはそういうことです。

サイトはブラウザ経由でアクセスしてくるエンドユーザーにも、情報を取得するために巡回してくるクローラーにも必要な情報を必要な形で見せる必要性がある。もしクローラーがクロールしにきたときにリダイレクトがかかって、クロールできるのが特定の言語だけ、などとなるとその言語以外で検索するユーザーにとって、それは不利益になる。

ユーザーの導線だけじゃなくサイト外での検索時の挙動も鑑み、サイト訪問時の言語自動切り替えは用法用量を守って。

下層アクセス時ブラウザ言語設定での自動切り替えも出来るけどgoogleの検索結果にクロールされた各言語での最新情報を反映させるため、必須じゃなければあまりやらないほうが良さそう。

あと、下層への流入元にもよるけれども何か(リンク元記事・バナーなど)を参照して見に来ているならそちらを優先したほうがよいとおもわるる。(他にも根本的な理由がある感じがするけど今は思いつかない・・・)

真面目か。

ここまで考える必要が無いサイトもありそうなので、そういうサイトなんかは気にしないでいいと思う。

  • 各言語ごとで細かくインデックスされないでいいサイト
  • むしろnoindex,nofollowなサイト
  • 短期的に広告流入前提で設置するサイト
  • 見た目有りきとか限定公開とかプライオリティの重きが違うサイト

また、よくCookie使って文字サイズの制御とかやるけど、それと何が違うのって、スタイルの変更と違ってCookieで言語が変更されると表示されるコンテンツ、「情報」自体が違うから毎度出し分けすることにより先出のクロールの問題の元になるかと。

調査の過程

以下には調査の過程を。
文章が時系列羅列で思考の寄り道付きで読みづらいまま。
知りたい方のみどうぞ〜

その1

多言語Webサイトを制作する時に気をつけたいポイント | Webクリエイターボックス

多言語Webサイトを制作する時に気をつけたいポイント

ブラウザーの言語を日本語にしていると、多言語サイトでも日本語のホームが自動的に表示されるサイトがあります。しかし、この設定はSEOの観点で非推奨です。これはGoogleのウェブマスター向け公式ブログでも記述されています。

Google ウェブマスター向け公式ブログ: 多言語ウェブサイトの作成について
https://webmaster-ja.googleblog.com/2011/11/blog-post.html

その2

うーん、そうなのか〜。ちょっとこれきいてみよう、とおもったら
コレ(2011年)の後に書かれた公式ブログ(2014年)ではリダイレクトNGじゃないけどhreflang書いてねって言ってるな〜
Google ウェブマスター向け公式ブログ: 海外のユーザーに適したホームページの作成
https://webmaster-ja.googleblog.com/2014/05/creating-right-homepage-for-your.html

でもって

Googlebot がアクセスしてクロールおよびインデックス登録できる: ローカライズされたページのクロールおよびインデックス登録がブロックされないようにしてください。

って。ようはhtaccessでクローラーはスルーさせないとダメってことかな?ふむー

と思ったら、上記は「ホームページ」(サイトルート)に関する設定で、各言語がディレクトリワケされている親のページがあるときのはなしだった。

なので上記その1の記事のWebクリエイターボックスのマナさんがゆーてる通りやんって話????
古い記事扱いしてほんまごめんなさい。。。ナマ言ってすみませんでした・・・(あとフレックスボックスのまとめチートシート記事を事あるごとに参照していますありがとうございます。。。)

結局

下記に合わせると自動でリダイレクトかけるのは避けた方が良いみたい。(最初に書いた結論と同じ)
多地域、多言語のサイト – Search Console ヘルプ
https://support.google.com/webmasters/answer/182192

各言語のページを簡単に見つけられるようにする
各言語のコンテンツには別々の URL を使用します。翻訳したページの表示には Cookie を使用しないでください。各言語のページ間で相互リンクすることをおすすめします。相互リンクを使用すると、ドイツ語のページにアクセスしてしまったフランスのユーザーも、ワンクリックで適切な言語ページに移動できます。

ユーザーの認識言語に基づいて自動的にリダイレクトしないようにしてください。このようなリダイレクトを行うと、ユーザー(と検索エンジン)がサイトのすべての言語バージョンを見られなくなる場合があります。

グーグルさんの過去記事とかまとめると、言いたいこととしてはこういうことか。
グーグルさん:「振り分けするよりすなおにデフォルト言語で見せて選択させたげて〜。訪問時自動リダイレクトは各言語の情報をクロールしてインデックス出来なくなるから、あんましないでね。するならHTML リンク要素:hreflangとx-defaultの設定をしてかつ、クローラーは振り分け除外してクロール可能なようにしてね。あとユーザーがボタンで切り替える機能は必須ね。」

そしてクローラーを除外して通すには、うまく振り分けないとメンテの手間がすごそうやから、よほどの理由ない限りリダイレクトはしない方向が良さそう…?というのが私の個人的意見です。うまいやり方知ってる人いらっしゃったらこっそりご教授ください。。

ちなリンク要素の書き方メモっときます。

言語や地域の URL に hreflang を使用する – Search Console ヘルプ
https://support.google.com/webmasters/answer/189077

hreflang=”ja”だと現在ページの言語が日本語であることを表す。
hreflang=”x-default”のほうは現在ページのサイトの大元となるページを表す。

 

ヘッダーの HTML リンク要素: http://www.example.com/ の HTMLセクションに、このウェブページの日本語バージョン(http://ja.example.com/)を示す link 要素を次のように追加します。

 

言語 / 国セレクタのあるページや、自動的にリダイレクトされるトップページの場合は、hreflang 値を「x-default」に設定したアノテーションを同様に追加する必要があります。

 

hreflangの書き方はここにものってる
多言語サイトの作り方とグローバルSEOの要点10(Wordpress)

多言語サイトの作り方とグローバルSEOの要点10(WordPress)

ブラウザ言語設定取得方法

もし自動で切り替えるなら。出し分けの手法メモ。

htaccess

.htaccessで日本語とそれ以外でディレクトリを切り替える方法 – ゆめいろデザイン : フリーランス UIデザイナー Webデザイナー [東京]
https://yumeirodesign.jp/blog/201501/htaccess-lang-change.html

JS

javascriptでブラウザの言語設定を取得する – Qiita
https://qiita.com/shogo82148/items/548a6c9904eb19269f8c

JS: ブラウザの言語設定の取得方法 – Qiita
https://qiita.com/hisahayashi/items/7696e2f61b1a68f3d2bf

PHP

みんなだいすきTAMさん
ブラウザの設定言語とCookieを確認して、言語切り替えをやってみた | Tips Note by TAM

ブラウザの設定言語とCookieを確認して、言語切り替えをやってみた

その他

っってまとめた後になんやけど
下記SONICJAMさんの記事にもわかりやすく書いてありました。(クローラーの事以外。おれの小一時間・・・・!)
素敵すぎますね。

WEBサイトの多言語化において考えるべきこと | ビジネス・戦略・サービス | BLOG | 株式会社ソニックジャム
http://www.sonicjam.co.jp/blog/strategy/001587/

そのた

多言語サイトを構築する際に気をつけること | RCMSサポートサイト – CMSの構築ならRCMS
https://support.r-cms.jp/help/detail/id=1363

ブラウザ設定による言語判定ロジックに関して | RCMSサポートサイト – CMSの構築ならRCMS
https://support.r-cms.jp/help/detail/id=842

↑この記事を見てTOPページ、初回のみ、、うーん。それもありか。となりました。2回目以降クロールできるってことやんね。

TIPs
Webサイトの多言語化で使えそうな小技 | Free Style

Webサイトの多言語化で使えそうな小技

SEO的な
多言語サイトの作り方とグローバルSEOの要点10(Wordpress)

多言語サイトの作り方とグローバルSEOの要点10(WordPress)

大規模バージョン
グローバル企業 Webサイトの「言語切替」と「国/地域選択」に注目してみた | ゆるやか広報班 | イントリックス
http://www.intrix.co.jp/blog/2016/06/08/multilingual_country_region_selector/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.