Dev.to WebDev 🛠 Dev 👁 0 📖 4 min read

Schema Markup Guide for Developers: JSON-LD Examples That Work

Schema markup is structured data that tells search engines and AI tools what your page contains. It labels your company, articles and products in a format machines read without guessing. Google recommends JSON-LD for thi

Schema markup is structured data that tells search engines and AI tools what your page contains. It labels your company, articles and products in a format machines read without guessing. Google recommends JSON-LD for this job, and developers can add it in minutes.

This guide shows three working examples, then covers testing and the mistakes that cause errors.

What schema markup does for your pages

Search engines read your text, but they still infer meaning. Schema markup removes that guesswork. It states, in plain data, that a page is an article, that a company has a logo, or that a product costs a certain price.

The markup can unlock rich results in Google, such as review stars and product details. It also gives answer engines a clean source to quote. Rich results never come with a guarantee, so treat schema as a clarity layer and not a ranking switch.

Why JSON-LD beats microdata

JSON-LD sits in one script block, separate from your HTML. You can edit it without touching your layout. Microdata and RDFa mix attributes into the markup itself, which makes templates harder to maintain.

Place the script in the <head> or the <body>. Google reads both.

Example 1: Organization schema

Add this to your homepage or about page. It tells machines who you are and where your official profiles live.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Example Company",
  "url": "https://example.com/",
  "logo": "https://example.com/logo.png",
  "sameAs": [
    "https://www.linkedin.com/company/example",
    "https://x.com/example"
  ]
}
</script>

Example 2: Article schema

Use this on every blog post. Match each value to what readers actually see on the page.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Schema Markup Guide for Developers",
  "author": { "@type": "Person", "name": "Jane Doe" },
  "datePublished": "2026-11-09",
  "dateModified": "2026-11-09",
  "image": "https://example.com/cover.png"
}
</script>

Example 3: Product schema

Online stores use this to show price and availability. Never fake review data. Google can issue a manual action for misleading markup.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Trail Running Shoe",
  "image": "https://example.com/shoe.jpg",
  "description": "Lightweight shoe for rocky trails.",
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "89.00",
    "availability": "https://schema.org/InStock"
  }
}
</script>

Generate schema from your data, not by hand

Hard-coded markup goes stale. Build the object from the same data that renders the page, so the two always match. In a JavaScript framework, a small helper works well:

export function articleSchema(post) {
  return {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: post.title,
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
    author: { "@type": "Person", name: post.author },
  };
}

Then render the result inside a script tag with JSON.stringify.

How to test schema markup

Run every template through Google's Rich Results Test and the Schema Markup Validator before launch. Then watch the enhancement reports in Search Console after release. They flag errors that testing tools miss at scale.

Common schema markup mistakes

  • Marking up content that users cannot see on the page.
  • Letting prices or dates in the markup drift from the visible text.
  • Adding the same entity twice with conflicting values.
  • Copying review ratings you do not own.

If you also want pages quoted in AI answers, pair schema with the steps in our answer engine optimization checklist for developers.

Schema markup FAQs

What is schema markup in SEO?

Schema markup is structured data, added to a page, that describes its content in a standard vocabulary from schema.org. Search engines use it to understand and display your pages.

Does schema markup improve rankings?

Google says structured data is not a direct ranking factor. It can earn rich results and help machines understand your page, which may improve clicks.

Which schema type should I use?

Use the type that matches the page. Articles use Article, stores use Product, and company pages use Organization or LocalBusiness.

What is the difference between JSON-LD and microdata?

JSON-LD lives in a separate script block, while microdata adds attributes inside your HTML. Google recommends JSON-LD because it is easier to maintain.

How do I test schema markup?

Paste your URL or code into Google's Rich Results Test or the Schema Markup Validator. Fix every error before you publish.

Want expert help with structured data?

Schema, technical fixes and content strategy work best together. Explore DigiStreet Media's AEO services or review our full SEO company in India offering. Which schema type will you add first? Share it in the comments.

Disclosure: I publish this account for DigiStreet Media, a digital marketing agency in Noida, India.

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.