cocone engineering

Nuxt.jsとi18nの多言語サイトのGoogle検索結果を正しく表示させた話

  • 2022年4月21日

こんにちは。Web開発室所属の猿田です。普段はココネが運用しているサービスの公式サイトや、アプリ内に表示するお知らせ、FAQなどのフロントエンドの開発を担当しています。

今回は、『リヴリーアイランド公式サイト』の多言語化の際、Googleの検索結果を、閲覧環境の言語を表示するように調整したお話をします。

お役立ていただけましたら幸いです。

経緯

リヴリーアイランドの公式サイトは、アプリの多言語化（英語、繁体字）に伴い、繁体字、英語に対応しました。

公式サイト自体は2021年7月に公開しており、「Nuxt.js＋TypeScript」を使用しています。

多言語化に際し、「@nuxtjs/i18n」を導入しました。

公開時、『リヴリーアイランド』でGoogle検索すると、英語、繁体字、日本語が混在していました。

住んでいる地域、あるいはブラウザーの言語設定で、リヴリーの検索結果ページの表示を正しい言語で表示させる必要がありました。

結論

まずは結論からお話しします。

Nuxt.jsの設定ファイル nuxt.config.ts に、linkタグの設定、@nuxtjs/i18nの設定を追加しました。

こちらの設定で、想定する地域と言語で、正しいGoogle検索結果を表示させることができました。

※ 変数 origin は環境変数を利用し、配信先 (本番環境/開発環境) に応じたURLが入ります。例えば、本番環境の場合は「https://www.livly.com」が入ります。

const config: NuxtConfig = {
    ... 省略 ...
    head: {
        ... 省略 ...
        link: [
            {
                rel: "x-default",
                href: `${origin}/en/`,
            },
            {
                rel: "alternate",
                hreflang: "ja",
                href: `${origin}/ja/`,
            },
            {
                rel: "alternate",
                hreflang: "en",
                href: `${origin}/en/`,
            },
            {
                rel: "alternate",
                hreflang: "zh-Hant",
                href: `${origin}/zh_tw/`,
            },
        ],
        ... 省略 ...
    },
    ... 省略 ...
    i18n: {
        ... 省略 ...
        detectBrowserLanguage: false,
        ... 省略 ...
    },
    ... 省略 ...
};

対応①：Google検索結果を言語/地域で表示切り替える

Googleの公式ドキュメントに、対象サイトが多言語サイトだとGoogleに知らせる方法が掲載されています。

🔖 参考：「ページのローカライズ版についてGoogleに知らせる」

Googleへの知らせ方は、HTMLタグ、HTMLヘッダー、サイトマップを利用する3つの方法があります。

今回、HTMLタグでGoogleに知らせました。

HTMLタグで知らせる

<link rel="alternate" hreflang="lang_code"... > で対応言語と、URLを指定します。

<link rel="alternate" hreflang="en" href="https://www.livly.com/en/">
<link rel="alternate" hreflang="ja" href="https://www.livly.com/ja/">
<link rel="alternate" hreflang="zh-Hant" href="https://www.livly.com/zh_tw/">

こちらの指定で、ページの言語や地域ごとのすべてのバージョンをGoogleに知らせることができます。

href属性の指定

href属性の値は、転送プロトコル（http または https）を含む完全修飾形式で指定しなればなりません。
//livly.com/jaや/jaではなく、https://www.livly.com/ja/とする必要があります。

🙅‍♂️ 間違い：
<link rel="alternate" hreflang="ja" href="/ja/">
🙆‍♂️ 正しい：
<link rel="alternate" hreflang="ja" href="https://www.livly.com/ja/">

中国語の対応

中国語は簡体字と繁体字が存在します。リヴリーアイランドは繁体字なので、ISO 15924のzh-Hantで、文字体系を明示的に指定しています。

<link rel="alternate" hreflang="zh-Hant" href="https://www.livly.com/zh_tw/">

代替ページ

どの言語にも一致しない場合の代替ページとして、自動リダイレクト先のホームページも指定する必要があります。
今回、自動リダイレクトを無効にしたため、英語のURLを指定し、どの言語にも一致しない場合、英語ページを表示するようにしました。

<link rel="x-default" href="https://www.livly.com/en/">

Nuxt.jsでのHTMLタグの指定

以上を踏まえ、Nuxt.jsの設定ファイル nuxt.config.ts に設定を追記します。

const config: NuxtConfig = {
    ... 省略 ...
    head: {
        ... 省略 ...
        link: [
            {
                rel: "x-default",
                href: "https://www.livly.com/en/",
            },
            {
                rel: "alternate",
                hreflang: "ja",
                href: "https://www.livly.com/ja/",
            },
            {
                rel: "alternate",
                hreflang: "en",
                href: "https://www.livly.com/en/",
            },
            {
                rel: "alternate",
                hreflang: "zh-Hant",
                href: "https://www.livly.com/zh_tw/",
            },
        ],
        ... 省略 ...
    },
};

対応②：@nuxtjs/i18nの設定

@nuxtjs/i18nは、ブラウザの言語を検出して、リダイレクトしています。

By default, @nuxtjs/i18n attempts to redirect users to their preferred language by detecting their browser’s language. This is controlled by the detectBrowserLanguage option:

@nuxtjs/i18nは、デフォルトでユーザーのブラウザの言語を検出し、対象言語へのリダイレクトを試みます。これはdetectBrowserLanguageオプションによって制御します。

これを制御するオプションが「Browser language detection」になります。

公式ドキュメントは、以下の設定を推奨しています。

i18n: {
  ... 省略 ...
  detectBrowserLanguage: {
    useCookie: true,
    cookieKey: 'i18n_redirected',
    redirectOn: 'root',  // recommended
  }
}

For better SEO, it’s recommended to set redirectOn to root (which is the default value). With it set, the language detection is only attempted when the user visits the root path (/) of the site. This allows crawlers to access the requested page rather than being redirected away based on detected locale. It also allows linking to pages in specific locales.

SEO対策として、redirectOnをrootに設定することをお勧めします（これがデフォルトの値になります）。この設定で、ユーザーがサイトのルートパス（/）にアクセスしたときのみ、言語の検出が試みられるようになります。これにより、クローラーは検出されたロケールに基づいてリダイレクトされることなく、要求されたページにアクセスすることができます。また、特定のロケールのページへのリンクも可能になります。

ただ、こちらの設定して検証したところ、『リヴリーアイランド』の検索結果が英語表示になってしまいました。

なのでfalseを設定し、ブラウザの言語検出の機能を無効に設定しました。

i18n: {
  ... 省略 ...
  detectBrowserLanguage: false,
}

まとめ

要点は以下になります。

  • サイトの多言語化の際は、対応言語をGoogleに知らせる必要があります。
  • Googleへの知らせ方は、HTMLタグ、HTMLヘッダー、サイトマップがあります。<link rel="alternate" hreflang="lang_code"... > を使用したHTMLタグの知らせ方は、比較的簡単に導入できます。
  • Nuxt.jsを使用している場合、設定ファイル nuxt.config.js に設定を追加します。
  • @nuxtjs/i18nを導入している場合、併せてdetectBrowserLanguage の設定を追加する必要があります。

補足：別の国や地域のGoogle検索結果を確認する

https://www.google.com/searchに、4つのパラメータを付与することで、国や地域別のGoogle検索を確認できます。
※ Googleは検索結果の精度を上げる目的で、コンピュータの場所を自動で検出しているため、場所によっては同じ結果にならない場合があります。あくまで目安として参考にします。

アメリカ / 英語 https://www.google.com/search?gl=us&hl=en&pws=0&gws_rd=cr
台湾 / 繁体字 https://www.google.com/search?gl=tw&hl=zh-TW&pws=0&gws_rd=cr
ドイツ / ドイツ語 https://www.google.com/search?gl=de&hl=de&pws=0&gws_rd=cr

国/地域パラメータgl

国/地域パラメータglは、国や地域を指定するパラメータです。
国や地域のコードは、ISO 3166-1 alpha-2で定義しているコードを使用します。

国/地域パラメータの例：

  • アメリカ：gl=us
  • 中国：gl=cn
  • ドイツ：gl=de
  • フランス：gl=fr

言語パラメータhl

言語パラメーターhlは、言語を指定するパラメータです。
言語のコードは、ISOで定義しているコードを使用します。

言語パラメータの例：

  • 英語：hl=en
  • 簡体字：hl=zh
  • 繁体字：hl=zh-TW
  • ドイツ語：hl=de
  • フランス語：hl=fr

リダイレクトのパラメータgws_rd

リダイレクトを設定するパラメータがgws_rdです。
gws_rd=crでリダイレクトを無効にできます。

パーソナライズド検索を無効にするパラメータpws=0

pws=0のパラメーターで、パーソナライズド検索を無効にできます。

🔖 参考

 

 

ココネでは一緒に働く仲間を募集中です。

ご興味のある方は、ぜひこちらの採用特設サイトをご覧ください。

https://www.cocone.co.jp/recruit/contents/

Category

Tag

Popular posts

Category

Tag

一緒に働くエンジニアを募集しています

ココネのエンジニア採用はこちら

%d人のブロガーが「いいね」をつけました。