最近、街で外国人を目にすることが多い。もう日本じゃないんじゃないかってぐらい外国人とすれ違う。
日本政府観光局(JNTO)が掲載している訪日外国人数のデータによると、毎月150万人前後の訪日外国人客がいる。
こうなったら、カフェやレストランの飲食店はもちろん、小売店や美容室(外国人がわざわざ日本でヘアカットしてもらうそうな!)のサイトを多言語で公開するのは必須というものだろう。
ググれば、サイトを多言語化する方法は色々出てくる。しかしながら、検索結果を多言語対応させるのも忘れちゃいかんですよ。
先日、SMX Eastという検索エンジンにまつわるカンファレンスが開かれた。このイベントの、検索エンジンを運営している人に質問できるコーナーで、国際的なドメインに最適なURL構造が話題に上がった。その中でgoogle検索エンジンの中の人はこう答えた。
最も重要なのは、hreflangタグを利用することだ。
by ゲイリー・イリーズ
hreflangタグとは、まさに検索結果を多言語対応させるための設定なのだけれど、これを忘れていると英語圏の人に日本語ページが表示されたりとアイタタタな事になる。今回は、このタグのおさらい、それからWordPressサイトで簡単にhreflangを設定できるプラグインLanguage Selector Relatedを紹介しよう。
hreflang
1サイト内に複数言語によるコンテンツがある場合、あるいは言語ごとにサイトを用意している場合にhreflangを使う。
※日本語onlyなサイトには無関係だから、Search Consoleで警告されても無視して問題ない。
例えば、http://some-site.com/ja-jpという日本語サイトを英語に翻訳したhttp://some-site.com/en-usというサイトを持っている場合、同じコンテンツを2つの言語で作っていますよということを検索エンジンに教えることが推奨されている。
hreflangを適切に設定することで、ググる人の言語と地域に合ったサイトを検索結果に表示してくれるから、英語コンテンツがあるのにも関わらず、英語で検索した人に日本語コンテンツが表示されるといった事を防げる。
レストランの公式サイトを日本語と英語で作っていた場合、英語圏の人には英語ページが検索結果に表示されてほしいと思うけれど、hreflangによって確実に表示されるようになる。
hreflangの設定方法
ここからは具体的な設定方法の解説。といってもその方法/考え方はシンプルで、多言語展開しているページの<head>セクションにlinkタグを指定するだけだ。
1 2 |
<link rel="alternate" href="http://example.com/en" hreflang="en" /> <link rel="alternate" href="http://example.com/ja" hreflang="ja" /> |
hrefには言語ごとのページのURLを、hreflangには言語(必要に応じて地域)を設定する。
言語(上記のenあるいはja)はISO 639-1形式で記述し、地域はISO 3166-1 alpha-2形式でハイフンを付けて言語に続けて記述する。(例えばja-JP)
ここで注意したいのが、多言語展開しているページ毎にページ同士でhreflangを書かなければいけないということ。
ページ毎とは、サイトのトップページにhreflangを記述するだけでなく、記事などのコンテンツ毎にも記述しなければいけないということ。
またページ同士とは、日英でサイトを作っている場合に日本語サイトと英語サイトで互いにhreflangを設定する必要があるということだ。
TOACHでは、京都のオススメバー/アーティストなどを紹介するWhite Horsesというサイトを日英の2言語で運営している。このサイトを例にとると、まず日本語版サイトのトップページの<head>セクションにhreflangを記述する。
1 2 |
<link rel="alternate" hreflang="en_US" href="http://white-horses.me/en-us/"> <link rel="alternate" hreflang="ja_JP" href="http://white-horses.me/ja-jp/"> |
全く同じ設定を英語版サイトにも記述することで、お互いに内容は同じだけれど、言語が違うだけということを検索エンジンに教えてあげられる。こうすることで、検索する人にマッチしたサイトが検索結果に表示されるようになる。
ここで安心してはいけない。hreflangはページ毎に設定する必要があるから、White Horsesで言えば記事についても設定しなければいけない。
1 2 |
<link rel="alternate" hreflang="en_US" href="http://white-horses.me/en-us/2015/10/18/bar-dylan-2/"> <link rel="alternate" hreflang="ja_JP" href="http://white-horses.me/ja-jp/2015/08/30/bar-dylan-2/"> |
京都・木屋町のバー Dylan-Ⅱを紹介した記事を例に取ると、日本語版と英語版の両方にこの記述をする。
コンテンツ毎にこの記述をしないといけないのは面倒くさいけれど、仕方ないと思ってポチポチやろう。
Language Selector Related
WordPressサイトであれば、その面倒くささを少し解消できる。Language Selector Relatedプラグインのお出ましだ。
このプラグインを使えば、割りと簡単にサイトのトップページ/コンテンツのhreflangを設定できる。
プラグインを導入して有効化した後、設定 > Language Selector Relatedへ入り、トップ(Home)ページのhreflangを設定する。言語ごとのURL、Languge、Countryを、言語バージョン分だけ記入してあげる。
投稿や固定ページの編集画面にも同じような設定欄が出てくるから、トップページと同様に記入する。
長々と書いたけれど、多言語対応しているサイトのみ、ページ毎、ページ同士でhreflangを設定するのを忘れないようにしよう。
WordPressの入門には、最近発売されたこの本がおすすめです。