SEO Kickoff

Schema Markup Guide: How to Add Structured Data and Win Rich Results

8 min read
Schema Markup Guide: How to Add Structured Data and Win Rich Results

Schema markup (structured data) is code you add to your pages to help Google understand your content. When Google understands it, you can earn rich results — star ratings, FAQs, breadcrumbs, and more — that dramatically increase click-through rates.

What Is Schema Markup?

Schema markup is a vocabulary of tags defined at Schema.org and implemented as JSON-LD, Microdata, or RDFa. Google strongly recommends JSON-LD — a script block in your page's <head> or <body>.

A basic Article schema looks like this:

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Schema Markup Guide",
  "author": {
    "@type": "Person",
    "name": "Jane Smith"
  },
  "datePublished": "2025-03-01",
  "image": "https://example.com/images/schema-guide.jpg"
}

Why Schema Markup Matters for SEO

Structured data doesn't directly boost rankings, but it improves visibility in ways that drive more clicks:

  • Rich snippets — star ratings, prices, and availability shown in SERPs
  • Featured snippets — FAQ and HowTo schema surfaces your content in position zero
  • Knowledge panels — organisation and person schema feeds Google's knowledge graph
  • Sitelinks — proper breadcrumb schema helps Google build navigational sitelinks

Studies consistently show rich results receive 20–30% higher CTR than plain blue links for the same position.

The Most Valuable Schema Types for Blogs

Article / BlogPosting

Use on every blog post. Key properties:

PropertyDescription
headlineArticle title (max 110 chars)
authorPerson or Organisation entity
datePublishedISO 8601 date
dateModifiedWhen content was last updated
imagePrimary image URL (1200 × 630 px minimum)

FAQ

Add to any page with question-and-answer sections. Each FAQ item becomes an expandable result in Google Search:

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is schema markup?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Schema markup is structured data that helps search engines understand your content."
      }
    }
  ]
}

BreadcrumbList

Breadcrumbs appear beneath the URL in SERPs and make navigational context clear:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "SEO Tips", "item": "https://example.com/category/seo-tips/" },
    { "@type": "ListItem", "position": 3, "name": "Schema Markup Guide" }
  ]
}

HowTo

For step-by-step guide posts, HowTo schema can earn a rich carousel in mobile SERPs:

{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Add Schema Markup",
  "step": [
    { "@type": "HowToStep", "name": "Choose your schema type", "text": "Identify which schema type matches your content." },
    { "@type": "HowToStep", "name": "Write the JSON-LD", "text": "Create a JSON-LD script block with the required properties." },
    { "@type": "HowToStep", "name": "Test and deploy", "text": "Validate with Google's Rich Results Test before publishing." }
  ]
}

How to Implement Schema in Next.js

In Next.js App Router, inject JSON-LD directly in your page component:

export default function BlogPostPage({ article }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    headline: article.title,
    datePublished: article.published_at,
    author: { "@type": "Organization", name: "My Blog" },
  };

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

Testing and Validating Your Schema

Always validate before deploying:

  1. Google Rich Results Test — paste your URL or code to check eligibility
  2. Schema Markup Validator (schema.org) — checks syntax and property types
  3. Google Search Console → Enhancements — shows real-world errors after indexing

Common Mistakes to Avoid

  • Missing required properties (the test will list them)
  • Mismatched content (schema describes different content than the page)
  • Marking up content hidden from users (Google penalises this)
  • Using deprecated types (Product without offers is flagged)

Schema Markup Rollout Plan

WeekAction
1Add Article + BreadcrumbList to all blog posts
2Add FAQ schema to existing Q&A sections
3Add HowTo schema to step-by-step guides
4Monitor GSC Enhancements reports for errors

Structured data is one of the highest-ROI technical SEO investments you can make — implement it once and benefit from enhanced SERP features indefinitely.

Related Articles