DEV Community

Cover image for Adding <title> tag to React v18.0 using react-helmet
Krishna Haranath
Krishna Haranath

Posted on

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>
    );
  }
};
Enter fullscreen mode Exit fullscreen mode

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 🫑

Top comments (0)