Blog

WordPressで多言語サイトを制作する際のポイントなどをサクッとまとめてみた

2020.12.15 WordPress

新型コロナの影響でインバウンド市場が縮小する中、多くの企業が越境ECに活路を見出そうとしています。

最近では、「越境EC」という言葉もよく聞かれるようになりましたよね。

私の方でも、2020年後半くらいから多言語対応のサイト制作案件をいくつか担当させていただきました。

多言語対応で必要な作業としてはコンテンツの翻訳が真っ先にイメージされるかもしれませんが、実際にはGoogle検索エンジンや中国の金盾（グレートファイアウォール）への対応など、もう少し踏み込んだ設計が必要になります。

ということで今回は、WordPressで多言語サイトを制作する際のポイントをまとめていきたいと思います。

多言語サイトを制作する際に気をつけたいこと

繰り返しになりますが、多言語サイトの制作でポイントとなるのは以下の2つです。

  • 多言語サイト特有のSEO対策
  • 中国の金盾を踏まえたサイト設計

多言語サイト特有のSEO対策

多言語サイトに限らずですが、SEO対策についてはまず「Googleが何て言っているか？」を調べるようにしましょう。

SEOはアルゴリズムが公開されているわけではないので、専門家の間でも意見が分かれることはよくあります。

そのためもっとも確実なのは、Googleが公開しているコンテンツを確認し、GoogleがSEOに対してどのように考えているのかを把握することです。

多言語サイトのSEO対策に関しては、「Managing multi-regional and multilingual sites」というページに概要がまとめられています。

ここでは上記の資料の内容を踏まえて、多言語サイトSEOで気をつけたいポイントをいくつかピックアップします。

同じページに複数の言語を併記するのは避ける

日本語と英語を併記してあるようなサイトをたまに見かけますが、一つのページに複数言語が使われているとGoogleが言語を判別しにくいようです。

ページの言語が明確にわかるようにする

Google では、ページの表示内容からその言語を判断します。lang 属性のようなコードレベルの言語情報や、URL は使用しません。Google で言語が正しく判断されるように、各ページのコンテンツとナビゲーションには 1 つの言語のみを使用し、原文と訳文を併記することは避けてください。

Google検索セントラル「Managing multi-regional and multilingual sites」より引用

とはいえ、完全に一つの言語のみで文章を書くというのは逆に不自然だったりしますので、その辺りはバランスを見ながら判別してくれているのではないかと思います。

自動的に言語を判別してリダイレクトさせない

地域などの情報からユーザーの言語を判別し、自動でその言語のページにリダイレクトさせるような処理は避けましょう。

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

Google検索セントラル「Managing multi-regional and multilingual sites」より引用

考えてみれば当たり前ですが、日本に住んでいるすべての人が日本語を話しているわけではありませんよね。

そのため、あくまでもユーザーの操作によって言語を切り替えられるようなUIを設計しておくことが大切になります。

また自動でリダイレクトしてしまうと、Googleのクローラーが他の言語ページを巡回することができなくなる恐れもあります。

そうなると他の言語ページは、検索エンジンにインデックスされないことになりますので注意しましょう。

多言語サイトのドメインはどれが最適か？

多言語サイトを制作する際に迷うのが、ドメインではないかと思います。

結論から言ってしまえば、多言語サイトドメインの選択肢は以下の3つです。

  • 国別コードトップレベルドメイン（ccTLD）
  • ジェネリックトップレベルドメイン（gTLD）のサブドメイン
  • ジェネリックトップレベルドメイン（gTLD）のサブディレクトリ

それぞれにメリット・デメリットがあるため、予算や運用体制によって選択するのがよいかと思います。

URL構造 URLの例 メリット デメリット
ccTLD example.jp
  • 特に設定せずとも地域ターゲティングができる
  • 言語ごとのサイトを分けて構築できる
  • gTLDに比べて費用が掛かる
  • 運用体制を整える必要がある
  • 取得するのに条件がある
gTLDのサブドメイン jp.example.com
  • Googleサーチコンソールで地域ターゲティングの設定が可能
  • 複数のサーバーを利用できる
  • 言語ごとにサイトを分けて構築できる
  • ユーザーがURLから地域を判別できない
  • 言語ごとにサイトを分けた場合に運用コストが掛かる
gTLDのサブディレクトリ example.com/jp/
  • Googleサーチコンソールで地域ターゲティングの設定が可能
  • サイトの管理がしやすい
  • ユーザーがURLから地域を判別できない
  • 言語ごとにサイトを分割しにくい

地域ターゲティングとは、どのページがどの地域や言語に対応するのかをGoogleに知らせるための設定です。

linkタグのhreflang属性を使用し、head要素内に以下のように記述します。

<link rel="alternate" hreflang="ja" href="https://example.com/">
<link rel="alternate" hreflang="en" href="https://example.com/en/">
<link rel="alternate" hreflang="zh-Hans" href="https://example.com/zh-hans/">

hreflang属性には言語コードを指定してください。

WordPressなどで動的に生成する場合は、以下のように書いておけば大丈夫かと思います。

<link rel="alternate" hreflang="ja" href="<?php echo (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"]; ?>/">
<link rel="alternate" hreflang="en" href="<?php echo (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"]; ?>/en/">
<link rel="alternate" hreflang="zh-Hans" href="<?php echo (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"]; ?>/zh-hans/">
関連記事

WordPressのループ外で現在のページURLを取得する方法

また多言語サイトは通常のサイトに比べ、コンテンツの重複が起こりやすいです。

そのためhreflangと合わせてcanonical属性を使用しURL正規化をしておくと、検索エンジンを経由して訪れたユーザーに、言語や地域に合わせたページを表示させることができます。

中国の金盾を踏まえたサイト設計

金盾とはグレートファイアウォールと呼ばれるもので、有害サイトのブロックなどを目的とした中国の情報管理システムです。

中国向けのサイトを制作する際に注意しなければならないのは、この金盾によってGoogle APIなどサイト制作でよく利用されている仕組みがブロックされることです。

そのためAPIやCDNを利用せず、当該ファイルをサイトに同梱しておき読み込むなどの対策が必要になります。

またブロックされるのはGoogle系サービスだけではなく、FacebookやGitHubもブロックされるようです。

Comparitechというサイトの「Blocked in China test」というツールを使えば、そのサービスが中国でブロックされているかチェックすることができます。

とはいえ中国にはVPN経由でネットを利用しているユーザーが相当数おり、かつ越境ECを利用している方であれば、かなりの確率でそこに含まれていると考えることもできます。

そのため実際にはあまり気にする必要はないのかもしれませんが、中国市場の大きさを考えると、やはり可能な限り対策はしておいた方がよいかと思います。

WordPress多言語化プラグイン『WPML』の導入手順

WPML

WordPressには優秀な多言語化プラグインがいくつかありますが、私は『WPML』というプラグインを使っています。

有料ですが歴史が古く、拡張プラグインを併用することでかなりのことまでできるので重宝しています。

ここでは、『WPML』の導入手順を簡単にご紹介します。

言語スイッチャーを設置するウィジェットを有効化

WPMLの言語スイッチャーは、ウィジェットに設置する形になっています。

そのため言語スイッチャーを設置したい箇所にウィジェットがない場合は、新たにウィジェットを作成します。

WordPressテーマのfunctions.phpに、以下のように追記します。

/* ウイジェット追加
---------------------------------------------------------- */
if ( !function_exists( 'my_register_sidebars' ) ) {

  function my_register_sidebars() {

    register_sidebar( array(
      'id' => 'lang_widgets',
      'name' => '言語切替',
      'description' => 'WPMLの言語スイッチャーはこちらへ設置してください。',
      'before_widget' => '<div class="lang_widget">',
      'after_widget' => '</div>',
      'before_title' => '<p class="widget_title">',
      'after_title' => '</p>',
    ) );

  }
  add_action( 'widgets_init', 'my_register_sidebars' );
}

次に、テーマ内テンプレートファイルの言語スイッチャーを設置したい箇所に以下のように追記します。

<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 'lang_widgets' ) ) : else : ?>
<?php endif; ?>

WPMLの拡張プラグインをインストール

WPMLのサイトにてダウンロードできる拡張プラグインをWordPressにインストール＆有効化します。

私の場合は、以下のものを利用することが多いです。

WPML String Translation

WPML本体では固定ページや投稿などの本文（「the_content」で出力される箇所）の翻訳は可能ですが、それ以外の箇所の翻訳はできません。

しかしWPML String Translationを使うことで、テーマやプラグイン内の文字列の翻訳が可能になります。

なお翻訳ファイル（.mo）を用意することで、テーマ内の文字列を翻訳することもできます。

テーマ単体で多言語化対応したい場合には、翻訳ファイルを利用した方がいいでしょう。

Advanced Custom Fields Multilingual

Advanced Custom Fieldsを翻訳するためのプラグイン。サイトにAdvanced Custom Fieldsを使ってカスタムフィールドを設置している場合は必須です。

Contact Form 7 Multilingual

Contact Form 7で設置したメールフォームを翻訳するためのプラグイン。言語ごとに別個にフォームを作成し、自動返信メールの文面なども言語ごとに作成できるので便利です。

言語URLフォーマットの設定

WPML言語URLフォーマット

WordPress管理画面「WPML」→「言語」に、「言語URLフォーマット」という設定項目があり、ここでURL構造を設定することができます。

各項目説明文の翻訳が不自然で少し分かりずらいですが、利用したいURL構造に合わせて以下のように選択してください。

ディレクトリ内の異なる言語
gTLDのサブディレクトリのURLの場合は、こちらを選択
言語毎の異なるドメイン
ccTLDまたはgTLDサブドメインのURLの場合は、こちらを選択
言語名がパラメーターとして追加されました
多言語サイトのURLとして、Googleに推奨されていない形式です。選択しないようにしましょう。

また「ディレクトリ内の異なる言語」には、「デフォルト言語にはディレクトリをご使用ください」というチェックボックスがあります。

WPMLの「デフォルト言語にはディレクトリをご使用ください」

ここにチェックを入れた場合、メイン言語のURLもサブディレクトリ構造になります（https://example.com/jp/）。

未検証ですが、これを利用する場合、WordPressをサブディレクトリにインストールしているとうまく動作しないようです。

そのため、メインURLもサブディレクトリにしたいなら、WordPressをルートに直接インストールしておくようにしましょう。

WPMLでの言語による条件分岐

多言語サイトでは、言語によってソースコードを変更したい場合があります。

たとえば先にお話したように中国ではGoogle系のサービスがブロックされてしまうため、中国語のときはGoogle APIを読み込まないようにするなどです。

また特定の言語に対応していないフォントもあるため、タイ語のときはこのフォント、ベトナム語のときはこのフォント……　というような形で切り替える必要が出てきます。

そういうときには、言語によって条件分岐できます。

<?php if( ICL_LANGUAGE_CODE == 'ja' ): //日本語 ?>

  <div class="jp">日本語のときに表示する内容</div>

<?php elseif( ICL_LANGUAGE_CODE == 'vi' ): //ベトナム語 ?>

  <div class="vn">ベトナム語のときに表示する内容</div>

<?php elseif( ICL_LANGUAGE_CODE == 'th' ): //タイ語 ?>

  <div class="th">タイ語のときに表示する内容</div>

<?php else : //その他の言語 ?>

  <div class="other">その他の言語のときに表示する内容</div>

<?php endif; ?>

以下のような書き方でも大丈夫です。

<?php
if( ICL_LANGUAGE_CODE == 'ja' ) { //日本語
  echo '<div class="jp">日本語のときに表示する内容</div>';
} elseif( ICL_LANGUAGE_CODE == 'vi' ) { //ベトナム語
  echo '<div class="vn">ベトナム語のときに表示する内容</div>';
} elseif( ICL_LANGUAGE_CODE == 'th' ) { //タイ語
  echo '<div class="th">タイ語のときに表示する内容</div>';
} else { //その他の言語
  echo '<div class="other">その他の言語のときに表示する内容</div>';
}
?>

まとめ

以上、WordPressで多言語サイトを制作する際のポイントについてのまとめでした。

多言語サイトはただ文章を翻訳すればいいわけではなく、Googleが認識しやすいよう配慮したり、地域や言語によって個別に対策が必要だったりします。

また、新しい法律ができたり世界情勢の変化によっても取るべき施策が変わってくると思いますので、継続的な情報収集をおすすめします。