How to use Schema on React pages build with NextJS or Gatsby

If there is anything Search engines appreciate, it is structured data.

If your page doesn’t have structured data, search engines are literally guessing, what is the title, what is the description, what is the price of this product etc.

Back in 2011, Google, Microsoft, Yahoo and Yandex decided to collaborate and launched the Schema organization.

Read more about Schema docs at https://schema.org/

With this tool, you can tell the search engine exactly what the title is and so on. It doesn’t have to guess anymore.

Not only will this optimize SEO, but you are also able to adjust how the page will look in the search results.

How to use it on React pages made with NextJS or Gatsby

If you are making your application using React with a static site generator such as NextJS or Gatsby, you can still easily add a Schema to each and every page you want to.

There is a simple component for that. Let’s have a look at how to use it. For example, we will use a page, presenting a product.

First, install the package.

npm install jsx-schema

Then, in the component

import JSXSchema from  "jsx-schema";

export default function ProductPage() {
  return (
    <div className="App">
      <h1>Title of Product...</h1>
      <JSXSchema
        type="Product"
        name="Name of product"
        sku={new Date().getTime()}
	description="Lorem ipsum..."
	offers={{
          type: "Offer",
	  price: 10,
	  priceCurrency: "USD",
	  availability: "In stock"
	}}
	aggregateRating={{
	  type: "AggregateRating",
	    ratingValue: "4.8",
	    reviewCount: "11"
	  }}
      />
    </div>
  );
}

With name, description, price etc. Search engines can now tell, the exact data of your product, and the right data will be shown as output, for search results.