コンパイラかく語りき

import { Fun } from 'programming'

トップ > Next.js > 【多言語対応・SEO】Next.js のための hreflang 設定

【多言語対応・SEO】Next.js のための hreflang 設定

Next.js i18n SEO

概要

Next.js は多言語化機能を提供している。

例えば、 <html> タグの lang 属性は自動で書き換えてくれる。

しかし、hreflang の設定は、必要とあらば自前で実装する必要があった。

hreflang とは

そもそも、hreflang とは。

検索エンジンへのヒントとして、内容は同じだが言語の異なるページを教えてあげられるもの。と理解している。

Next.js で hreflang を設定

実際のコード。

next/head の中で locale の数だけ hreflang を設定する。

import Head from "next/head";
import { useRouter } from "next/router";

// 全ページで呼ばれるようなコンポーネント
export const Layout = () => {
  const { locales, defaultLocale, asPath } = routerRouter();

  return (
    <Head>
        {locales.map((locale) => (
          <link
            key={`hreflang-${locale}`}
            rel="alternate"
            hrefLang={locale}
            href={`https://mydomain.com${
              locale === defaultLocale ? "" : "/" + locale
            }${asPath}`}
          />
        ))}
        <link
          key="hreflang-default"
          rel="alternate"
          hrefLang="x-default"
          href={`https://mydomain.com/en/${asPath}`}
        />
    </Head>
  )
}

<link> の属性について。

  • key: 重複なく一度きり render させるための属性
  • rel: altername を指定
  • hrefLang: ロケール（en, ja など）
  • href: 現在のページを絶対パスで指定（i18n が subdomain 方式の場合は、locale の位置を変える）

さらに、 x-default を hrefLang の値として持つ <link> を1つ設定。いわゆるデフォルトケース。