reactjs
  1. reactjs-helmet
PreviousNext

ReactJs Helmet

Syntax

import { Helmet } from 'react-helmet';

<Helmet>
  <title>Page Title</title>
  <meta name="description" content="Description of the page" />
  {/* Other meta tags */}
</Helmet>

Example

import React from 'react';
import { Helmet } from 'react-helmet';

const MyPage = () => {
  return (
    <>
      <Helmet>
        <title>My Page</title>
        <meta name="description" content="This is my page description" />
      </Helmet>
      <div>
        <h1>Welcome to My Page</h1>
        <p>This is the content of my page</p>
      </div>
    </>
  );
};

export default MyPage;

Output

The output of the above example will be a webpage with the following meta tags in the <head> section:

<head>
  <title>My Page</title>
  <meta name="description" content="This is my page description" />
</head>

Explanation

ReactJs Helmet is a library that allows you to manage the <head> section of your React application. With ReactJs Helmet, you can set the title of your page, add meta tags, and more.

In the example above, we used the Helmet component from ReactJs Helmet to set the title and add a meta tag for the description on the page. The Helmet component renders its children in the <head> section of the document.

This is useful for search engine optimization (SEO) and for sharing your webpage on social media platforms like Facebook and Twitter.

Use

You can use ReactJs Helmet to add any meta tags that you need for your page. Some common meta tags include:

  • title: The title of the page.
  • description: A short description of the page.
  • keywords: Keywords related to the page.
  • robots: Whether search engines should index the page.
  • canonical: The canonical URL of the page.
  • og:title: The title of the page for social media sharing.
  • og:description: The description of the page for social media sharing.
  • og:image: The image to display when sharing the page on social media.

Important Points

  • ReactJs Helmet only updates the <head> section of the document, not the <body> section.
  • You can use ReactJs Helmet with server rendering to generate dynamic <head> content for each page of your application.
  • ReactJs Helmet uses the react-side-effect module to manage server-side rendering.

Summary

In summary, ReactJs Helmet allows you to manage the <head> section of your React application. You can use it to add title tags, meta tags, and more. This is useful for SEO and for sharing your webpage on social media platforms.

ArchitectureFormik
Published on: