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;


Note The Above one is for dynamic u can use it with any of ur component and can change the data according to ur page need

U can also add static SEO in your index.html file but this will be same for ur every component



<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8" />

  <link rel="icon" href="../src/Assets/profileImg.jpg" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <meta name="theme-color" content="#000000" />

  <title>Shamim |Porfolio</title>


  <!-- Standard Meta Tags -->

  <meta name="description" content="Self Developed personal website build with React.js">


  <!-- Google / Search Engine Tags -->

  <meta itemprop="name" content="Shamim | Portfolio">

  <meta itemprop="description" content="Self Developed personal website build with React.js">

  <meta itemprop="image" content="https://shamim-portfolio-u1yp.onrender.com/">


  <!-- Facebook Meta Tags -->

  <meta property="og:url" content="https://shamim-portfolio-u1yp.onrender.com/">

  <meta property="og:type" content="website">

  <meta property="og:title" content="Shamim | Portfolio">

  <meta property="og:description" content="Self Developed personal website build with React.js">

  <meta property="og:image" content="https://shamim-portfolio-u1yp.onrender.com/">


  <!-- Twitter Meta Tags -->

  <meta name="twitter:card" content="summary_large_image">

  <meta name="twitter:title" content="Shamim | Portfolio">

  <meta name="twitter:description" content="Self Developed personal website build with React.js">

  <meta name="twitter:image" content="https://shamim-portfolio-u1yp.onrender.com/">

</head>

<body>

  <noscript>You need to enable JavaScript to run this app.</noscript>

  <div id="root"></div>

</body>

</html>


Replace The Deployment Link With Ur actual link or any content u want to put here


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 in the deployment link section for index.html for social media sharing.