当海风翻页时

页面组件自己声明自己的标题#

React 19 起，<title>、<meta>、<link> 可以在组件的任意位置渲染，React 会把对应的 DOM 节点放进文档的 <head>（React 19 发布说明）。

1
function ContactPage() {
2
  return (
3
    <>
4
      <title>我的站点：联系我们</title>
5
      <h1>联系我们</h1>
6
      <p>邮箱：support@example.com</p>
7
    </>
8
  )
9
}

好处是标题跟页面组件待在一起，不必再去某个集中文件里找。客户端渲染、流式服务端渲染、Server Component 都适用。

title 的三条规则#

1. 子节点必须是单个字符串。这条最容易踩：

1
// 不行：这样会得到两个子节点组成的数组，直接报错
2
<title>结果页 {pageNumber}</title>
3

4
// 可以：用模板字符串拼成一个
5
<title>{`结果页 ${pageNumber}`}</title>

2. 同一时刻只渲染一个 <title>。多个组件同时渲染标题时，React 会把它们全都放进 head，之后的浏览器与搜索引擎行为就是未定义的。

3. 两个例外不算文档标题：写在 <svg> 里的 <title> 是图形的无障碍说明；带 itemProp 的 <title> 表示页面某一部分的元数据。这两种情况下 React 不做提升。

meta 与 link 也一样#

<meta>、<link> 同样会被提升。样式表有一点额外要求：<link rel="stylesheet"> 与内联 <style> 要带 precedence，React 才会管理它们的插入顺序与去重（发布说明）。

什么时候仍然要元数据库#

官方在发布说明里给了个提醒：你可能仍然想要一个元数据库（例如 react-helmet 一类）。原因是社交分享卡片、多语言标题、按环境拼装这些需求，自己写容易散落在各处。React 给的这套能力解决的是「谁来把标签放进 head」，不是「怎么组织这些数据」。

判断标准很简单：只有两三处标题，直接用；标题规则成体系（模板、多语言、OG 卡片成对出现），就抽一层。

四条边界#

动态内容要等数据就绪再渲染标题。在 use 或请求还没回来时先渲染一个占位标题，用户和爬虫都会看到占位版本。

别在组件里同时渲染 <title> 与某个会在 <head> 里放同名标签的第三方脚本，两者会互相覆盖。

标题字串不要包含换行与多余空白，浏览器会原样保留。

给社交平台用的 <meta> 属性名大小写敏感（property="og:title"、name="description"），抄的时候别改。