Hello, I'm Maneshwar. I'm working on FreeDevTools online currently building **one place for all dev tools, cheat codes, and TLDRs* — a free, open-source hub where developers can quickly find and use tools without any hassle of searching all over the internet.
When you’re building a free devtools website or an SVG icon library, one of the most powerful ways to improve your visibility in Google Search is through structured data.
Structured data helps search engines understand what your pages are about — not just the text but the meaning.
And the most popular way to provide structured data today is JSON-LD (JavaScript Object Notation for Linked Data).
In this article, we’ll look at:
- What JSON-LD is and why it’s useful for SEO.
- How to generate JSON-LD for each page on your site.
- How to automate JSON-LD using
jsonld.js. - How to integrate JSON-LD into modern JavaScript frameworks.
What is JSON-LD and Why Does it Matter?
JSON-LD is a way of embedding structured data in your web pages using JSON. It’s endorsed by Google and supported by all major search engines.
For SEO, JSON-LD brings big benefits:
- Better search appearance: Rich snippets, thumbnails, FAQs, breadcrumbs.
- Clarity: Explicitly tells Google what’s on your page (icon, tool, app, etc.).
- Automation: Easier to generate dynamically compared to inline microdata.
- Scalability: Perfect for websites with thousands of pages (like devtools or icons).
For example, a simple JSON-LD script for an icon page might look like this:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ImageObject",
"name": "Hat SVG Icon",
"description": "Download a free hat SVG icon in multiple styles and formats.",
"contentUrl": "https://example.com/svg/hat.svg",
"thumbnailUrl": "https://example.com/images/hat-icon.png",
"license": "https://example.com/license"
}
</script>
This snippet tells Google that your page is not just a webpage, but specifically an image resource with a clear name, description, and download link.
Automating JSON-LD with jsonld.js
If you’re running a site with hundreds or thousands of pages, you don’t want to handwrite JSON-LD for each one. That’s where jsonld.js comes in.
jsonld.js is a JavaScript library for working with JSON-LD data. It helps you:
- Compact → Simplify long schema URLs into short keys.
- Expand → Expand data back into full schema form.
- Flatten → Normalize nested structures.
- Frame → Output data in a consistent tree structure.
- Canonize → Normalize documents for deduplication.
Example: Compacting Metadata into JSON-LD
const jsonld = require('jsonld');
const doc = {
"http://schema.org/name": "Hat SVG Icon",
"http://schema.org/description": "A free, downloadable SVG icon of a hat.",
"http://schema.org/image": {"@id": "https://example.com/images/hat-icon.png"},
"http://schema.org/contentUrl": {"@id": "https://example.com/svg/hat.svg"}
};
const context = {
"name": "http://schema.org/name",
"description": "http://schema.org/description",
"image": {"@id": "http://schema.org/image", "@type": "@id"},
"contentUrl": {"@id": "http://schema.org/contentUrl", "@type": "@id"}
};
(async () => {
const compacted = await jsonld.compact(doc, context);
console.log(JSON.stringify(compacted, null, 2));
})();
Output:
{
"@context": {...},
"name": "Hat SVG Icon",
"description": "A free, downloadable SVG icon of a hat.",
"image": "https://example.com/images/hat-icon.png",
"contentUrl": "https://example.com/svg/hat.svg"
}
Now you can drop this directly into a <script type="application/ld+json"> tag.
Using JSON-LD in JavaScript Frameworks
Different frameworks have different ways to inject JSON-LD into the <head> of your page. Here are some patterns you can use:
React / Next.js
Use the built-in <Head> component:
import Head from "next/head";
export default function IconPage({ icon }) {
const jsonLd = {
"@context": "https://schema.org",
"@type": "ImageObject",
"name": icon.title,
"description": icon.description,
"image": icon.image,
"contentUrl": icon.url
};
return (
<>
<Head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
</Head>
<h1>{icon.title}</h1>
</>
);
}
Vue / Nuxt
In Nuxt, you can inject structured data with the head() property:
export default {
head() {
return {
script: [
{
type: "application/ld+json",
innerHTML: JSON.stringify({
"@context": "https://schema.org",
"@type": "ImageObject",
name: "Hat SVG Icon",
description: "Download a free hat SVG icon.",
contentUrl: "https://example.com/svg/hat.svg"
})
}
],
__dangerouslyDisableSanitizers: ["script"]
};
}
};
Astro
In Astro, you can generate schema at build time directly in the page template:
---
const { icon } = Astro.props;
const jsonLd = {
"@context": "https://schema.org",
"@type": "ImageObject",
name: icon.title,
description: "icon.description,"
image: icon.image,
contentUrl: icon.url
};
---
<html>
<head>
<script type="application/ld+json">
{JSON.stringify(jsonLd)}
</script>
</head>
<body>
<h1>{icon.title}</h1>
</body>
</html>
Which Schema Types Should You Use?
For an icon website:
-
ImageObject→ for individual icons. -
CollectionPage→ for icon categories (e.g., “Animal Icons”).
For tools:
-
SoftwareApplication→ for devtools like “JSON Formatter”. -
FAQPage→ if you add FAQ sections.
For navigation:
-
BreadcrumbList→ helps Google show breadcrumb navigation in results.
Benefits Recap
- ✅ Clearer meaning to search engines → better indexing.
- ✅ Richer appearance in search results → higher click-through rates.
- ✅ Scalable automation → one JSON context, thousands of pages.
- ✅ Flexible integration → works in React, Vue, Astro, or plain HTML.
Final Thoughts
If you’re serious about SEO for a large free devtools or icon website, structured data is non-negotiable.
With JSON-LD and tools like jsonld.js, you can automate schema generation, keep it consistent, and integrate it seamlessly with your chosen JavaScript framework.
The result? A site that’s not just useful for users, but also perfectly understandable for search engines.
I’ve been building for FreeDevTools.
A collection of UI/UX-focused tools crafted to simplify workflows, save time, and reduce friction in searching tools/materials.
Any feedback or contributors are welcome!
It’s online, open-source, and ready for anyone to use.
👉 Check it out: FreeDevTools
⭐ Star it on GitHub: freedevtools
Let’s make it even better together.
Top comments (0)