Schema markup generator

How to use this tool

Search engines read your page as text and make educated guesses about what it means. Structured data removes the guessing: it states explicitly that this string is a business name, that one is a postcode, and this number is an opening hour — in a vocabulary (schema.org) that Google, Bing, Yahoo and Yandex jointly maintain.

The payoff is rich results. Correct structured data is what lets a recipe show a star rating in search, an event show its date, or a local business appear with its address and hours in a knowledge panel. Those enhanced listings occupy more space and attract more clicks than a plain blue link.

Why JSON-LD rather than Microdata

There are three ways to add structured data, and Google explicitly recommends JSON-LD. Unlike Microdata and RDFa, which scatter attributes throughout your HTML, JSON-LD sits in a single <script> block — usually in the <head> — completely separate from your markup.

That separation is the whole advantage. You can restructure your HTML without breaking your structured data, generate it server-side independently of your templates, and read it as one coherent object rather than reverse-engineering it from attributes spread across a page.

The rule that gets sites penalised

Structured data must describe content that is actually visible on the page. Marking up a review rating that appears nowhere, or listing opening hours you don't display, violates Google's structured data guidelines and can trigger a manual action that removes your rich results entirely — sometimes site-wide.

This is the most common way well-intentioned SEO work backfires. The safe rule: if a user can't see it on the page, don't put it in the schema.

Testing and building up

Always validate before shipping. Google's Rich Results Test shows which rich result types your markup qualifies for, and the Schema Markup Validator at validator.schema.org catches syntax errors and unrecognised properties. Search Console then reports errors it finds across your live site.

Start small. A correct LocalBusiness or Organization block with name, URL, logo and address delivers most of the value. Once that's validating cleanly, layer on the types that fit your content — BreadcrumbList for navigation trails, Article for posts, Product or Event where they apply. Don't add FAQPage expecting a rich result: Google limited FAQ results to government and health sites in 2023 and stopped showing them altogether in 2026. Each type has required and recommended properties; missing a required one makes the item ineligible for its rich result, which is exactly what the validators are for.

Rendering JSON-LD safely in React and Next.js

Google can read JSON-LD that JavaScript adds to the page, because it renders pages before processing structured data. Server-rendering it is still the better default: rendering can lag behind crawling, Google warns that JavaScript-generated Product markup makes Shopping crawls less frequent and less reliable, and other consumers of your markup may not run JavaScript at all. In the Next.js App Router, a server component that outputs the script tag handles this for you.

The part most examples get wrong is escaping. JSON.stringify doesn't escape <, so if any value — a review, a product name, anything a user can edit — contains </script>, the browser ends the script element there and parses the rest as HTML. That is a stored XSS hole. Replacing every < with \u003c closes it: the JSON still parses to exactly the same data, but the closing tag can no longer appear in the markup.

// Server component: the JSON-LD is in the HTML the server sends
export function JsonLd({ data }) {
  // Escaping < means a "</script>" inside any value cannot close the tag
  const json = JSON.stringify(data).replace(/</g, '\\u003c');

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: json }}
    />
  );
}

// Usage, with data the page also displays:
// <JsonLd data={{
//   '@context': 'https://schema.org',
//   '@type': 'LocalBusiness',
//   name: business.name,
//   telephone: business.phone,
//   address: { '@type': 'PostalAddress', postalCode: business.postcode },
// }} />

This is the escaping the Next.js JSON-LD guide recommends. Build the object from the same data the page renders, so the markup can't drift from the visible content, and see Google's notes on generating structured data with JavaScript for testing injected markup with the Rich Results Test's URL mode.