🍙
Nuxt.jsのi18n多言語対応したら、日本語で検索した時の検索結果が英語になってしまった。解決できたので対応方法を記載します。
Nuxt.jsで日/英に対応する多言語サイト構築していて、Google検索で日本語検索すると英語の結果が出るという謎の事象が出ました。
現在解決できたようなので、解決方法を記載します。
何が起きたのか
Google検索時に下記事象発生しました。
- Googleで「〇〇について」と検索する
- 検索結果が英語サイトのtitleとdescriptionになる。
- しかし、クリックすると日本語のページに遷移
イメージとして下記のような感じです。（注：画像は本当のサイトではなく、私が適当に作ったものです）
前提
サイトについての前提です。
- Nuxt.jsでサイト構築
- 多言語はi18nを利用
- meta tagの設定やsitemap.xml等の基本的な設定は完了
対応したこと
今回は下記2点対応しました。
hreflang タグの追加
全ページに下記４種類のhreflangタグを追加しました。
<link rel="alternate" href="https://example.com/" hreflang="en">
<link rel="alternate" href="https://example.com/" hreflang="en-US">
<link rel="alternate" href="https://example.com/" hreflang="ja_JP">
<link rel="alternate" href="https://example.com/" hreflang="x-default">
detectBrowserLanguage: false, の追加
nuxt.config.js に下記を追加しました。
detectBrowserLanguage: false,
nuxt-i18nの言語判定はdetectBrowserLanguageでされているようで、なぜか英語版にリダイレクトされてしまっているようでした。
一旦detectBrowserLanguage: falseで言語の自動検出を無効にし、リダイレクトを回避するようにしました。
結果
上記対応後、日本語で検索したら日本語の結果、英語で検索したら英語の結果が表示されました！🎉良かった。
参考
covid19のGitHubで議論されていたので参考にしました。こういう議論が公開されているのはとてもありがたいですね。
あとはGoogle 検索セントラルですね。やはりしっかりまとまってます。
以上です。
何かのお役に立てば幸いです。間違いあればご連絡ください🙏
Discussion