Schema Markup for Beginners: Add JSON-LD Step by Step

What structured data actually does

A search engine reads your page as text. It can guess that "₹1,299" is a price, but structured data removes the guessing. You describe the page in a shared vocabulary from schema.org, and the search engine reads those facts directly.

The visible payoff is a rich result: star ratings, prices, event dates, recipe cook times or a job's salary shown right in the search listing. Google is clear that markup makes a page eligible for these features. It does not guarantee them, and Google decides when to show them.

There is also a quieter benefit. Clean structured data helps Google connect your organisation's name, logo and pages into one picture. Other search engines and AI tools read the same vocabulary too.

Note: Structured data describes what is already on the page. It is not a place to add facts, prices or reviews that visitors can't see.

JSON-LD vs Microdata vs RDFa

There are three ways to write structured data. All three use the same schema.org vocabulary; they differ in where the code lives.

Google recommends JSON-LD where your setup allows it. It sits in one block, so a developer can change the design without breaking the markup. The rest of this guide uses JSON-LD.

Which schema types are worth adding

Start with the type that matches what the page is. One page usually has one main type, plus breadcrumbs.

Google keeps a full list of supported features in its search gallery. If a type isn't there, it can still be valid schema.org, but it won't produce a Google rich result.

Required fields for common types

Each Google feature has required properties (no rich result without them) and recommended ones (better chance and richer display).

Tip: Our schema markup generator labels every field as required or recommended for the type you pick. It also warns you when something is missing, such as a product with no price, rating or review.

How to add JSON-LD, step by step

Here is the full process for a product page.

1. Pick the type. A single product for sale is Product with an Offer.
2. Collect the facts from the page. Name, image URL, price, currency, stock status, brand. Use exactly what visitors see.
3. Write or generate the JSON-LD. Open the schema generator, choose Product and fill in the form. The code updates as you type, and empty fields are left out.
4. Paste it into the page (see the next section).
5. Test it in the Rich Results Test and the Schema.org validator.
6. Deploy, then watch Search Console. The Enhancements reports show errors across all pages that use the template.

The finished markup looks like this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Handloom Cotton Kurta",
  "image": "https://example.com/images/kurta-blue.jpg",
  "description": "Hand-woven cotton kurta in indigo blue, sizes S to XXL.",
  "sku": "KRT-104",
  "brand": { "@type": "Brand", "name": "Example Weaves" },
  "offers": {
    "@type": "Offer",
    "price": 1299,
    "priceCurrency": "INR",
    "availability": "https://schema.org/InStock",
    "url": "https://example.com/kurta-blue"
  }
}
</script>

Note the details. The price is a plain number with no ₹ sign or comma. The currency is a three-letter code. Availability is a full schema.org URL. The generator handles these conversions for you, including turning "10 minutes prep" into the ISO 8601 duration PT10M for recipes.

Where to paste the code (WordPress, Shopify, Next.js)

JSON-LD can go in the <head> or anywhere in the <body>. Search engines read it in both places.

• Plain HTML: paste the script block just before </head>.
• WordPress: use your SEO plugin's custom schema box or a header-code plugin, set for that page only.
• Shopify: edit the product or page template, so every product gets markup filled from its own data.
• Next.js (App Router): render a script tag inside the page component, built from the same data the page shows.

For Next.js, this pattern works and is the one this site uses:

export default function ProductPage({ product }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.name,
    offers: { "@type": "Offer", price: product.price, priceCurrency: "INR" },
  };
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }}
      />
      {/* page content */}
    </>
  );
}

The .replace(/</g, "\\u003c") matters. Without it, a product description that contains </script> could close the tag early and break the page.

Tip: Build the JSON-LD from the same variables that render the page. Then the price in the markup can never disagree with the price on screen.

While you're editing the <head>, check the title and description too. The meta tag generator writes them, and the SERP preview tool shows whether they'll be cut off in results.

How to test your markup

Use two free tools. They answer different questions.

• Google Rich Results Test — paste a URL or code. It shows which Google rich results the page qualifies for, plus errors (missing required fields) and warnings (missing recommended fields).
• Schema.org validator — checks the markup against the whole schema.org vocabulary, including types Google doesn't use for rich results.

Fix every error. Warnings are optional, but filling recommended fields usually gives a fuller result. After you publish, use the URL Inspection tool in Search Console to confirm Google sees the markup on the live page.

Google's FAQ and HowTo changes

Two once-popular types no longer do anything visible in Google:

• HowTo: In August 2023 Google limited HowTo rich results to desktop, and in September 2023 it stopped showing them altogether (Google Search Central blog).
• FAQPage: The same August 2023 change limited FAQ rich results to well-known, authoritative government and health websites. Then, per Google's documentation changelog, FAQ rich results stopped appearing in Google Search from 7 May 2026 for all sites.

Google also retired the sitelinks search box in November 2024, and since January 2025 breadcrumbs show only in desktop results.

What should you do? Don't add FAQ or HowTo markup expecting dropdowns in Google. Existing markup is harmless; Google says unused structured data doesn't cause problems. It is still valid schema.org, and other services can read it.

Common mistakes that cost you rich results

Most problems fall into two groups: markup that is technically broken, and markup that breaks Google's structured data policies.

Technical mistakes

• Wrong formats: "price": "₹1,299" instead of 1299, or "Rs" instead of "INR".
• Dates without time zones: an event at 2026-11-21T10:00 is ambiguous. Write 2026-11-21T10:00:00+05:30.
• Relative URLs: use full https:// addresses for image, url and item.
• Trailing commas or smart quotes from copying code out of a word processor. Paste into a plain-text editor first.
• Markup on the wrong page type: Product markup belongs on the page for one product, not on a category page that lists 40 of them.

Policy mistakes (these can lead to a manual action)

• Fake or self-written reviews. Ratings must come from real customers and be visible on the page. Marking up reviews you wrote about your own business is against the rules.
• Content that doesn't match the page. Say the markup shows ₹999 but the page shows ₹1,299, or it says "in stock" for a sold-out item. Google may ignore that markup or take action against it.
• Hidden content. Marking up text that visitors can't see anywhere on the page.
• Expired jobs and events. Remove JobPosting markup when the role is filled, and mark cancelled events with EventCancelled.

Warning: A manual action for spammy structured data removes your rich results. They stay off until you fix the problem and file a reconsideration request in Search Console. Keep markup honest from the start.

If you're new to this, start with one template, such as your product page or blog post. Get it passing in both testers, then roll the same approach out to the rest of the site.