Introduction

React Helmet is a component to dynamically manage the document’s head section. Some common use cases include setting the title, description, and meta tags for the document.

When combined with server-side rendering, it allows you to set meta tags that will be read by search engines and social media crawlers. This makes server-side rendering and React Helmet a powerful combination for creating apps that can benefit from SEO (search engine optimization) and social media data like oEmbed, Facebook Open Graph, or Twitter Cards.

In this article, you will explore the functionality of React Helmet in a React application.

Prerequisites

To follow along with this article, you will need:

  • Familiarity with installing packages with a package manager like npm or yarn.
  • Familiarity with importing and using components in your React project.

Note: This tutorial will not cover the steps for creating a React project or setting up server-side rendering. Please refer to How to Enable Server-Side Rendering for a React App.

This tutorial was verified with Node v15.3.0, npm v6.14.9, react v17.0.1, and react-helmet v6.1.0.

Step 1 — Adding React Helmet to Your Project

First, install the component into your project:

  1. npm install react-helmet@6.1.0

Now you can use React Helmet in your app by adding the elements that should go in the head of the document as children to the Helmet component:

src/App.js
import { Helmet } from 'react-helmet';

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>App Title</title>
        <meta name="description" content="App Description" />
        <meta name="theme-color" content="#008f68" />
      </Helmet>
    </div>
  );
}

export default App;

Then, open your browser’s developer tools and inspect the head element:

Inspect Element
<head>
  <!-- ... --->
  <title>App Title</title>
  <!-- ... -->
  <meta name="description" content="App Description" data-react-helmet="true">
  <meta name="theme-color" content="#008f68" data-react-helmet="true">
  <!-- ... --->
</head>

Observe the title and meta elements added by React Helmet.

Step 2 — Overwriting Values

Components further down the tree can override values provided to the Helmet component on a higher level.

For example, consider a ChildComponent that contains a Helmet component that modifies title:

src/ChildComponent.js
import React from 'react';
import { Helmet } from 'react-helmet';

export default function ChildComponent() {
  return (
    <div>
      <Helmet>
        <title>Modified Title</title>
      </Helmet>
      <h1>Child Component</h1>
    </div>
  )
}

Next, revisit App component and include the new ChildComponent:

src/App.js
import { Helmet } from 'react-helmet';

import ChildComponent from './ChildComponent';

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>App Title</title>
        <meta name="description" content="App Description" />
        <meta name="theme-color" content="#008f68" />
      </Helmet>
      <ChildComponent />
    </div>
  );
}

Then, open your browser’s developer tools and inspect the head element:

Inspect Element
<head>
  <!-- ... --->
  <title>Modified Title</title>
  <!-- ... -->
  <meta name="description" content="App Description" data-react-helmet="true">
  <meta name="theme-color" content="#008f68" data-react-helmet="true">
  <!-- ... --->
</head>

The title will be changed from App Title to Modified Title. The meta tags for description and theme-color values will remain the same because they have not been overwritten.

Step 3 — Handling Attributes for html and body

You can even include the html and body elements if you need to specify attributes for them.

For example, consider a body element that has a dark theme applied to it:

src/App.js
import { Helmet } from 'react-helmet';

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>App Title</title>
        <meta name="description" content="App Description" />
        <meta name="theme-color" content="#008f68" />
        <body class="dark" />
      </Helmet>
    </div>
  );
}

Then, open your browser’s developer tools and inspect the body element:

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

The class will be set to dark.

Step 4 — Rendering on the Server

The full benefit of React Helmet becomes apparent when the app is rendered on the server so that the app gets served with the correct elements in the head of the document.

Assuming that you have a React server-side rendered app setup in place, you can call React Helmet’s renderStatic method right after calling ReactDOMServer’s renderToString or renderToStaticMarkup to get an instance with properties for the Helmet data:

server/index.js
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import express from 'express';
import { Helmet } from 'react-helmet';

import App from '../src/App';

const PORT = process.env.PORT || 3006;
const app = express();

app.get('/*', (req, res) => {
  const appString = ReactDOMServer.renderToString(<App />);
  const helmet = Helmet.renderStatic();

  const html = `<!DOCTYPE html>
    <html lang="en">
      <head>
        ${helmet.title.toString()}
        ${helmet.meta.toString()}
      </head>
      <body>
        <div id="root">
          ${ appString }
        </div>
      </body>
    </html>
  `

  res.send(html);
});

app.listen(PORT);

Calling Helmet’s renderStatic returns an instance with properties like title and meta. You will also have access to other properties like link, script, noscript, style, htmlAttributes, and bodyAttributes.

Step 5 — Rendering Asynchronously with react-helmet-async

As brought up here by @mxstbr from Spectrum, React Helmet works synchronously which can potentially lead to issues on the server, especially with streaming.

A fork of React Helmet comes to the rescue: react-helmet-async.

  1. npm install react-helmet-async@1.0.7

The API is the same, with the exception that a HelmetProvider needs to wrap the component tree on both the client and the server:

import Helmet, { HelmetProvider } from 'react-helmet-async';

function App() {
  return (
    <HelmetProvider>
      <div className="App">
        <Helmet>
          <title>App Title</title>
          <meta name="description" content="App Description" />
          <meta name="theme-color" content="#008f68" />
        </Helmet>
      </div>
    /HelmetProvider>
  );
}

More information on the intent and usage of React Helmet Async is available on the announcement post on the New York Times Open blog.

Conclusion

In this article, you explored the functionality of React Helmet in a React application. Particularly how it works well with server-side rendering for promoting SEO and social media integrations.

If you’d like to learn more about React, take a look at our How To Code in React.js series, or check out our React topic page for exercises and programming projects.

# reactnative # 视频编解码
Logo
React

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐

SSR、ISR、CSR、SSG有什么区别

简介 SSR、ISR、CSR 和 SSG 被称为渲染模式,因为它们是 Web 应用程序相互渲染的不同方式。在本文中,我们将详细研究它们中的每一个,并讨论使用它们的 Web 技术/框架的类型。 企业社会责任 CSR 代表客户端渲染。这是一个将页面加载到客户端浏览器而不是服务器上的过程。 CSR 是一种呈现模式,其中浏览器向服务器发送请求,服务器通过发送一个空的 HTML 页面进行响应,其中仅包含对

avatar React

React 中具有“显示更多/更少”功能的代码列表项

我想在我的页面上显示一个元素列表,并且我希望每个元素都具有“显示更多/更少”功能来随意扩展和缩短文本。 为此,我将使用 React。我将从以下虚拟 API 获取一些假数据 u003d>jsonplaceholder.typicode.com 我将使用axios这样做。 我的结构中将包含三个页面:App.js、Texts.js 和 Text.js。 你可以在这里找到 repo u003d>githu

avatar React

React::Angular

苹果与橙子 Angular vs. React:比较苹果和橘子 有人说比较 React 和 Angular 就像比较_苹果和橘子_。 一个是处理视图的库,另一个是_完整的框架_。 反应 React 由 Facebook 开发和维护,并用于他们的产品,包括 Instagram 和 WhatsApp。它自 2013 年以来已经存在了大约,所以它并不是全新的。它也是 GitHub 上最受欢迎的项目之一,

avatar React