跳至內容
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

在這種情況下，只有第二個 <meta property="og:title" /> 會被渲染。具有重複 key 屬性的 meta 標籤會自動處理。

**注意事項**: Next.js 會自動檢查 <title> 和 <base> 標籤是否重複，因此這些標籤不需要使用 key 屬性。

在元件卸載時，head 的內容會被清除，因此請確保每個頁面都完整定義了它在 head 中需要的內容，而不要對其他頁面添加的內容做出假設。

使用最少的巢狀結構

title、meta 或任何其他元素（例如 script）需要作為 Head 元素的**直接**子元素，或者最多包裝在一層 <React.Fragment> 或陣列中 — 否則在客戶端導航時，標籤將無法被正確擷取。

使用 next/script 載入腳本

我們建議在您的元件中使用 next/script，而不是在 next/head 中手動創建 <script> 標籤。

不要使用 html 或 body 標籤

您**不能**使用 <Head> 來設定 <html> 或 <body> 標籤的屬性。這將導致 next-head-count is missing 錯誤。 next/head 只能處理 HTML <head> 標籤內的標籤。