Skip to main content
DevStackKit
All tools

Schema Markup Generator

Create JSON-LD structured data for Article, Product, FAQ, Event, Recipe and more. Fields are checked and items combine in one @graph.

Article

JSON-LD

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article"
}
</script>

Field lists follow https://developers.google.com/search/docs/appearance/structured-data/article (checked 2026-10-11). Test the page with Google's Rich Results Test before you publish.

Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)

Next steps

Done here? Use the Send to… menu on the result to carry it on to JSON Beautifier or JSON Schema Validator.

Free Schema Markup (JSON-LD) Generator

Fill in a short form and get the structured data that helps Google understand your page. Required and recommended fields are marked and checked. It gives developers a quick browser-based way to solve a focused schema markup generator task before moving the result into a project.

How to create schema markup

Choose a type, fill in the fields and copy the result. To describe a page with several things, press Add to graph, then fill in the next type.

Common mistakes

  • Marking up things the visitor cannot see on the page: structured data must match what is shown.
  • Leaving a required field empty: the page will not be eligible for the rich result.

Frequently asked questions

How do I add schema markup to a website?
Fill in the form, copy the script block and paste it into the head or body of the page it describes. Then test the page with Google's Rich Results Test.
What is JSON-LD?
JSON-LD is a block of data in a script tag that tells search engines what a page is about. It does not change how the page looks.
Does markup guarantee rich results?
No. It makes a page eligible. Google decides whether to show a rich result. FAQ and How-to rich results are limited to a few kinds of sites today, but the markup is still valid.
What is @graph?
A @graph holds several items, such as an Organization and a WebSite, in one script block with one @context.
Is my data uploaded?
No. Everything is built in your browser.
How do I use this schema markup generator tool?
Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.

More Frontend & Design

User-Agent ParserSee which browser and device a visitor usesSVG OptimizerMake SVG images smallerColor ConverterConvert colours between HEX, RGB and HSLColor Blindness SimulatorSee how colour-blind people see your designCSS Effects GeneratorCreate gradients and shadows visuallyMeta Tag / Open Graph PreviewPreview how your page looks on Google and socialImage Resizer / CropperResize photos, including passport sizeBase64 Image ConverterTurn an image into text code, and back

View all Frontend & Design tools →