WordPressでバイリンガルサイト

Bogoっていうプラグインを使うといいよ！

というだけでは記事にならないので、多言語化にまつわる話を少々。。。

hreflangタグ

Google Search Consoleの検索トラフィック/インターナショナルターゲティングのところに出てきますね。このタグについてまとめているサイトを見つけました。

hreflangタグとは何か調べてみました｜satoyan419.com

Googleが使っているそのページがどの言語で書かれているかを知るためのタグですね。

マルチリンガルサイトで同じ記事を色々な言語で書いたページが複数ある場合、Googleは検索ユーザーの言語設定に合った結果を提供するために、このhreflangの指定に従ってどのページを表示するかを決めます。

フォーマットはこう。

<link rel="alternate" hreflang="言語コード-1" href="url-1">
<link rel="alternate" hreflang="言語コード-2" href="url-2">
…

言語コードはISO-693-1にある言語コードということで、日本語は”ja”、英語は”en”。さらに同じ言語を使用する異なる地域に分けるときは、アメリカが”en-us”、イギリスが”en-gb”、オーストラリアが”en-au”などとなります。

canonicalタグ

さて、このように言語が異なる同一内容のページが存在すると、重複コンテンツの問題が発生してしまいます。これを解決するのがcanonicalタグ。

よく使われるのが同一商品で色違いのページがある場合。どれかひとつ、代表ページのurlを決めて、すべてのページがその代表urlを指し示すことで本体はこれ！みたいな指示をします。

フォーマットはこう。

<link rel="canonical" href="代表url">

先ほどのhreflangタグと組み合わせてヘッダーにはこのように指定します。

日本語ページの場合

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

英語ページの場合

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

こうすることによって、日本語で検索してきた人にはhreflang=”ja”で指定したhttp://www.example.com/を返すとともに、同一内容のhttp://www.example.com/en/を重複コンテンツ扱いしないようになります。

同様に英語で検索してきた人にはhreflang=”en”で指定したhttp://www.example.com/en/を返し、同一内容のhttp://www.example.com/を重複コンテンツ扱いしないようにします。

結構面倒くさい

…ですよね？そこで登場するのが冒頭出てきたプラグインのBogo。使い方はこちらのサイトにわかりやすくまとまっています。

Bogo で WordPress を多言語化｜プログラミング生放送

このプラグインを使うと、オリジナルの投稿に対して他言語の記事を作成した時、ヘッダーに上記のhreflangとcanonicalが自動的に適切に挿入されます。

しかもメニューやウィジェットを表示する言語毎に切り替えることができるので、結構それっぽくマルチリンガルサイト化することができますよ。

• 日本語記事サンプル：nüvi205をZZRに取り付けよう
• 英語記事サンプル：How to install nüvi 205 to ZZR

ロケール情報は$localeで取得

このサイトで使っているテーマがバズ部のXeory Baseなんですが、インデックスページに「続きを読む」ボタンがあります。これが英語ページに切り替えても日本語のまま。当然ですね。Bogoの管轄外ですから。

でもなんとかしたい！(≧v≦)

$ grep -e "続きを読む" /usr/local/www/junk/wp-content/themes/xeory_base/*
/usr/local/www/junk/wp-content/themes/xeory_base/archive.php:        <?php the_content('続きを読む'); ?>
/usr/local/www/junk/wp-content/themes/xeory_base/index.php:        <?php the_content('続きを読む'); ?>
/usr/local/www/junk/wp-content/themes/xeory_base/page-lp.php:        <?php the_content('続きを読む'); ?>

これらを書き換えてやれば英語表記になります。

WordPressで現在のロケール情報を知るには$locale変数を読めばいいので、上記３ファイルを子テーマディレクトリにコピーして該当箇所を書き換えます。

<?php 
  if($locale == 'ja') {the_content('続きを読む');}
  else {the_content('Read more');}
?>

これで日本語の時はオリジナルのまま「続きを読む」、英語の時は「Read more」と表示の切り替えができるようになりました。

うちのサイトにもたまに海外からのアクセスがあるんですよ。サイトアタックとかスパムコメントとかは別にしても。現地の日本人かもしれないけれど、もしかしたら他の国の人かもしれない。そんな人たちにマイナー言語を表示しても意味わからない。

というわけでここはひとつ、貧弱な英語力を駆使してバイリンガルサイトを作ってみようじゃないか！(ノ_＜)