Bookmarks for Devs

JSON-LD schema generator and validator

Build valid JSON-LD structured data for Article, FAQPage, Product, Organization and BreadcrumbList from a form, or paste existing markup to have it pretty-printed and checked for the mistakes that stop a rich result appearing. Free, runs in your browser.

Free · no sign-up · runs in your browser

Copy the markup

Script tag

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How we pick the tools on this list",
  "author": {
    "@type": "Person",
    "name": "Tugrul Works"
  },
  "datePublished": "2026-09-03"
}
</script>

Object only

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How we pick the tools on this list",
  "author": {
    "@type": "Person",
    "name": "Tugrul Works"
  },
  "datePublished": "2026-09-03"
}

Structured data is how a page tells a search engine what it is rather than what it says, and it is unusually easy to get almost right: an author written as a plain string instead of a Person object, a price outside its Offer, a missing @context. Any of those and the rich result silently does not appear. This builds the block from a form so the nesting is correct by construction, and will check markup you already have.

How it works

  1. 01Pick a type. Each one shows only the properties that matter for it, with the required ones marked.
  2. 02Properties that schema.org expects as nested objects are built as nested objects: an author becomes a Person, a brand becomes a Brand, a logo becomes an ImageObject, and a price becomes an Offer with its currency. Writing those as plain strings is the most common reason a valid-looking block produces no rich result.
  3. 03FAQ and breadcrumb entries are rows rather than fields, because they are lists whose length you choose. Breadcrumb positions are numbered for you, starting at 1 — a list numbered from 0 is silently ignored.
  4. 04Empty fields are omitted rather than emitted as empty strings, which is what a validator expects.
  5. 05The output is a complete script tag ready to paste into your head, plus the bare object if you would rather embed it another way.
  6. 06Switch to validate mode to paste markup you already have: it is pretty-printed, and checked for parsing, a context, a type, and the required properties of the types this tool knows.

Use cases

  • Adding Article markup to a blog post so it is eligible for a rich result.
  • Marking up an FAQ block so the questions can appear directly under your search listing.
  • Giving a product page the Offer markup that price and availability display depend on.
  • Publishing Organization markup with the sameAs profile links that help disambiguate a brand.
  • Generating BreadcrumbList markup so the results page shows a path instead of a bare URL.
  • Checking JSON-LD that a CMS or an AI wrote before it goes live.

Frequently asked questions

What is JSON-LD and why use it over microdata?

JSON-LD is structured data written as a JSON block in a script tag, rather than as attributes sprinkled through your HTML. Google recommends it explicitly, and the practical reason is separation: it does not entangle your markup with your metadata, so a redesign cannot silently break it and a template can emit it in one place.

Why is my valid JSON-LD not showing a rich result?

Valid JSON and valid structured data are different things. The usual causes are a required property missing, a property that should be a nested typed object written as a plain string (author, brand, offers), or markup that describes something not actually visible on the page — which is a guideline violation, not a syntax error. This tool catches the first two. Eligibility is never a guarantee: Google decides whether to show a rich result.

Where should the script tag go?

Either head or body works; head is conventional. What matters more is that it is in the server-rendered HTML. Structured data injected by client-side JavaScript after load is often missed, so emit it with the page rather than from an effect.

Can I put more than one type on a page?

Yes, and it is normal — an article page might carry Article, BreadcrumbList and Organization. Use several script tags, or one with an @graph array. Generate them one at a time here and paste them together.

Does the author have to be a Person object?

Yes. schema.org defines author as a Person or Organization, and a bare string is the single most common mistake in hand-written markup — it parses, it validates as JSON, and it produces nothing. The generator always nests it correctly.

Does this replace Google's Rich Results Test?

No, and it does not try to. This catches the structural mistakes that stop a block working at all — unparseable JSON, no context, no type, missing required properties. Google's tester is the one that tells you whether a specific page is eligible for a specific rich result, and it should still be the last step before you ship.

Related resources

Related reading

More tools

Tailwind CSS color palette generator

Open →

Turn one hex code into a full Tailwind color scale — 11 OKLCH-tuned shades from 50 to 950, with contrast ratios, ready to paste into Tailwind v4's @theme block or a v3 config. Free, no sign-up, runs in your browser.

CSS clamp() calculator for fluid typography

Open →

Generate a responsive CSS clamp() font size from a minimum and maximum size and the viewport range they should grow across — with the slope and intercept shown, a live preview, and the rendered size at every common screen width. Free, no sign-up.

SVG to JSX converter for React components

Open →

Paste an SVG and get a React component back — attributes camelCased, class turned into className, style strings converted to objects, xmlns removed, with optional currentColor, a size prop and TypeScript output. Runs entirely in your browser; nothing is uploaded.

Meta tag generator with Google SERP preview

Open →

Fill in a title, description, canonical and Open Graph image and get the complete <head> snippet — with a live Google result preview that measures your title and description in pixels, not characters, so you can see exactly where they will be cut.

Favicon generator — .ico, PNG set and manifest

Open →

Turn a PNG or SVG, or just a couple of letters, into the full favicon set: 16, 32, 48, 180, 192 and 512 PNGs, a real multi-size favicon.ico, a web app manifest and the <head> tags. Everything runs in your browser — nothing is uploaded.

robots.txt generator with validation

Open →

Build a robots.txt from user-agent groups, allow and disallow rules, crawl-delay and sitemap URLs — with presets for allowing everything, blocking AI crawlers, or locking down a staging site, and warnings for the mistakes that quietly block your whole site.

UTM link builder and campaign URL generator

Open →

Build correctly encoded UTM tracking links from a URL and your source, medium and campaign — with the existing query string and fragment preserved, values properly percent-encoded, and warnings for the capitalisation and spacing that split one campaign across several rows in an analytics report.

Colour contrast checker with WCAG suggestions

Open →

Check any two colours against WCAG 2 — normal text, large text and UI components — see the ratio and live samples, and get the nearest passing colour when a pair fails, adjusted in OKLCH so the hue stays yours. Free, runs in your browser.

Image converter — WebP, AVIF, JPEG and PNG

Open →

Convert and resize images to WebP, AVIF, JPEG or PNG at the quality you choose, see exactly how many bytes each one saved, and download them one at a time or as a zip. Everything happens in your browser — no image is uploaded.

JSON formatter and validator — free, in your browser

Open →

Format, minify and validate JSON in your browser. Broken documents get the exact line and column of the error. Nothing is uploaded, and there is no size limit but your machine.

JSON to TypeScript — generate interfaces from a payload

Open →

Paste a JSON payload and get TypeScript interfaces: merged array shapes, optional properties, and real unions instead of any. Runs in your browser — nothing is uploaded.

OG image generator — free 1200×630 social cards

Open →

Generate an Open Graph image for any page: type a title, pick a theme, download a 1200×630 PNG. Runs entirely in your browser — no account, no upload, no watermark.