<Head>

例

ページの `head` に要素を追加するための組み込みコンポーネントを用意しています。

import Head from 'next/head'
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
      </Head>
      <p>Hello world!</p>
    </div>
  )
}
 
export default IndexPage

重複タグの回避

`head` 内の重複タグを避けるためには、次の例のように `key` プロパティを使用することができます。これにより、タグが一度だけレンダリングされることが保証されます。

import Head from 'next/head'
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" key="title" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}
 
export default IndexPage

この場合、2番目の `<meta property="og:title" />` のみがレンダリングされます。`key` 属性が重複している `meta` タグは自動的に処理されます。

**知っておくと良いこと**: `<title>` と `<base>` タグは Next.js によって自動的に重複チェックされるため、これらのタグに key を使用する必要はありません。

コンポーネントのアンマウント時に `head` の内容はクリアされるため、他のページが追加したものに依存せずに、各ページで `head` に必要なものを完全に定義するようにしてください。

最小限のネストを使用する

`title`、`meta`、またはその他の要素 (例: `script`) は、`Head` 要素の**直接の**子として含まれるか、最大1レベルの `<React.Fragment>` または配列にラップする必要があります。そうしないと、クライアントサイドナビゲーションでタグが正しく認識されません。

スクリプトには `next/script` を使用する

`next/head` で手動で `<script>` を作成する代わりに、コンポーネントで `next/script` を使用することをお勧めします。

`html` または `body` タグなし

`<html>` または `<body>` タグに属性を設定するために `<Head>` を使用することは**できません**。これは `next-head-count is missing` エラーになります。`next/head` は HTML `<head>` タグ内のタグのみを処理できます。

これは役に立ちましたか？