【WordPress】プラグインを使用せずに各ページを他言語ページに対応する方法【多言語サイト】

ウオトミズ(UOTOMIZU)の中の人

サブドメインかサブディレクトリを取得する

言語別のサイトを用意するために、サブドメインかサブディレクトリを作成する。

  • サブドメイン:https://jp.domain.com
  • サブディレクトリ:https://domain.com/jp

小規模なサイトだとサブディレクトリで十分だと思うが、大規模になることが予想される場合は、サブドメインで運用するのが良いかと思われる。

本記事ではサブドメインで多言語サイトを制作した場合に、各ページをSEO対策させてその他の言語に切り替えできるようにする方法を書いている。

多言語サイトのためのSEOと言語切り替えナビゲーション

ページをローカライズする

言語ごとにローカライズするには、<head></head>内に、代替ページとhreflangを指定する。(参考:https://support.google.com/webmasters/answer/189077?hl=ja

多言語サイトをhreflangを指定するための基本的なコードは以下の通り。



<head>
  <title>ページタイトル</title>
  <link rel="canonical" hreflang="en"
        href="http://en.example.com/" />
  <link rel="alternate" hreflang="ja"
        href="http://ja.example.com/" />
<link rel="alternate" hreflang="zh"
        href="http://zh.example.com/" />
</head>

ただ、このコードを貼っているだけだと、固定ページや投稿ページに対応していないので、対応させるようのコードを書く必要がある。

多言語サイトのための言語切り替え用ナビゲーションの作成

言語切り替えのナビゲーションを作るには、各言語版サイトのリンクを貼っておけば良い。ただ、言語切り替えのリンクを踏んだ時に、ホーム画面に戻るようになる。

例えば、日本語版のAboutページから英語版のAboutページに、英語版のPrivacy Policyページから日本語版のPrivacy Policyページに移動できるようにするためには、そのためのコードを書く必要がある。

それぞれの固定ページや投稿ページに対応させるためのコード

WordPressのheader.phpファイルで以下のように書いたとする。

header.php


<head>
<title>タイトル</title>
<link rel="canonical" id="enL" href="https://domain.com" hreflang="en">
<link rel="alternate" id="jpL" href="https://jp.domain.com" hreflang="jp">
</head>
<body>
<header>
<nav>
<ul>
<li><a id="en" href="">English</a></li>
<li><a id="jp" href="">日本語</a></li>
</ul>
</nav>
</header>
</body>

それぞれに対応させるように、footer.phpで以下のようなスクリプトを書けばいい感じに対応されるようになる。

JavaScriptで現在ページのパスを取得して、idで指定したa要素やlink要素のhref属性に記述するという形で書いている。

footer.php



window.onload = function onLoad() {

var lang = ["en","jp", "enL", "jpL"];
for(let i = 0; i < lang.length; i++) {
code = ["","jp.", "", "jp."];
lang[i] = document.getElementById(lang[i]);
var path = location.pathname;
lang[i].setAttribute( "href", "https://"+ code[i] +"domain.com" + path );
}
}

P.S.

見本サイトを現在構築中なので、出来上がり次第リンクを貼ろうと思います。

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO