SEO関連のあれこれ：多言語サイトをGoogleに知らせよう！

以前にこのサイトでもお話をしましたが、Googleが「検索結果の評価基準をスマホページにするね！」と宣言したMFI(モバイルファーストインデックス)導入発表から結構な時間が経っています。何だそれ？となった方はぜひこちらの記事を読んでみてください。
夏に導入されることは無いだろう、というお話もちらほらお聞きしていますが、Googleは年内に何とかしたいなぁ。というような感じらしいです。
参考：http://www.sem-r.com/news-2015/20170323092800.html

そんなMFIに向けてサイト作成をしている方々はどのような対応をしたらいいのでしょうか。今までも色々お話は出ていたのでサイトで取り上げたりもしましたが、今回は「多言語を取り扱っているサイト」はどうしたらいいか！という新情報が入ってきたのでそれをお伝えしようと思います！

多言語を取り扱うサイトのタグ設定

インターネットは日本国内だけではなく全世界へとネットワークを繋げています。そのため、例え日本のサイトであっても多くの言語を使用して専用のページを作成しているサイトさんもあるのではないでしょうか？このように同じコンテンツを別のURLで別言語を使用している場合、Googleにそのことを知らせることでその言語を使用している地域では優先してそのページを表示してくれるんです。

この多言語サイトがあるということをGoogleに知らせる事が出来るタグが「hreflangタグ」と言います。このサイトでは言語アノテーションタグと呼ばせてもらいます。

hreflangは指定したページに適している地域や言語をGoogleに知らせることが出来るタグです。タグの記述方法はいくつか存在してますが、今回はheadタグ内にリンク要素として書き込む方法をご紹介しましょう。

<link rel="alternate" hreflang="ja" href="http://example.com/">
<link rel="alternate" hreflang="en" href="http://example.com/english/">

hreflangタグは上記のようなタグを使ってそれぞれの言語のページに、ページ毎に記載をします。それではタグの解説をちょこっと。

言語の指定はISO_639-1のコードで記述する必要があります。
ちなみに、ISO_639-1のコードとは国際的に取り決められている言語を表す2文字のアルファベットのことです。「jp」という2文字はどの世界でも「日本語」と認識されているわけですね。ISO_639-1のコードはここで確認することが出来ます。
また、このタグはサイトごとではなくページ単位で有効なタグなので、ページ毎に設置する必要があります。その為、下層のページにはその下層のページのURLで設置する必要があります。

それからもう一つ。このタグはどの言語ページでも同じタグを設置する必要があります。つまり、日本語のページにも日本語ページはこれですよ、というタグを設置しないといけないというわけですね。

MFI後に向けての変更

この言語アノテーションタグですが、MFI後はどのように設置したら良いのでしょうか？
まず、パソコン向けサイトの場合は上記の設置でOKですが、スマホ向けページに関してはパソコン向けページに向けて一方的にタグを設置しておく必要があります。

例えば下記の用に日本語サイト、英語をサイト、それぞれにスマホサイトを準備していたとしましょう。

この時、全てのURLに下記の言語アノテーションタグを設置します。

<link rel="alternate" hreflang="ja" href="http://example.com/">
<link rel="alternate" hreflang="en" href="http://example.com/english/">

その上で、下記アノテーションタグをPCページに設置。

<!-- http://example.com/ に設置-->
<link rel="alternate" media="only screen and(max-width:640px)"href="http://example.com/sp/">

<!-- http://example.com/english/ に設置-->
<link rel="alternate" media="only screen and(max-width:640px)"href="http://example.com/sp/english/">

そして下記canonicalタグをSPページに設置してURL統一を図ります。

<!-- http://example.com/sp/ に設置-->
<link rel="canonical" href="http://example.com/">

<!-- http://example.com/sp/english/ に設置-->
<link rel="canonical" href="http://example.com/english/">

どうでしょうか？わかりましたか？
ちょっとややこしいので図にまとめてみましょう。

すこしは感覚が掴めるでしょうか？注目すべきは矢印の向きです。PC同士はお互いに向いていますが、スマホページはPCページにしか向いていません。PCページには、スマホページのURLを記述した言語アノテーションタグは設置しなくても良い、ということですね。

実は前まではパソコン向けページに設置するだけで良かったのですが、今回はこの仕様へと変更しようとしているようです。Googleからの公式発表ではありませんのでまだ確定、というわけでは無さそうですが、いずれにせよ変更点は大きいですね。
ちなみに、これはスマホサイトを別URLを使って運営しているパターンに限られます。
今現在多言語のサイトを持っていうという人は、この事実を事前に知っておくだけでも実際に実装された時に素早く対応が出来るかもしれませんね。