コンテンツにスキップ
API リファレンスコンポーネントHead

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要素の直接の子として、または<React.Fragment>または配列で最大1レベルまでラップして含める必要があります。そうしないと、クライアントサイドナビゲーションでタグが正しく認識されなくなります。

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

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

htmlまたはbodyタグは使用しない

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