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

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

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

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

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