Adding <title> tag to React v18.0 using react-helmet

There are certain ways you can include title tag to your react component or page. One is using React Helmet and one with UseEffect Hook.

Although React is frequently praised for enhancing the efficiency of front-end development, it can pose challenges for search engines.

What is React Helmet?
This adaptable React component will oversee any alterations to the document head.

Helmet utilizes basic HTML tags as input and produces straightforward HTML tags as output. It's extremely straightforward and suitable for React beginners.

How to use?
npm i react-helmet

github repo

sample code:

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

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

Source

This is essential for setting metadata, such as titles, descriptions, and other meta tags, which are crucial for SEO and improving a website's search engine visibility.

If you're looking to enhance your React application's SEO capabilities and optimize the content in the head section, React Helmet is generally recommended as a dependable solution.

Thank you 🫡