How to add meta tags in react js website for SEO

How to add meta tags in react js website for SEO

To add meta tags to a React.js website for SEO, you can use the react-helmet library.

1. First, you need to install the library using npm or yarn by running the following command:

npm install react-helmet

or

yarn add react-helmet

2. Once installed, you can import the library and use it in your React components to set the meta tags. Here’s an example code snippet:

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

function MyComponent() {
  return (
    <div>
      <Helmet>
        <title>My Page Title</title>
        <meta name="description" content="This is a description of my page" />
        <meta name="keywords" content="react, meta tags, seo" />
        <meta name="author" content="Your Name" />
        <meta property="og:title" content="My Page Title" />
        <meta property="og:description" content="This is a description of my page" />
        <meta property="og:image" content="https://example.com/image.jpg" />
        <meta property="og:url" content="https://example.com/my-page" />
        <meta name="twitter:title" content="My Page Title" />
        <meta name="twitter:description" content="This is a description of my page" />
        <meta name="twitter:image" content="https://example.com/image.jpg" />
        <meta name="twitter:card" content="summary_large_image" />
      </Helmet>
      {/* Your component's code here */}
    </div>
  );
}

export default MyComponent;

In this example, we are using the Helmet component from the react-helmet library to set various meta tags, including the page title, description, keywords, author, and Open Graph (OG) and Twitter Card metadata for social media sharing. You can customize the meta tags according to your specific SEO needs.

Note that you should only use one title tag per page and ensure that the description tag accurately summarizes the content of your page. Also, make sure to provide relevant image for social media sharing.