Next.js metaタグ 重複を避ける

2021-10-01
2021-10-01

key="xxxx"を設定すると、最後に読み込んだものが適用される。 _app.tsxでデフォルトのmetaタグを設定し、各ページコンポーネントで上書きしたいmetaタグを設定する。

以下、key="og_title"の例

_app.jsx
function MyApp() { return ( <> <Head> <meta property="og:title" content="Site name" key="og_title" /> </Head> ... </> ); }
index.jsx
function Index() { return ( <> <Head> <meta property="og:title" content="Home" key="og_title" /> </Head> </> ); }

next/head | Next.js