← Back to Blog

How to Add Schema Markup to Your Website (Step-by-Step)

Schema Markup Generator Team ·

Adding schema markup to your website is one of the most effective SEO improvements you can make, yet many website owners put it off because they think it requires advanced technical knowledge. The truth is that adding JSON-LD structured data to your site is straightforward, regardless of whether you use WordPress, a static HTML site, or a modern JavaScript framework. This step-by-step guide will walk you through the entire process.

Before You Start

Before adding schema markup, you need to understand two things: what content you have and which schema type matches that content. Take a quick inventory of your website pages and categorize them:

  • Blog posts and articles → Article or BlogPosting schema
  • Product pages → Product schema
  • FAQ or help pages → FAQPage schema
  • Tutorial or how-to content → HowTo schema
  • Business information pages → LocalBusiness or Organization schema
  • Event listings → Event schema
  • Recipe pages → Recipe schema
  • Video content → VideoObject schema

Once you know which pages need which schema type, you are ready to begin.

Step 1: Generate Your JSON-LD Code

The fastest way to create valid JSON-LD structured data is to use a schema markup generator. Tools like our free Schema Markup Generator let you select a schema type, fill in your content details, and instantly get valid JSON-LD code ready to copy.

Here is what a complete Article JSON-LD looks like:

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How to Add Schema Markup to Your Website",
  "author": {
    "@type": "Person",
    "name": "Jane Smith"
  },
  "datePublished": "2026-03-11",
  "dateModified": "2026-03-11",
  "publisher": {
    "@type": "Organization",
    "name": "Example Blog"
  },
  "description": "A step-by-step guide to adding schema markup",
  "image": "https://example.com/images/schema-guide.jpg"
}

The @context property tells search engines you are using the Schema.org vocabulary. The @type property specifies what kind of content you are describing. Everything else provides the actual content metadata.

Step 2: Add the Code to Your Website

How you add the JSON-LD code depends on your website platform. Here are instructions for the most common setups:

Static HTML Sites

For plain HTML websites, add the JSON-LD script tag directly in the <head> section of your HTML file:

<head>
  <title>Your Page Title</title>
  <meta name="description" content="Your page description">

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Your Article Title",
    "author": { "@type": "Person", "name": "Author Name" },
    "datePublished": "2026-03-11"
  }
  </script>
</head>

The script tag with type="application/ld+json" tells the browser this is structured data, not executable JavaScript. It will not affect your page’s appearance or behavior.

WordPress

WordPress offers several approaches for adding schema markup:

Method 1: Using a Plugin (Easiest) Install a schema markup plugin like Yoast SEO, RankMath, or Schema Pro. These plugins automatically generate structured data for your pages based on your content. Most support Article, Product, FAQ, HowTo, and other common types.

Method 2: Manual Addition via Theme If you want more control, add the JSON-LD directly to your theme’s header.php file or use a hook in your functions.php:

function add_schema_markup() {
  if (is_single()) {
    echo '<script type="application/ld+json">';
    echo json_encode([
      "@context" => "https://schema.org",
      "@type" => "Article",
      "headline" => get_the_title(),
      "author" => ["@type" => "Person", "name" => get_the_author()],
      "datePublished" => get_the_date('c'),
    ]);
    echo '</script>';
  }
}
add_action('wp_head', 'add_schema_markup');

Method 3: Custom HTML Block For individual pages, you can add the JSON-LD code using a Custom HTML block in the WordPress editor. This works for one-off implementations like FAQ schema on specific pages.

React / Next.js

In React-based applications, add the JSON-LD as a script element in your page component:

export default function ArticlePage({ article }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: article.title,
    author: { "@type": "Person", name: article.author },
    datePublished: article.publishedAt,
  };

  return (
    <>
      <Head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
        />
      </Head>
      <article>{/* Your article content */}</article>
    </>
  );
}

Shopify

Shopify themes often include basic Product schema by default, but you may want to customize or add additional types. Edit your theme’s theme.liquid file or use a dedicated section:

{% if template contains 'product' %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "{{ product.title | escape }}",
  "description": "{{ product.description | strip_html | escape }}",
  "image": "{{ product.featured_image | image_url }}",
  "offers": {
    "@type": "Offer",
    "price": "{{ product.price | money_without_currency }}",
    "priceCurrency": "{{ shop.currency }}"
  }
}
</script>
{% endif %}

Step 3: Validate Your Markup

After adding schema markup to your page, you must validate it before considering the job done. Google provides two primary validation tools:

Google Rich Results Test

Visit Google’s Rich Results Test and enter your page URL or paste your HTML code. The tool will show you which rich result types are detected, whether they are valid, and any warnings or errors that need to be fixed.

Pay attention to the difference between errors and warnings. Errors mean your markup is invalid and will not trigger rich results. Warnings mean your markup is valid but could be improved by adding recommended properties.

Schema Markup Validator

The Schema.org Validator checks your markup against the full Schema.org specification. It is more thorough than Google’s tool but does not tell you about rich result eligibility specifically.

Step 4: Deploy and Monitor

Once validated, deploy your changes to your live site. Then set up monitoring to track the performance of your structured data:

Google Search Console

Navigate to the Enhancements section in Google Search Console. As Google crawls your pages, you will see reports for each type of structured data detected on your site. These reports show valid items, items with warnings, and items with errors.

Common issues you might see include:

  • Missing required properties — You did not include a required field like image or datePublished.
  • Invalid values — A property has an incorrect format, like a date that is not in ISO 8601 format.
  • Markup not matching page content — The structured data does not align with what is visible on the page.

Track Rich Result Performance

In Google Search Console, go to Performance → Search Appearance to see how many impressions and clicks your rich results are getting. Compare this data against your non-rich-result pages to measure the impact of your structured data implementation.

Step 5: Expand Your Implementation

Once you have successfully added schema markup to your initial set of pages, expand to cover more of your site:

  • Create templates — If your site has consistent page types (like blog posts or product pages), create schema markup templates that automatically populate with each page’s content.
  • Add multiple schema types — Many pages can benefit from more than one schema type. An article page might use both Article and BreadcrumbList schema.
  • Cover all page types — Do not forget about your homepage (Organization schema), about page (Organization or Person schema), and contact page (LocalBusiness schema with contact information).
  • Stay current — Google regularly adds support for new rich result types. Check Google’s structured data documentation periodically for new opportunities.

Common Mistakes to Avoid

These mistakes are the most common reasons schema markup fails to trigger rich results:

  1. Marking up content that is not on the page. Every property in your schema must correspond to content visible to users on the page.

  2. Using incorrect data types. Dates must be in ISO 8601 format. Prices must be numbers, not strings with currency symbols.

  3. Forgetting to update schema when content changes. If you update an article’s title or a product’s price, update the schema markup too.

  4. Not including an image. Many rich result types require or strongly recommend an image property. Always include images when available.

  5. Using generic or placeholder content. Do not use “Lorem ipsum” or generic descriptions in your schema. Every value should be accurate and specific.

  6. Duplicating schema across pages. Each page should have its own unique schema markup that describes that specific page’s content.

Next Steps

Start by adding schema markup to your five most important pages. Use our free Schema Markup Generator to create the JSON-LD code, validate it with Google’s Rich Results Test, and deploy it to your site. Monitor the results in Google Search Console and expand your implementation from there.

The key to success with schema markup is consistency. Make it part of your content publishing workflow so that every new page gets proper structured data from day one.