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 🫡

Runner H image

DebtDestroyer Pro: The AI Agent That Pays Off Your Debt While You Sleep

Check out this submission to the Runner H "AI Agent Prompting" Challenge. 👀

Read more →

Top comments (0)

Gen AI apps are built with MongoDB Atlas

Gen AI apps are built with MongoDB Atlas

MongoDB Atlas is the developer-friendly database for building, scaling, and running gen AI & LLM apps—no separate vector DB needed. Enjoy native vector search, 115+ regions, and flexible document modeling. Build AI faster, all in one place.

Start Free

👋 Kindness is contagious

Dive into this thoughtful piece, beloved in the supportive DEV Community. Coders of every background are invited to share and elevate our collective know-how.

A sincere "thank you" can brighten someone's day—leave your appreciation below!

On DEV, sharing knowledge smooths our journey and tightens our community bonds. Enjoyed this? A quick thank you to the author is hugely appreciated.

Okay