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

updated Oct 1, 2021created Oct 1, 2021

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