記事内に商品プロモーションが含まれる場合があります
サルワカの一部のWebデザイン系の記事・ツールを英語対応しました。英語版のサイト名は「SW Design Lab」としています。 SW Design Lab
せっかくなので備忘録がてら多言語サイトの作り方をまとめておきたいと思います。
多言語サイトを作る前に知っておきたいこと
一部の記事のみ翻訳して公開
全ての記事をネイティブが書くような自然な英語に翻訳するのはかなり大変です。そこで、文字数が少なく、どの国の人たちにも共通して需要があるであろうWeb制作系の一部の記事のみ英語版にして公開することにしました。
どのように英語対応しているか
サイト内に英語版用のカテゴリーを作り、そのカテゴリー内で英語記事を作っています。また、日本語の記事とはデザインも変えています。例えば、サイドバーなんかはごっそりと非表示にしています。詳しくは後ほど。
WordPressだと簡単
サルワカはWordpressで運営していますが、なんだかんだ柔軟性が高く、サクッと英語版ページを作ることができました。
プラグインは使わない
ネットで「Wordpress 多言語サイト」と検索するとプラグインを使った方法が多くヒットしますが、プラグイン無しでも多言語サイト（グローバルサイト）を作ることはできます。むしろプラグインを使わない方が柔軟性があって個人的にはおすすめです。詳しい手順は以下で解説していきます。
1. 外国語ページのURLを決める
最初のステップです。まずはドメインを決めましょう。 サイト内で「日本語記事」や「英語記事」「スペイン語記事」などをごちゃまぜに投稿するのはおすすめしません。見る人も検索エンジンも理解しやすいように、外国語ページのURLはハッキリと分けましょう。URLの分け方にはいくつかのパターンがありますが、以下の3つのどれかをGoogleは推奨しています。
URL構造の3パターン
- 国別ドメイン（ccTLD）を使用する例：http://example.fr
- サブドメインを使用する例：http://en.example.com
- サブディレクトリを使用するおすすめ例：http://example.com/en
※ en＝Englishの略です。
順番に解説していきます。
その1. ccTLDを使用する
例：example.au、example.fr
メリットccTLDはターゲットとなる国が決まっていて、しっかりとローカライズしたいとき向けです。例えば「オーストラリア対応のページを作る」と決まっているのであれば「example.au」というドメインを取得すれば、ターゲットがユーザーにも検索エンジンにも伝わりやすくなります。
デメリットカナダ、アメリカ、イギリス、オーストラリアなどと英語圏全体に対応させたい場合などには、この方法は向きません。なぜなら「example.en」のような英語圏全体に向けたドメインは存在しないからです。
その2. サブドメインを使用する
例：en.example.com
例えば「en.saruwakakun.com」というドメインを作り、そのドメインで外国語記事を公開します。
メリット 独自ドメインを取得済みであれば、サブドメインはサクッと取得することができます（例：Xserverの場合）。サブドメインに新しくサイトを作ることになるので、日本語と英語版、スペイン語版でデザインやサイト構成を分けるのが簡単です。
デメリット Wordpressを使用しているのであれば、サブドメイン用に再インストールが必要です。また、別々に管理するのは面倒かもしれません。さらに日本語版と英語版で検索エンジンの評価も分散しやすくなります（リスクは小さくなるというメリットもありますが）。
その3. サブディレクトリを使用する
例：example.com/en
これが多くのケースでおすすめです。英語版ならドメインの後に/enというサブディレクトリを作り、そこに記事を公開していきます。記事ページのURLは、example.com/en/article.htmlというような形になります。
メリットドメインをいじらずに簡単に対応ができます（Wordpressなら「en」というスラッグ*の英語カテゴリーを作るだけでOKです）。まとめて管理ができますし、検索エンジンからの評価も1つのドメインにまとまります。SEOを効率的に強化しやすいと言っても良いでしょう。*スラッグとはURLに使われるカテゴリー名のことです。後ほど説明します。
デメリット ユーザーが迷いやすくなるかもしれません。例えば、英語版ページ（example.com/en/article.html）に訪れた人が、トップページを訪れようとURLバーにexample.comと入力すると、日本語のトップページに行ってしまいます。これは仕方がないので「English」というリンクを分かりやすい場所に配置して対応するのが良いでしょう。
結論：どのURLにするか
大規模に外国語ページを公開していくのでなければ、3番目の「サブディレクトリを使用する方法」がおすすめです。
2. WordPressで多言語サイトを作る
ここからは、WordPressでサブディレクトリを使用して英語版ページを作る手順を解説していきます（上の「その3」の方法にあたります）。
ざっくりとしたイメージ
まずはやることのイメージをつかみましょう。詳しい操作は次のセクションから1つずつ説明するので、ここでは流れだけをつかんでくださいませ。
はじめに英語用の新しいカテゴリーを作ります。このカテゴリー内で海外向けの記事を公開していきます。
サルワカの場合、英語用のカテゴリー・記事をひっくるめて「SW Design Lab」という名前で呼ぶことにしました。「英語用カテゴリーとその中の記事」＝「1つのサイト」とするようなイメージですね。
「カテゴリーの記事一覧ページ」＝「英語版のトップページ」となります。
カテゴリーページ（記事一覧）も、それぞれの記事も、日本語版とは違うデザインを適用させることができます。
サルワカの場合「英語カテゴリーの記事一覧ページ」はこのようになっています。Wordpressであれば、カテゴリーページも簡単にカスタマイズできます。
日本語版のデザインをベースにしつつ、文字やソーシャルメディアボタンを外国向けに変えても良いですし、ガラッと作り直してもOKです。
3. 新しく外国語用のカテゴリーを作ろう
実際にWordpressで作業をしていきましょう。まずは英語用のカテゴリーを作ります。
設定はこの図のようにしましょう。以下で1つずつ解説していきます。
カテゴリー名は「English」など分かりやすい名前にするのが良いでしょう。英語用のサイト名にする必要はありません（別で設定できます）。
なお、カテゴリー名はサイドバーのカテゴリー一覧などで使われます。
パーマリンク（スラッグ）はURLに使われる文字列です。http://example.com/en/...の部分ですね。英語だと一目見て分かるように「en」にします。
親カテゴリーは「なし」を選びます。もし英語版の中でカテゴリーを分けたいときには、親カテゴリーを「en」として子カテゴリーを作れば良いですね。
ここまでできたら［新規カテゴリーを追加］をクリックしましょう。
4. パーマリンク設定をしておこう
URLが以下のように分かりやすい構造になるように設定します。
理想のURL
- 英語トップページ：
http://example.com/en - 各記事：
http://example.com/en/記事ごと名前
具体的な設定手順は以下のようになります。
カテゴリーページのURLの余計な文字を削る
WordPressのデフォルト設定だと、カテゴリーページのURLがhttp://example/category/enというようになっています。このcategoryという文字列がジャマなので除きたいですね。これについては「No Category Base (WPML)」というプラグインをインストールして有効化するだけでOKです（プラグインを使わない方法も試みたのですが、これが１番楽でした）。
URLにカテゴリー名が入るようにする
WordPressだと初期設定で記事のURLにカテゴリー名が入らずに日付などが入ってしまうことがあります。/en/~というように記事URLにもカテゴリー名が入るようにしておきましょう。ダッシュボードから［設定］［パーマリンク設定］を開きます。共通設定の部分で［カスタム構造］にチェックを入れて、右側の空欄内には「/%category%/%postname%」と入力します。これで記事のURLにカテゴリー名（en）が入るようなります。
すでに他の記事が投稿済みの場合は？上記のように設定を変えると過去記事のURLまで変わっています。すでにたくさんの記事が投稿されている場合、301リダイレクトの設定をしておきましょう（参考：Simple 301 Redirectsの使い方）。これにより古いURLに対する評価を引き継ぐことができます。もし過去記事のURLを変えたくない場合は、新規作成の記事だけ自由にパーマリンク設定ができるプラグイン「Custom Permalinks」を使うのが良いかもしれません（参考）。
5. 英語ページのデザインを変える
カテゴリーが「en」のページはデザインを英語用に変えるのが良いでしょう。英語版のターゲット地域がはっきりとしているのであれば、その地域好みの色やフォントなどを使用してローカライズするのが良いですね。
どうやってデザインを変えるか
WordPressではパーツごとにテンプレートが用意されており、それらが繋ぎ合わされて1つのページが表示されています。例えば、カテゴリーページが表示されるときには、通常category.php（もしくはarchive.php）というテンプレートファイルが読み込まれています。これはWordpressのテーマフォルダに入っています。使用しているテーマにより異なることがあります。
優先的に読み込まれるファイルを作っておく
WordPressではこの読み込まれるテンプレートファイルを簡単に変えることができます。方法は簡単でcategory-カテゴリースラッグ名.phpというファイルを作り、それをテーマフォルダの中に入れるだけです。すると、カテゴリーページが開かれるときにこのファイルが優先的に読み込まれるようになります。※テーマフォルダとは「Twentry Fourteen」のようなWordPressのデザインテーマのデータが入ったフォルダーのことです。single.phpやcategory.phpなど、デザインを決めるものは全てこのフォルダーの中に入っています。
今回の場合cateogory-en.phpという名前のファイルをテーマフォルダの中に入れます。すると、カテゴリー「en」の記事一覧ページを開いたときに、このファイルが読み込まれるようになります。
詳しくはこちらの記事で解説しています。
テンプレがさらに他のテンプレを読み込む
繰り返しになりますが、WordPressでは基本的に、複数のテンプレが繋ぎ合わされて1つのページが表示されます。カテゴリーページなら、はじめにcategory.phpが読み込まれます。
category.phpの中には、ヘッダー（header.php）を読み込むコードや、サイドバー（sidebar.php）を読み込むコードなどが書かれています。
つまり、category-en.phpを作って、中身を日本語に変えていくのに加えて、
header.phpなども英語版にする必要があるわけです。なんとも複雑そうですが、やってみればそう難しくはありません。具体的にどの部分を英語用のテンプレートにすれば良いのでしょうか。
日本語にする部分の例
- サイトタイトルトップ＆記事ページ共通。基本的にheader.phpに書かれている
- サイドバートップ＆記事ページ共通。基本的にsidebar.phpに書かれている
- フッタートップ＆記事ページ共通。基本的にfooter.phpに書かれている
- パンくずリストsingle.phpに書かれることが多い
- 記事のタイトルや関連記事などsingle.phpに書かれることが多い
といってもイメージが湧きづらいかと思うので、図にまとめてみました。
まず記事一覧ページ（英語版トップページ）の場合、①category-en.phpを作っておけばこれがWordpressにより自動で読み込まれます。さらに②header-en.phpとfooter-en.phpを作り、③この２つを読み込むコードをcategory-en.phpに書いておきます（のちほど書き方を説明します）。
一方、各記事ページ用には、④single-en.phpを作っておきます。
ただし、こちらは自動では読み込まれないので、⑤条件分岐でカテゴリーが「en」の記事を表示するときだけsingle-en.php読み込むように設定します。
この設定方法は「特定のカテゴリーの記事だけ別テンプレートを読み込ませる」で詳しく解説しています。※ このリンク記事内のsingle-special.phpにあたるのがsingle-en.phpです。
そして、⑥single-en.phpからもheader-en.phpとfooter-en.phpを読み込むコードを書きます。
〜en.phpは基本的に複製で作る
上の①、②、④にあたる部分です。基本的にこれらの英語用テンプレは、日本語のものをコピペで複製しましょう。そして、必要な部分だけ英語用に変えていけば良いのです。カテゴリーページの場合、category.phpを複製（中身をコピペ）して、ファイル名をcategory-en.phpにします。個別記事ページの場合、single.phpを複製して、single-en.phpにします。header-en.phpやsidebar-en.phpも同じですね。※ファイル転送ソフトで［右クリック］→［新規ファイルの作成］→［ファイル名をcategory-en.phpにする］という流れテンプレファイルを作ることができるかと思います。
専用のヘッダー、フッター、サイドバーを読み込む方法
上の③と⑥にあたる部分を解説します。英語ページ用にheader-en.phpやsidebar-en.phpを作っても、自動では読み込まれません。自動で読み込んでくれるのはcategory-en.phpだけです。そこで、category-en.phpとsingle-en.phpを以下のように書き換えます。
↓この部分を見つけて…
<?php get_header(); ?> 〜略〜 <?php get_sidebar(); ?> 〜略〜 <?php get_footer(); ?>
↓それぞれ書き換えます。
<?php get_header('en'); ?>
〜略〜
<?php get_sidebar('en'); ?>
〜略〜
<?php get_footer('en'); ?>
つまり、カッコの中に'en'と書き足すだけですね。これで、header-en.phpなどが読み込まれるようになります。ちなみにサルワカ英語版では、<?php get_sidebar(); ?>をまるごと削除してサイドバーを非表示にしました。
別のCSSを読み込ませたい場合は？
英語版だけ別のスタイルシートを読ませたい場合は、普段読み込んでいるスタイルシート（style.cssなど）を複製してen.cssというようなファイルを作ります。そして、header-en.phpの<link rel="stylesheet" href=".../style.css">の部分を.../en.css"に変えます。これで専用のCSSが読み込まれるようになります。
あとは自由にカスタマイズ！
あとは、実際にページを見ながら必要な部分を英語用にカスタマイズしていけば良いですね。新しいテンプレートとCSSを作ったうえでのデザイン変更であれば、日本語のテーマには影響がないので安心ですね。なお、en用のテンプレートはコードを上から順に見ていき、日本語が含まれている部分は全て英語に変えていくのがおすすめです。
6. ソーシャルシェアボタンを海外向けに切り替えよう
言うまでもなく日本と海外では使われているソーシャルメディアが異なります。例えば、外国向けページでは「はてなブックマーク」のボタンは外しましょう。
海外のメディアを参考にしてみるのが良いかと思いますが、例えば以下のようなソーシャルシェアボタンを設置するのが無難かと思います。
海外で人気のSNS例
- Google +
- Pinterest 基本的に画像がシェアされる。エンタメ系やクリエイティブ系のサイトの場合に設置しておきたい
- Linked In ビジネス・経済などのマジメ系のトピックでのサイトの場合に設置しておきたい
- SnapChat友達にシェアする用。LINEボタン的な役割だととらえると分かりやすそう
- Tumblrテーマ問わず使っている人はそこそこ多い印象。
- Redditソーシャルニュースサイトのシェアボタン。設置の必要性はあまりないような印象。
がついているソーシャルメディアのシェアボタンを優先的に設置しておくと良いかと思います。それぞれのボタンの作り方はGoogleで探せば簡単に見つかります。
7. 多言語サイトのメタタグの書き方
次にheadタグ内のメタタグを書き換えていく必要があります。変えるべきポイントをまとめていきます。
<html lang=”en”>
こちらはページの言語を指定するコードです。おそらくheader-en.phpに書かれているので、見つけ出して<html lang="ja">の"ja"を"en"に書き換えましょう。ただし、Googleさんはページのコンテンツを見て言語を判断しているため、このコードを書いたからといって必ずしも英語ページと認識してもらえるとは限らないことに注意しましょう。
<link rel=”alternate” href=”~” hreflang=”~” >
こちらは対応する日本語のページがある場合に書くものです。検索エンジンに「この日本語ページの英語版はこのページですよ」だったり、逆に「この英語ページの日本語版はこのページですよ」と伝える役割をします。Googleはこのコードを見て、英↔和ページの関係性を見ているため、グローバルSEOにおける重要なポイントの1つだと言えるでしょう。
hreflangの書き方
両方のページのheadタグ内に以下のコードを書きます（初期設定では書かれていないので追加します）。
<link rel="alternate" href="英語ページのURL" hreflang="en" /> <link rel="alternate" href="対応する日本語ページのURL" hreflang="ja"/>
例えば、以下のように書きます。
<link rel="alternate" href="https://saruwakakun.com/en/color-ideas" hreflang="en" /> <link rel="alternate" href="https://saruwakakun.com/design/gallery/palette" hreflang="ja"/>
同じタグを日本語ページと英語ページ両方のhead内に書きます。「英語ページはhreflang="ja"の方だけ書く」などとする必要はありません。なお、想像がつくかもしれませんが３言語以上の場合には、hreflang="es"のようにその言語のタグをもう1つ追加すればOKです。
WordPressで記事ごとにどうやってheadタグ内に書き込むか
記事ごとにhrelangタグの中身が変わってくるため、逐一指定する必要があります。柔軟性を持たせるのであれば、記事ごとにheadタグに書き込めば良いかと思います。「記事ごとにhead内にタグを追加」で紹介されている方法を使えば、投稿ページでheadタグ内に記事ごとにコードを追加できるようになります。そこで日・英の両方のページに同じhreflangタグを追加しておけば良いわけですね。対応する日本語ページがない場合は、hreflangタグは書かなくてOKです。
Search Consoleのインターナショナルターゲティングで確認
Googleのサーチコンソールに「インターナショナルターゲティング」という項目があります。ここをクリックすると、サイト内のhreflangタグがエラーになっていないかチェックすることができます（反映までに数日かかることがあります）。サルワカでは何を思ったか一部~hreflang="jp"~と書いてしまい（正しくは”ja”）、エラーが出てしまいました。修正したらすぐに反映されましたが。
その他
メタディスクリプションなんかは「en」カテゴリーの記事を書くときに英語で書けば良いですね。
8. 言語別のXMLサイトマップを作ろう
英語ページ用に別のXMLサイトマップを作り、Googleに登録しましょう。WordPress定番のプラグイン「XML-sitemap」では「一部のカテゴリーだけ別のサイトマップに分けて出力する」ようなことはできません。
そこで「XML-sitemap」では「en」の記事がサイトマップに含まれないように設定をして、「en」用のサイトマップを別に作りましょう。詳しい作成手順は下の記事にまとめました。コードをコピペして少し書き換えるだけで使うことができます（サイトマップの登録手順まで解説しています）。
この方法を使って、英語ページだけ別のサイトマップとしてサーチコンソールに登録することができました。これで検索エンジンに多言語のサイト構造が明確に伝わるはずです。
「保留」期間が少し長くなることあり
サルワカの場合、サイトマップを登録してからインデックスされるまで1週間ほどかかりました。
その間サーチコンソールでは「インデックスに登録済み」が保留になっていました。言語が変わる分長くなるのは仕方がないですね。気長に待ちましょう。
9. グローバルSEOのポイント
さて、ここまでできれば必要な準備作業は全て完了です。あとは「en」カテゴリーで、英語記事を書いていくだけです。最後に多言語サイトで失敗しないためのポイントをいくつかまとめておきます。
ポイント
- 海外でも需要のある記事のみ翻訳する基本的に日本語の記事を翻訳して公開することが多いかと思いますが、全てのページを翻訳する必要はありません。海外でも同様に需要のある記事のみを翻訳しましょう。
- 自動翻訳した記事をそのまま公開しないGoogle翻訳の精度は非常に高くなっていますが、それでもまるっと自動翻訳するとスパムとみなされる可能性があります。自動翻訳を使う場合も、最後は人の手で自然な文章に修正しましょう。
- 言語の変更用のリンクを貼っておく英語ページと日本語ページそれぞれに言語切り替えのボタンを設置しておくと、ユーザーがサイトで迷いにくいのではないかと思います。
10. 多言語サイト制作の参考になる本・記事
海外Webマーケティングの教科書という本が非常に参考になります（多言語サイト運営の方法論だけでなく、日本人がやってしまいがちな間違いが幅広く網羅されています）。とりあえずこの1冊を読んでおけば良いでしょう。
また、Googleの「他地域、多言語サイト運営のガイドライン」には一度目を通していくことをおすすめします。
