New Article

多言語サイトのSEO注意点【僕が失敗した話】

スポンサーリンク

海外から日本への観光客やオリンピックの影響、反対に日本から海外展開等々、サービスのグローバル化の為、多言語サイトの需要も増えていると思います。

自分は無知がゆえに多言語サイト制作にあたり、SEOの部分でミスをしてしまいました。
そんな多言語サイト制作の失敗談や、注意点も含めて紹介します。

制作方法はサイトの構成や運営方法で変わるので、多言語サイトじゃなくても当たり前なんですが、最初にターゲットや構成、UI等しっかり決めとかないと、後々めちゃくちゃ面倒です。

サイトの翻訳後の表示を決める

翻訳後の表示をどうするかは、言語をいくつ使うか、運用はどうするか、ブログなどの更新はあるか等で変わると思います。

SEOを考えるのであれば、言語ごとにページを分けた方がいいかもしれません。
ですが、表示だけで良いのであれば、下記のサイトの様にGoogle等の翻訳サービスを使って対応するのも一つの方法です。

100 Tokyo - Creative venues, products and people in Tokyo, Japan.
100 Tokyo is a visitors' guide to Tokyo's coolest attractions, events, shops, products, restaurants, hotels and more.

管理も楽になるメリットもありますが、でたらめな翻訳になる可能性や先にも書いた各言語の国のSEOに反映されにくいデメリットもあります。

ブラウザでの翻訳サービス

上記のGoogle翻訳サービスの新規登録は2019年に終了したみたいで。。。
変わりというとあれですが、bingでもサイト内にボタンを配置して翻訳できるサービスがあります。

https://www.bing.com/widget/translator/
2019年6月11日現在
bingサイトのサービスも止まってる事が多い様子です。
ネットの書き込みでは4月末ぐらいから下記の表示の状態?の様です。

当社のサービスは現在ご利用いただけません
私たちはできるだけ早くすべてのサービスを復元するために取り組んでいます。すぐに戻って確認してください。

現状、bingが動かない限り、WEBブラウザ上でサイト内の表示を翻訳してくれる、無料で簡単に設置できるツールの新規導入は難しいかもしれません。
各ユーザーが「日本語に翻訳」機能のように、ブラウザの言語の設定している言語へ翻訳して閲覧してくださいって事なんですかね。

翻訳後のデザインも考える

当たり前ですが、言語によって文字数が変わります。
スペイン語とか、めちゃくちゃ長くなる印象です(個人の意見です!)。

翻訳したテキストが長くなることにより、段落ちしたり、デザイン的に表示がおかしくなったりするかもしれません。

なので、翻訳した後、デザインの調整を避けるためにも固定した配置にならないようにするなどのデザインの配慮が必要です。
もちろん、言語別にこだわって対応できるのであれば問題ありませんが。

国旗を使ったデザインは気を付ける

同じ英語でもアメリカ英語やイギリス英語、カナダ英語、オーストラリア英語などなど、この他にもいろいろな国の英語があります。
中国語でも简化字や繁体字等、複数あります。

このように国内外で言語は様々で複数あります。

デザインをする際、切り替えボタン等、なるべく国旗は避けた方がいいです。
なぜなら上記で書いたように、同じ言語でも国が違う場合があるからです。

言語切り替えの選択ボタンの横に、母国語なのに他の国の国旗マークが付いてると気分が悪いですよね。

アイコンを使うことによって、ユーザビリティが上がるようにも見えますが、配慮が欠けてると悪い印象になるかもしれません。

サイト構成、ディレクトリ、URLを決める

どこまでの規模で多言語サイトを分けるかで判断が変わります。

方法URL例メリットデメリット
サブドメインhttps://en.example.com
  • URL的にもわかりやすい
  • 別デザインを分けるならサブドメインの方がいいかも
SEO的には、サブディレクトリよりは効果が弱くなるかも
サブディレクトリhttps://example.com/en
  • ドメイン等の取得や設定不要で対応しやすい
  • SEO的にも良いはず
URL的に迷いやすくなるかもとの考えもありますが、一般の人はそこまでURL見てる人いない説。
国別のドメイン取得https://example.us
  • もはや親切・丁寧、その国への本気度を感じる
  • 国・地域へのターゲティングがわかりやすい
コスト、管理、全てにおいて大変。SEOも各ドメインに分散。

簡単ではありますが、各メリットとデメリット。
大規模なサイトでなければ「サブディレクトリ」が対応しやすいです。

ワードプレスなら、「Bogo」という多言語化プラグインもあります。
初めての方は、構造・仕組み等を理解するのが大変かもしれませんが、わかればカスタマイズもしやすく、後述しますがhead内に書くアノテーションタグも記載してくれるので、便利なプラグインです。

Bogo
独自テーブルをたくさん作ったり後で頭痛を起こすような HTML コメントの混入をしない、とても素直な多言語化プラグイン。

僕はURLで失敗しました

その失敗してしまったサイトはブラウザの言語によって自動で翻訳ページを表示する設定だったのです。
その為、トップページ(ドメインURL)を開いても、同じURLなのに日本語版と英語版がある状態で、クローラーは英語圏、検索結果には英語で表示され始めました。。

その後、ドメインURLだけの状態で表示されないようにし、必ずURLに「/ja」、「/en」と振り分けられるように設定して、後日検索結果も日本語で表示されました。

幸いにも下層ページは、サブディレクトリで分けており、トップページだけ上記の結果となってしまいました。

多言語サイトの場合、 このままではどっちつかずに なる可能性がある。。サブディレクトリでURLを分けるか、サブドメインで分ける。

IPアドレスで識別して各言語ページを表示させない

IP アドレス分析に合わせてコンテンツを変更しないでください。 IP アドレスの位置分析は困難であり、一般に信頼できるものではありません。また、Google がサイトのさまざまなバージョンを適切にクロールできないことがあります。ほとんどの場合、Google のクロールは米国から開始され、サイトのさまざまなバージョンを検出するために、地域を変更することはありません。ここに示した明示的な方法(hreflang、代替 URL、明示的なリンク)のいずれかを使用してください。

上記は、サーチコンソールのヘルプに記載されている内容です。
これもIPアドレスで識別して、アメリカからサイト開いたら英語のページが表示されるというような風にしてると、アメリカからクローラーが動いてる事が多いので、適切にクロールできないという事ですね。

多言語サイトのheadタグ内の対応

headタグ内にアノテーションタグという状況に対して、「適したページ用意してるよー」というタグを追加し、クローラーに伝えます。

言語以外にも、スマホページなどもにもこのタグは使います。
最近はレスポンシブで作成されたサイトが多いと思うので、減ってきてると思いますがスマトフォン向けページを「https://〇〇〇.com/sp/」というようなページを分けている場合、アノテーションタグで、クローラーに「スマホページありまーす!」と伝えれます。

多言語サイトも同じように、他の言語のページがあることを、クローラーに伝えれます。

アノテーションタグ、hreflangタグ

HTML、head内
<link rel="alternate" href="https://shippai.com/ja" hreflang="ja" />
<link rel="alternate" href="https://shippai.com/en" hreflang="en" />

上記は英語ページがある場合。
その他にも言語ページがある場合は、言語コード(ja、en等)やURLを変更して追加します。

まとめ

Googleの公式にも多言語サイトについてけっこう詳しく書いてありますが、僕の足らない頭ではわかりにくい所もあり、実際に作成したり、一通り作業終わってから読むとやっと理解できました。
これに関しては、とりあえず経験して身体でバイブス感じなというポジティブ思想です

見返してみると、そんなに難しい事は書いてないんですが。。

Managing multi-regional and multilingual sites - Search Console Help
If your site offers different content to users in different languages, countries, or regions, you can optimize Google Search results for your site. Background: ...

やっぱり、何事も楽せず、丁寧に言語事に手を加えてページを作成するのが、後々の結果としては良いですよね。。

でも、人間楽したいです。。

スポンサーリンク
WEB Tips
東田ダダーンをフォローする
このブログを購読する
当ブログから更新通知を受けてもいいという方はリンクより更新通知の許可をしてください。 東田ダダーンが更新された際、更新した旨、通知されます。
東田ダダーン

コメント

タイトルとURLをコピーしました