Supercharge SEO with Schema.org Schema Markup

What Schema.org Does

Schema.org is a shared vocabulary for structured data. It helps search engines understand what a page is about instead of forcing them to infer everything from raw HTML.

That structured data can unlock richer search results, but there is no guarantee that a page will be shown as a rich result. Search engines still decide when and how to display it.

Schema.org supports a few serialization formats, including:

RDFa
Microdata
JSON-LD

Google recommends JSON-LD, so that is what we will use here.

How To Add Schema Markup

Let's walk through a blog post example. The same pattern works for product pages, articles, events, recipes, and more.

Start by choosing the schema type that matches the page. For a blog post, BlogPosting is a good fit.

import React from 'react';

export default function BlogPosting({ blog }) {
  const schema = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': blog.url,
    },
    headline: blog.title,
    description: blog.description,
    image: blog.imageUrl,
    author: {
      '@type': 'Person',
      name: blog.authorName,
    },
    publisher: {
      '@type': 'Organization',
      name: 'Skies',
      logo: {
        '@type': 'ImageObject',
        url: 'https://skies.dev/logo.png',
      },
    },
    datePublished: blog.datePublished,
    dateModified: blog.dateModified,
  };

  return (
    <article>
      {/* the rest of the article */}
    </article>
  );
}

A few practical notes:

Keep the values truthful and consistent with the visible page content.
Use absolute URLs for images and canonical page references.
Populate shared fields like publisher statically, and fill page-specific fields from your content source.

Now inject the schema into the document <head>. In React, a small SEO component keeps this logic in one place.

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

export default function SEO({ schema }) {
  return (
    <Helmet>
      <script type="application/ld+json">
        {JSON.stringify(schema)}
      </script>
    </Helmet>
  );
}

You can then pass the structured data from the page into SEO:

import React from 'react';
import SEO from './SEO';

export default function BlogPosting({ blog }) {
  const schema = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': blog.url,
    },
    headline: blog.title,
    description: blog.description,
    image: blog.imageUrl,
    author: {
      '@type': 'Person',
      name: blog.authorName,
    },
    publisher: {
      '@type': 'Organization',
      name: 'Skies',
      logo: {
        '@type': 'ImageObject',
        url: 'https://skies.dev/logo.png',
      },
    },
    datePublished: blog.datePublished,
    dateModified: blog.dateModified,
  };

  return (
    <article>
      <SEO schema={schema} />
      {/* article content */}
    </article>
  );
}

After adding the markup, validate it with Google's current structured data testing tools. The exact tool names change over time, but the goal stays the same: confirm that your JSON-LD parses cleanly and matches the page content.

Supercharge SEO with Schema.org Schema Markup

What Schema.org Does

How To Add Schema Markup

References

You might also like