跳到主要内容

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> 标签内的标签。

最后于 更新