Simple SEO Component

Beginner

This tutorial explains how to create a reusable component for search engine optimization (SEO) in a React.js project. The component is specifically designed for use on blog posts and articles.

Simple Article Seo Component

I originally built this example using the Next.js framework, but modified it to work as a standalone React component. If youd like, you can find the original code and a link to the GitHub repository in the top right corner of react play.

We are creating a component in a React.js project that will take an object as input. The object will have properties and corresponding values. The component will then convert these properties and values into meta tags, which are HTML tags used to provide metadata about a webpage. The meta tags will be created using the properties as the key and the values as the content. For example, if the object has a property "keywords" with a value of "SEO, React.js, tutorial," the component would create a meta tags. These meta tags can be used to provide information about the webpage to search engines, such as the pages keywords, description, and author.

Create a component file SEO.js, including this code:


  import React from "react"

  export default function Seo({fields}) {
    return (
        {Object.entries(fields).map(([property, value]) => {        
          if(property === "canonical"){return <link key="canonical" rel="canonical" href={value} />}
          if (Array.isArray(value)) {
            return value.map((val, index) => (
              <meta
                key={index}
                property={property}
                name={property}
                content={val}
              />
            ));
          }
          return <meta key={property} property={property} name={property} content={value} />;
        })}
    )
  }

The code shown above demonstrates how to use the Seo component to automatically generate meta tags for search engine optimization (SEO). The object contains the information that the Seo component needs to create the meta tags. By passing the object(in example seoFields) to the Seo component, the meta tags will be generated automatically.

Here is an example index.js file for you.


  import Seo from "../components/Seo";

  const seoFields = {
    canonical:"/example.com/demo",
    keywords: "HTML, CSS, JavaScript",
    "article:published_time": "25 Dec 2022",
    "article:modified_time": "25 Dec 2022",
    "og:image": "./varcel.svg",
    "og:title": "React.js Seo Components",
    "og:description": "React.js Seo Components",
    "og:image:width": "850",
    "og:image:height": "650",
    "twitter:creator": "@handle",
    "twitter:card": "summary_large_image",
    "twitter:site": "summary_large_image",
    tags: ["tag1", "tag2", "tag3"],
    author: ["Debjit Biswas", "D Biswas"],
  };

  export default function Home() {
    return (
      <>
        <Head>
          <title>React.js Seo Components</title>
          <meta name="description" content="React.js Seo Components App" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Seo fields={seoFields} />
        </Head>
        <main>
          <Link href={"https://debjit.in"}>Debjit.in</Link>
        </main>
      </>
    );
  }