How to Update Meta Tags in React?

Sometimes, we want to update meta tags in React.

In this article, we’ll look at how to update meta tags in React.

Update Meta Tags in React

To update meta tags in React, we can use the react-document-meta library.

To install it, we run:

npm i react-document-meta

Then we can change the meta tags by writing:

import React from "react";
import DocumentMeta from "react-document-meta";

const meta = {
  title: "Some Meta Title",
  description: "I am a description, and I can create multiple tags",
  canonical: "http://example.com/path/to/page",
  meta: {
    charset: "utf-8",
    name: {
      keywords: "react,meta,document,html,tags"
    }
  }
};

export default function App() {
  return (
    <div>
      <DocumentMeta {...meta} />
    </div>
  );
}

We set the title meta tag with the title property.

We set the description meta tag with the description property.

We set the canonical meta tag with the canonical property.

And we set the other meta tags with the meta property.

We spread the meta object as the props for the DocumentMeta component to set the meta tags.

Conclusion

To update meta tags in React, we can use the react-document-meta library.