Hello, I'm Maneshwar. I'm building git-lrc, an AI code reviewer that runs on every commit. It is free, unlimited, and source-available on Github. Star Us to help devs discover the project. Do give it a try and share your feedback for improving the product.
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.
*AI agents write code fast. They also silently remove logic, change behavior, and introduce bugs -- without telling you. You often find out in production.
git-lrc fixes this. It hooks into git commit and reviews every diff before it lands. 60-second setup. Completely free.*
Any feedback or contributors are welcome! It's online, source-available, and ready for anyone to use.
⭐ Star it on GitHub:
HexmosTech
/
git-lrc
Free, Unlimited AI Code Reviews That Run on Commit
git-lrc
Free, Unlimited AI Code Reviews That Run on Commit
AI agents write code fast. They also silently remove logic, change behavior, and introduce bugs -- without telling you. You often find out in production.
git-lrc fixes this. It hooks into git commit and reviews every diff before it lands. 60-second setup. Completely free.
See It In Action
See git-lrc catch serious security issues such as leaked credentials, expensive cloud operations, and sensitive material in log statements
git-lrc-intro-60s.mp4
Why
- 🤖 AI agents silently break things. Code removed. Logic changed. Edge cases gone. You won't notice until production.
- 🔍 Catch it before it ships. AI-powered inline comments show you exactly what changed and what looks wrong.
- 🔁 Build a habit, ship better code. Regular review → fewer bugs → more robust code → better results in your team.
- 🔗 Why git? Git is universal. Every editor, every IDE, every AI…
Top comments (0)