「ai」です。
ブログを書いていると国を問わない有益な情報を発信していることってありますよね。
例えば、技術的な内容など国を問わず価値があります。
自慢の記事を他言語版で発信し、グローバルなアクセスを得たいと思いませんか？
その際に重宝するのがhreflangタグです。
このHTMLタグを使用すると、ウェブページの言語設定を検索エンジンに伝えることが可能です。
しかし、実際にこれらのタグを個別に設定するとなると手間がかかります。
今回、WordPress環境で、手間をかけずにhreflangタグを設置して多言語対応を実現する方法を検討して、実装したのでご紹介します。
hreflangタグって、具体的にはどういうもの？
hreflangタグは、あるウェブページがどの言語で書かれているのかを検索エンジンに教えてくれます。
以下のように使用します。
<link rel="alternate" hreflang="en" href="https://example.com/en" />
これで、「https://example.com/en」というページが英語向けであると伝わります。
異なる言語ページのつなぎ方
今回のように、内容が同じで言語が異なるページがあるような多言語サイトでは、次のように各言語に対応するページを<head>と</head>の間に記載して関係を構築します。
<link rel="alternate" hreflang="ja" href="https://example.com/ja" /> <!-- 日本語版の記事のURL --> <link rel="alternate" hreflang="en" href="https://example.com/en" /> <!-- 英語版の記事のURL --> <link rel="alternate" hreflang="x-default" href="https://example.com/" /> <!-- それ以外の言語からのアクセスした場合に使用するURL -->
このようにすることで、英語ユーザーは英語ページへ、日本語ユーザーは日本語ページへ自動的に案内されます。
「x-default」は検索エンジンが言語を特定できなかった場合に参照するデフォルトのページです。
多言語ウェブサイト実装のステップ
hreflangタグの使い方が分かったところで、管理のしやすい実装方法を検討していきましょう。
各ページに設置するタグの完成形は以下とします。
<link rel="alternate" hreflang="ja" href="https://example.com/post-001_jp" /> <link rel="alternate" hreflang="en" href="https://example.com/post-001_en" /> <link rel="alternate" hreflang="x-default" href="https://example.com/post-001_en" />
「post-001」という内容の記事を、日本語版のページは「post-001_jp」、英語版は「post-001_en」というアドレスで公開していて、日本語、英語に該当しない地域からのアクセスは英語版の「post-001_en」を適用してもらうという形式です。
このhreflangタグを動的に作成することを目標にして、検討していきます。
多言語版の記事の有無の判定
まず、アクセスしたページに多言語版が存在するかを判定する必要があります。
多言語版が存在しないならhreflangタグの挿入も必要ないですからね。
そこで目を付けたのが、WordPressの「タグ機能」
記事を作成するときにタグを設定しますよね。
日本語版の記事には「JPN」タグを、英語版の記事には「ENG」タグを付けることで、その記事には多言語版があるという目印にすることにしました。
ちなみに多言語版が無い記事の場合はどちらのタグもつけません。
対になる他言語版の記事の判断
hreflangタグは、言語が異なる同一内容の記事を並べて記述する必要があります。
日本語版の「post-001_jp」にアクセスしたときに、その英語版は「post-001_en」であることが判断できないと、動的にhreflangタグを<head>と</head>の間に挿入することができません。
となると、日本語版のページには対になる英語版のページの情報を、英語版にはその逆を仕込んでおく必要があります。
そこで考えたのが、カスタムフィールドを使用する方法です。
WordPressのウェブサイトならカスタムフィールドに、対になるページのパーマリンク情報を埋め込むことができそうです。
“otherlang-post-id”というカスタムフィールドを追加して、対になるページのpost_idを設定します。
記事作成時に記入するだけなので、手間はカテゴリーを設定するのと大差ないです。
動的hreflangタグ生成の実装
各言語で作成したページへの仕込みが完了したので、これらの情報を使って動的にhreflangタグを生成するコードを書いていきましょう。
functions.phpへのコード追加
必要なhreflangタグを自動で生成するために、functions.phpに以下のコードを追加します。
//////////////////////////////////////////////
// JPNタグとENGタグが付いている記事のheadにhreflang(検索結果の記事の出し分け)を設定する
//////////////////////////////////////////////
function add_hreflang_tag() {
// ページにアクセスしたとき、現在の投稿IDを取得
$current_post_id = get_the_ID();
// 「JPN」または「ENG」タグが設定されているか確認
if (has_tag('ENG', $current_post_id) || has_tag('JPN', $current_post_id)) {
// カスタムフィールドに設定された他言語版記事のpost_idを取得
if (has_tag('ENG', $current_post_id)) {
$english_post_id = $current_post_id;
$japanese_post_id = get_post_meta($current_post_id, 'otherlang-post-id', true);
} elseif (has_tag('JPN', $current_post_id)) {
$english_post_id = get_post_meta($current_post_id, 'otherlang-post-id', true);
$japanese_post_id = $current_post_id;
}
// タグが存在するか確認してから出力
if (!empty($english_post_id)) {
echo '<link rel="alternate" hreflang="en" href="' . get_permalink($english_post_id) . '" />' . PHP_EOL;
}
if (!empty($japanese_post_id)) {
echo '<link rel="alternate" hreflang="ja" href="' . get_permalink($japanese_post_id) . '" />' . PHP_EOL;
}
// x-default も設定する
echo '<link rel="alternate" hreflang="x-default" href="' . get_permalink($english_post_id) . '" >' . PHP_EOL;
}
}
add_action('wp_head', 'add_hreflang_tag');
処理を説明すると以下のような流れです。
- ページにアクセスしたとき、まずアクセスしたページ自身のpost_idを取得
- アクセスしたページに「JPN」または「ENG」タグがなければ何もしないで終了
- 「ENG」タグがあれば、カスタムフィールドに設定された多言語のpost_idを日本語版のidとして格納して自身のpost_idを英語版として格納する
- 「JPN」タグがあれば、カスタムフィールドに設定された多言語のpost_idを英語版のidとして格納して、自身のpost_idを日本語版として格納する
- <head>と</head>の間に英語向けのhreflangとして英語版のidとして格納したpost_idから作成したURLを追記
- <head>と</head>の間に日本語向けのhreflangとして日本語版のidとして格納したpost_idから作成したURLを追記
- <head>と</head>の間にその多言語向けのhreflangとして英語版のidとして格納したpost_idから作成したURLを追記
カスタムフィールドの”otherlang-post-id”には内容が同じ別言語のページのpost_idを設定しているので、そのpost_idを利用してget_permalinkで対象ページのパーマリンクを取得しています。
実装後のチェック
設定後に対象のページにアクセスしてページのソースを確認すると、<head>と</head>の間に以下のようなタグが挿入できていることが確認できます。
<link rel="alternate" hreflang="ja" href="https://example.com/post-001_jp" /> <link rel="alternate" hreflang="en" href="https://example.com/post-001_en" /> <link rel="alternate" hreflang="x-default" href="https://example.com/post-001_en" />
おわりに
以上の手順で、多言語対応のブログ記事を構築することができました。
これで自慢の記事を世界中の人たちに読んでもらうことができるでしょう。
プラグインに頼るのもいいですが、特定のページだけとか小規模の場合はこの方法でも良いと思います。
自分でコードを用意することで後で自由に組み替えることができるのも自分で実装する魅力ですよね。
自分好みのブログに育つように色々と実験していきましょう。
