UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Next.js】headに要素を埋め込む

ページをローカライズする場合にはGoogleに言語別に翻訳されたページが複数あるということを伝える必要がある

uga-box.hatenablog.com

やり方は、headに以下を追加する

<link rel="alternate" hreflang="lang_code" href="url_of_page" >

Next.jsでheadに要素を埋め込むやり方を調査する

nextjs.org

ドキュメントの例ではnext/headHeadタグを利用するだけでよいとのこと

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

なので、今回の課題は以下のように解決できそう

const hrefLangList = [
    {
    hrefLang: "en",
    langDir: "",
  },
    {
    hrefLang: "ja",
    langDir: "/ja",
  },
];

....
<Head>
    ....
    {hrefLangList.map((alternate) => (
        <link
            key={alternate.hrefLang}
            rel="alternate"
            hrefLang={alternate.hrefLang}
            href={`https://stay-list.com${alternate.langDir}${asPath}`}
        />
     ))}
</Head>

hreflang 属性の値としては、代替 URL の言語を ISO 639-1 形式で指定し、必要に応じて地域を ISO 3166-1 Alpha 2 形式で指定するため、hrefLangをわざわざ作らなくても、locales(next.config.jsで定義したロケール)を利用すればよいかと思った

ただ、中国語の繁体字の場合/zh-twをURLに使っているが、台湾人だけというわけではないので、zh-Hantの方がよいかもなど、必ずしもlocalesの数と要素数があっていない可能性があるので別の配列を用意してみた