ページをローカライズする場合にはGoogleに言語別に翻訳されたページが複数あるということを伝える必要がある
やり方は、headに以下を追加する
<link rel="alternate" hreflang="lang_code" href="url_of_page" >
Next.jsでheadに要素を埋め込むやり方を調査する
ドキュメントの例ではnext/head
のHead
タグを利用するだけでよいとのこと
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
の数と要素数があっていない可能性があるので別の配列を用意してみた