如何使用 React Helmet 更改标题和元数据

介绍

React Helmet是一个组件,可动态管理文档的头部部分. 一些常见的用例包括为文档设置标题,描述和meta标签。

当与服务器侧渲染相结合时,它允许您设置meta标签,这些标签将被搜索引擎和社交媒体浏览器读取,这使得服务器侧渲染和React Helmet成为创建可以从SEO(搜索引擎优化)和社交媒体数据中受益的应用程序的强大组合,如oEmbed,Facebook Open Graph或Twitter Cards。

在本文中,您将探索React Helmet在React应用程序中的功能。

前提条件

要跟随这篇文章,你将需要:

熟悉使用「npm」或「yarn」等包管理器安装包
熟悉在您的React项目中导入和使用组件

<$>[注] **注:**本教程不会涵盖创建 React 项目或设置服务器侧渲染的步骤。请参阅如何启用 React 应用程序的服务器侧渲染。

本教程已通过 Node v15.3.0、npm v6.14.9、react v17.0.1 和 react-helmet v6.1 进行验证。

步骤 1 – 将React头盔添加到您的项目中

首先,在您的项目中安装该组件:

1npm install [email protected]

现在,您可以在应用程序中使用React Helmet,将应该在文档头部作为儿童的元素添加到头盔组件中:

 1[label src/App.js]
 2import { Helmet } from 'react-helmet';
 3
 4function App() {
 5  return (
 6    <div className="App">
 7      <Helmet>
 8        <title>App Title</title>
 9        <meta name="description" content="App Description" />
10        <meta name="theme-color" content="#008f68" />
11      </Helmet>
12    </div>
13  );
14}
15
16export default App;

然后,打开浏览器的开发工具,检查头部元素:

1[secondary_label Inspect Element]
2<head>
3  <!-- ... --->
4  <title>App Title</title>
5  <!-- ... -->
6  <meta name="description" content="App Description" data-react-helmet="true">
7  <meta name="theme-color" content="#008f68" data-react-helmet="true">
8  <!-- ... --->
9</head>

注意 React Helmet 添加的标题和meta元素。

步骤2 - 重写价值观

更深层次的组件可以超越给头盔组件提供的更高层次的值。

例如,考虑一个包含一个修改标题的头盔组件的ChildComponent:

 1[label src/ChildComponent.js]
 2import React from 'react';
 3import { Helmet } from 'react-helmet';
 4
 5export default function ChildComponent() {
 6  return (
 7    <div>
 8      <Helmet>
 9        <title>Modified Title</title>
10      </Helmet>
11      <h1>Child Component</h1>
12    </div>
13  )
14}

接下来,重新参阅应用组件并包括新的ChildComponent:

 1[label src/App.js]
 2import { Helmet } from 'react-helmet';
 3
 4import ChildComponent from './ChildComponent';
 5
 6function App() {
 7  return (
 8    <div className="App">
 9      <Helmet>
10        <title>App Title</title>
11        <meta name="description" content="App Description" />
12        <meta name="theme-color" content="#008f68" />
13      </Helmet>
14      <ChildComponent />
15    </div>
16  );
17}

然后,打开浏览器的开发工具,检查头部元素:

1[secondary_label Inspect Element]
2<head>
3  <!-- ... --->
4  <title>Modified Title</title>
5  <!-- ... -->
6  <meta name="description" content="App Description" data-react-helmet="true">
7  <meta name="theme-color" content="#008f68" data-react-helmet="true">
8  <!-- ... --->
9</head>

将标题从应用标题更改为修改标题。描述和主题颜色值的meta标签将保持相同,因为它们没有被重写。

步骤 3 — 处理`html`和`body`的属性

您甚至可以包括html和body元素,如果需要为它们指定属性。

例如,考虑一个具有黑暗主题的身体元素:

 1[label src/App.js]
 2import { Helmet } from 'react-helmet';
 3
 4function App() {
 5  return (
 6    <div className="App">
 7      <Helmet>
 8        <title>App Title</title>
 9        <meta name="description" content="App Description" />
10        <meta name="theme-color" content="#008f68" />
11        <body class="dark" />
12      </Helmet>
13    </div>
14  );
15}

然后,打开浏览器的开发工具,检查身体元素:

1[seconday_label Inspect Element]
2<body class="dark" data-react-helmet="class">
3  <!-- ... -->
4</body>

班级将被设置为黑暗。

步骤 4 – 在服务器上渲染

React Helmet 的全部好处在应用程序在服务器上渲染时就显而易见,以便应用程序在文档头部中提供正确的元素。

假设您有一个 React 服务器端的渲染应用程序设置,您可以拨打 React Helmet 的renderStatic 方法,然后拨打 ReactDOMServer 的renderToString 或renderToStaticMarkup 来获取Helmet 数据的属性实例:

 1[label server/index.js]
 2import React from 'react';
 3import ReactDOMServer from 'react-dom/server';
 4import express from 'express';
 5import { Helmet } from 'react-helmet';
 6
 7import App from '../src/App';
 8
 9const PORT = process.env.PORT || 3006;
10const app = express();
11
12app.get('/*', (req, res) => {
13  const appString = ReactDOMServer.renderToString(<App />);
14  const helmet = Helmet.renderStatic();
15
16  const html = `<!DOCTYPE html>
17    <html lang="en">
18      <head>
19        ${helmet.title.toString()}
20        ${helmet.meta.toString()}
21      </head>
22      <body>
23        <div id="root">
24          ${ appString }
25        </div>
26      </body>
27    </html>
28  `
29
30  res.send(html);
31});
32
33app.listen(PORT);

调用 Helmet 的 renderStatic 会返回具有标题和meta等属性的实例,您还可以访问其他属性,如链接,脚本,noscript,风格,htmlAttributes和bodyAttributes。

步骤 5 — 使用`反应头盔-async`非同步渲染

正如从 Spectrum 提到的,React Helmet 会同步工作,这可能会导致服务器上的问题,尤其是在流媒体上。

回应头盔的叉子来救援: react-helmet-async 。

1npm install [email protected]

API是相同的,除非一个HelmetProvider需要在客户端和服务器上包装组件树:

 1import Helmet, { HelmetProvider } from 'react-helmet-async';
 2
 3function App() {
 4  return (
 5    <HelmetProvider>
 6      <div className="App">
 7        <Helmet>
 8          <title>App Title</title>
 9          <meta name="description" content="App Description" />
10          <meta name="theme-color" content="#008f68" />
11        </Helmet>
12      </div>
13    /HelmetProvider>
14  );
15}

有关 React Helmet Async 的意图和使用的更多信息可在纽约时报开放博客的公告帖子上找到。

结论

在本文中,您探讨了React Helmet在React应用程序中的功能,特别是它如何与服务器侧渲染合作,以促进SEO和社交媒体集成。

如果您想了解更多关于 React 的信息,请查看我们的如何在 React.js 中编码系列,或查看我们的 React 主题页面以获取练习和编程项目。