海外から日本への観光客も増え、多言語サイトの需要を増えていると思います。
自分は無知がゆえに多言語サイト制作にあたり、SEOの部分でミスをしてしまいました。
そんな多言語サイト制作の失敗談や、注意点も含めて紹介します。
制作方法はサイトの構成や運営方法で変わるので、多言語サイトじゃなくても当たり前なんですが、最初にターゲットや構成、UI等しっかり決めとかないと、後々めちゃくちゃ面倒です。
サイトの翻訳後の表示を決める
翻訳後の表示をどうするかは、言語をいくつ使うか、運用はどうするか、ブログなどの更新はあるか等で変わると思います。
SEOを考えるのであれば、言語ごとにページを分けた方がいいかもしれません。
ですが、表示だけで良いのであれば、下記のサイトの様にGoogle等の翻訳サービスを使って対応するのも一つの方法です。
管理も楽になるメリットもありますが、でたらめな翻訳になる可能性や先にも書いた各言語の国のSEOに反映されにくいデメリットもあります。
ブラウザでの翻訳サービス
上記のGoogle翻訳サービスの新規登録は2019年に終了したみたいで。。。
変わりというとあれですが、bingでもサイト内にボタンを配置して翻訳できるサービスがあります。
bingサイトのサービスも止まってる事が多い様子です。
ネットの書き込みでは4月末ぐらいから下記の表示の状態？の様です。
当社のサービスは現在ご利用いただけません
私たちはできるだけ早くすべてのサービスを復元するために取り組んでいます。すぐに戻って確認してください。
現状、bingが動かない限り、WEBブラウザ上でサイト内の表示を翻訳してくれる、無料で簡単に設置できるツールの新規導入は難しいかもしれません。
各ユーザーが「日本語に翻訳」機能のように、ブラウザの言語の設定している言語へ翻訳して閲覧してくださいって事なんですかね。
翻訳後のデザインも考える
当たり前ですが、言語によって文字数が変わります。
スペイン語とか、めちゃくちゃ長くなる印象です（個人の意見です！）。
翻訳したテキストが長くなることにより、段落ちしたり、デザイン的に表示がおかしくなったりするかもしれません。
なので、翻訳した後、デザインの調整を避けるためにも固定した配置にならないようにするなどのデザインの配慮が必要です。
もちろん、言語別にこだわって対応できるのであれば問題ありませんが。
サイト構成、ディレクトリ、URLを決める
どこまでの規模で多言語サイトを分けるかで判断が変わります。
| 方法 | URL例 | メリット | デメリット |
|---|---|---|---|
| サブドメイン | https://en.example.com |
| SEO的には、サブディレクトリよりは効果が弱くなるかも |
| サブディレクトリ | https://example.com/en |
| URL的に迷いやすくなるかもとの考えもありますが、一般の人はそこまでURL見てる人いない説。 |
| 国別のドメイン取得 | https://example.us |
| コスト、管理、全てにおいて大変。SEOも各ドメインに分散。 |
簡単ではありますが、各メリットとデメリット。
大規模なサイトでなければ「サブディレクトリ」が対応しやすいです。
ワードプレスなら、「Bogo」という多言語化プラグインもあります。
初めての方は、構造・仕組み等を理解するのが大変かもしれませんが、わかればカスタマイズもしやすく、後述しますがhead内に書くアノテーションタグも記載してくれるので、便利なプラグインです。
僕はURLで失敗しました
その失敗してしまったサイトはブラウザの言語によって自動で翻訳ページを表示する設定だったのです。
その為、トップページ（ドメインURL）を開いても、同じURLなのに日本語版と英語版がある状態で、クローラーは英語圏、検索結果には英語で表示され始めました。。
その後、ドメインURLだけの状態で表示されないようにし、必ずURLに「/ja」、「/en」と振り分けられるように設定して、後日検索結果も日本語で表示されました。
幸いにも下層ページは、サブディレクトリで分けており、トップページだけ上記の結果となってしまいました。
IPアドレスで識別して各言語ページを表示させない
IP アドレス分析に合わせてコンテンツを変更しないでください。 IP アドレスの位置分析は困難であり、一般に信頼できるものではありません。また、Google がサイトのさまざまなバージョンを適切にクロールできないことがあります。ほとんどの場合、Google のクロールは米国から開始され、サイトのさまざまなバージョンを検出するために、地域を変更することはありません。ここに示した明示的な方法（hreflang、代替 URL、明示的なリンク）のいずれかを使用してください。
上記は、サーチコンソールのヘルプに記載されている内容です。
これもIPアドレスで識別して、アメリカからサイト開いたら英語のページが表示されるというような風にしてると、アメリカからクローラーが動いてる事が多いので、適切にクロールできないという事ですね。
多言語サイトのheadタグ内の対応
headタグ内にアノテーションタグという状況に対して、「適したページ用意してるよー」というタグを追加し、クローラーに伝えます。
言語以外にも、スマホページなどもにもこのタグは使います。
最近はレスポンシブで作成されたサイトが多いと思うので、減ってきてると思いますがスマトフォン向けページを「https://〇〇〇.com/sp/」というようなページを分けている場合、アノテーションタグで、クローラーに「スマホページありまーす！」と伝えれます。
多言語サイトも同じように、他の言語のページがあることを、クローラーに伝えれます。
アノテーションタグ、hreflangタグ
<link rel="alternate" href="https://shippai.com/ja" hreflang="ja" />
<link rel="alternate" href="https://shippai.com/en" hreflang="en" />
上記は英語ページがある場合。
その他にも言語ページがある場合は、言語コード（ja、en等）やURLを変更して追加します。
まとめ
Googleの公式にも多言語サイトについてけっこう詳しく書いてありますが、僕の足らない頭ではわかりにくい所もあり、実際に作成したり、一通り作業終わってから読むとやっと理解できました。
（これに関しては、とりあえず経験して身体でバイブス感じなというポジティブ思想です）
見返してみると、そんなに難しい事は書いてないんですが。。
やっぱり、何事も楽せず、丁寧に言語事に手を加えてページを作成するのが、後々の結果としては良いですよね。。
でも、人間楽したいです。。
コメント