Onjsdev

Share

How Change Title & Metadata in Reactjs With React Helmet

By onjsdev

Jan 20th, 2024

React Helmet is a popular library for managing the document head in React applications. It simplifies the process of adding, updating, and removing elements like title, meta, and link tags, making it easier to manage SEO, social media sharing, and other aspects of your app's head.

So, let's get started using react-helmet

Install The React-Helmet Package

--yarn
yarn add react-helmet
--npm
npm install react-helmet

Manage The Document Head: Change The Title And Meta Description

Working with react-helmet is simple. Just import the Helmet component and wrap your standard HTML tags inside it. The default title in a React app is 'React App', but it can be easily altered and a new description added, which serves both search engines and users.

import { Helmet } from "react-helmet";

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>My New Title</title>
        <meta name="description" content="This is my page description" />
      </Helmet>
    </div>
  );
}

export default App;

Manage Title And Meta Description With React-Helmet

Add The Link and Script Tags

In addition, scripts and link tags can be added to the head tag in plain HTML format by placing them within the Helmet component tags. This can be used to add a canonical URL and script, for example.

import { Helmet } from "react-helmet";

function App() {
  return (
    <div className="App">
      <Helmet>
        <script>alert("hello")</script>
        <link rel="canonical" href="https://example.com/" />
      </Helmet>
    </div>
  );
}

export default App;

Manage The Document Head In Child Component

When you try to inject a tag into the head tag in both the parent and child component, the tag added in the parent will be overridden.

import { Helmet } from "react-helmet";

function Child() {
  return (
    <div>
      <Helmet>
        <title>Child Component Title</title>
      </Helmet>
      <p>Child Component</p>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>Parent Component Title</title>
      </Helmet>
      <Child></Child>
    </div>
  );
}

export default App;

manage title and meta description in parent and child component using react helmet

Add Attributes To The HTML and Body Tag With React-helmet

Not only manage the head properties of a website, but also you can add attributes to the HTML and body tag with react-helmet.

import { Helmet } from "react-helmet";

function App() {
  return (
    <div className="App">
      <Helmet>
        <body theme="light" />
        <html lang="en" />
        <title> Title</title>
      </Helmet>
      My App
    </div>
  );
}

export default App;

React Helmet In Server Side Rendering With Nodejs

We can also set the title or add new metadata to our app on the server side, which is great for SEO thanks to the power of server-side rendering.

// Client Side
import { Helmet } from "react-helmet";

function App() {
  return (
    <div>
      <Helmet>
        <title>Welcome From Server</title>
      </Helmet>
      Hello World
    </div>
  );
}

export default App;

// Server Side
import React from "react";
import ReactDOMServer from "react-dom/server";
import express from "express";
import { Helmet } from "react-helmet";
import App from "./src/App.js";
import register from "babel-register";

register({
  presets: ["react"],
});

const app = express();

app.get("/*", (req, res) => {
  const app = ReactDOMServer.renderToString(React.createElement(App));
  const helmet = Helmet.renderStatic();

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

  res.send(html);
});

app.listen(3003, () => {
  console.log("Server is running");
});

react-helmet manage the title in server side

Conclusion

In this article, we have shown you how to manage document title attributes, including a page's title, description, and metadata, using react-helmet, as well as how to add new attributes to the HTML and body tag in both client side and server side.

If you want to learn more about reactjs then, check the following articles: