Free JSON-LD SEO Schema Markup Generator by Netsurge

User Guide

A quick-start guide for building JSON-LD structured data with the JSON-LD SEO Schema Markup Generator by Netsurge.

On this page

1. What it is
2. Getting started
3. Building a schema
4. The three output tabs
5. Multiple schemas
6. Linking with @id
7. Importing existing markup
8. Theme toggle
9. Saving your work
10. Placing on your site
11. Common recipes
12. Troubleshooting
13. Quick reference

1. What it is

JSON-LD SEO Schema Markup Generator by Netsurge is a browser-based generator for schema.org structured data. You pick a schema type, fill in a form, and it emits valid JSON-LD you can paste into the <head> of any page.

What it does

• Builds JSON-LD for 22 schema types — Article, Product, Local Business, FAQ, and more
• Validates required fields and URL formats as you type
• Shows how your result could appear in Google search
• Copies or downloads the finished markup

2. Getting started

The tool loads with two schemas already in place — Local Business and WebSite — because almost every site needs those at least once. You can delete them and start fresh, or leave them and add more.

The interface is three columns:

Left	Middle	Right
Your schemas + Add schema	Form editor	Output (JSON-LD, Rich Result, Issues)

3. Building a schema

3.1 Pick a type

Find the type you want under Add schema on the left. Types are grouped into six categories:

Group	Types
Content	Article, Blog Posting, News Article, FAQ, How-To, Video
Commerce	Product, Software App, Book, Course
Local & Org	Local Business, Organization, Person, Service
Navigation & Site	Breadcrumbs, WebSite
Events & Jobs	Event, Job Posting, Review
Advanced	Custom JSON-LD (paste any raw markup)

Use the search box if you know the name. Click a type to add it. It appears in the Your schemas list and becomes the active form.

3.2 Fill in the fields

Every field has a placeholder showing an acceptable example. Grey text like Joe's Coffee or https://example.com/hero.jpg is the placeholder — it disappears the moment you start typing.

Fields are marked:

• Required required — the schema is invalid without this. Google will likely reject it.
• Recommended recommended — not strictly required, but omitting it reduces your chances of a rich result.

A few field types behave differently:

Type	What you do
Text / URL	Type a value. URLs are validated automatically.
Number	Digits only. Decimals allowed.
Date / Time	Pick from the browser’s native date picker.
Dropdown	Choose one option, or (none).
Checkbox	Tick to include the property in the output.
List	One entry per row. Click + Add item for more.
Repeatable group	Like an “Opening Hours” block. Click + Add to create another, ✕ to remove one.
Nested object	A collapsible sub-form. Example: the Author inside an Article.

3.3 Watch the Issues panel

The Issues tab on the right updates live. It shows three kinds of entry:

Icon	Meaning
⛔	Error — a required field is missing, a date is invalid, or the JSON is malformed. Fix before publishing.
⚠️	Warning — a URL doesn’t look right, a headline exceeds 110 characters, or a recommended field is empty. Consider fixing.
✅	All clear. No errors, no warnings.

Each issue shows the block it belongs to, the field’s path (e.g. Headline > Author > Name), and a short description.

3.4 Copy or download

When you’re happy with the output, use Copy JSON-LD or Download in the toolbar above the code panel.

If issues remain, the tool warns you first:

⚠️ Your schema has 2 errors and 1 warning.
Google may not render a rich result until these are fixed.
Copy anyway?

• Click Cancel and the tool jumps to the Issues tab so you can see what’s wrong.
• Click OK to proceed despite the warnings.

Download produces a .txt file called schema-json-ld.txt — plain text, ready to open in any editor.

4. The three output tabs

JSON-LD

The live output. Syntax-highlighted, updates as you type.

• Wrap in <script> toggle — when on, the output is prefixed and suffixed with <script type="application/ld+json"> and </script>, ready to paste directly into HTML. When off, you get raw JSON only.
• Char count — how many characters the output contains. Handy for keeping an eye on page weight.
• Download and Copy buttons, as above.

Rich Result

An approximation of how the schema might appear in Google search. Shows the title, URL, description, star ratings, price, event dates, FAQ accordions, and other visual elements depending on the type.

⚠️ This is a preview only — Google’s actual rendering depends on their live eligibility rules and isn’t guaranteed.

Issues

The live validation panel. See section 3.3 above.

5. Working with multiple schemas

The tool can hold any number of schemas at once. This matters because most pages need more than one type — a blog post is usually Article + BreadcrumbList, a product page is often Product + Organization, and so on.

When you have more than one, the output combines them into a single @graph:

{
  "@context": "https://schema.org",
  "@graph": [
    { "@type": "Article", … },
    { "@type": "BreadcrumbList", … }
  ]
}

That’s the correct format for multiple nodes on one page. You only get a single flat object if you have exactly one schema.

To switch between schemas, click any entry in the Your schemas list. To remove one, hover it and click the small ✕.

6. Linking nodes together with @id

If you want to reference one node from another — for example, an Article that points at an Organization publisher defined elsewhere — use the @id field.

Every type has an optional @id field under Advanced properties. Give each node a unique URL-like identifier:

https://example.com/#organization
https://example.com/blog/sourdough#article

Then reference the same @id from other nodes’ nested objects. Google will resolve them into a single graph.

For single-node schemas on a single page, you can usually skip @id entirely.

7. Importing existing JSON-LD

Click Import in the sidebar to paste existing markup. The tool will:

• Detect each node’s @type
• Map it to the matching form and populate the fields
• Keep any unrecognised nodes as a Custom JSON-LD block so nothing is lost

This is useful for migrating from another SEO plugin, auditing existing markup on a live page, or reusing schemas from elsewhere without retyping.

8. Theme toggle

The ☀️/🌙 switch between Import and Clear in the sidebar toggles between light and dark mode. Your preference is saved and restored next time you visit. The default is light mode.

9. Saving your work

Everything you type is saved automatically to your browser’s local storage as you go. If you close the tab and come back later, your schemas will still be there.

⛔ This is per-browser and per-device. It is not synced. Opening the tool on a different computer, in a different browser, or in private/incognito mode will start fresh.

To move a schema between devices, use Copy or Download and paste the output into a text file you keep somewhere else.

The Clear button wipes all schemas from the current browser after a confirmation prompt.

10. Placing the output on your site

Once you have your JSON-LD:

1. Copy it (with Wrap in <script> toggled on).
2. Paste it into the <head> of the page you’re describing.
3. Or add it via your theme’s Custom HTML block, a tag-manager snippet, or your SEO plugin’s “Custom Schema” field.

A few important cautions

• Watch for duplicates. If Yoast, Rank Math, AIOSEO, or your theme already emits Organization, WebSite, or BreadcrumbList, adding another causes conflicts. Google will often ignore both. Either disable the plugin’s version on that page, or use the plugin’s own custom schema field instead.
• Validate before publishing. While the tool validates the schema it generates, it is usually a good practice to run the finished markup through Google’s Rich Results Test and the Schema Markup Validator.
• Test on staging first on production sites with meaningful traffic.
• Seek help. We understand that this can be a bit too technical or overwhelming for you. Do not hesitate to seek professional help from the Netsurge team. We are always there for you!

11. Common recipes

A blog post

1. Add Article (or Blog Posting for typical blog URLs).
2. Fill in Headline, Description, Image, Author, Publisher, Date Published, and Page URL.
3. Add BreadcrumbList with 2–4 items showing the trail to the page.
4. Copy the combined output and paste into the page’s <head>.

A product page

1. Add Product.
2. Fill in Name, Description, Image, SKU, Brand, and Offer (price, currency, availability, URL).
3. If you have reviews, add an Aggregate Rating with the average and review count.
4. Add Organization for the publishing company, and link it via the product’s Brand or publisher field if you want.
5. Copy and paste.

A local business homepage

1. The Local Business form is already loaded.
2. Fill in Name, Description, Address, Phone, Website, Price Range, and Opening Hours.
3. Add WebSite for the site name and sitelinks search box.
4. If the business is also a brand, add Organization and use the same @id across both so Google treats them as one entity.

An FAQ page

1. Add FAQ Page.
2. Click + Add Question for each Q&A pair.
3. Fill in the Question and the accepted Answer text.
4. Aim for at least 3 questions — Google tends to ignore single-question FAQ markup.

12. Troubleshooting

Symptom	Likely cause & fix
The tool loads but nothing happens when I click.	JavaScript may be blocked on the page. Check the browser console (F12 → Console) for errors, or try a different browser.
My schemas disappeared.	Local storage was cleared — usually because you’re in private browsing, cleared browser data, or switched devices. The tool’s data lives only in the browser you used.
The Issues panel shows a warning I don’t understand.	Hover the entry for the full message and the field path. Most warnings are one of: URL not starting with http://, https://, /, or #; or a date that can’t be parsed.
I have duplicate Organization nodes.	Your SEO plugin is probably emitting one too. Turn off the plugin’s schema on that page, or remove yours and let the plugin handle it.
The rich result preview doesn’t match what I see in Google.	The preview is an approximation. Google’s real rendering depends on their live eligibility rules and can differ.
The output uses @graph instead of a single object.	That’s correct — you have more than one schema type active. To get a single object, delete all but one.

13. Quick reference

Action	Where
Add a schema	Left sidebar → Add schema
Switch active schema	Left sidebar → Your schemas list
Delete a schema	Hover a block → ✕
Copy JSON-LD	JSON-LD tab → Copy JSON-LD
Download as .txt	JSON-LD tab → Download
Wrap output in <script>	JSON-LD tab → Wrap in <script> toggle
Check for problems	Issues tab
See rich-result preview	Rich Result tab
Paste existing markup	Sidebar → Import
Wipe everything	Sidebar → Clear
Light / dark mode	Sidebar → ☀️/🌙 switch

---

For questions or feature requests, contact the Netsurge team.