Guides / json-ld structured data

How to add JSON-LD structured data

JSON-LD structured data helps AI agents understand your product, pricing, and organization. Here is how to add it.

What is JSON-LD?

JSON-LD (JavaScript Object Notation for Linked Data) is structured data embedded in your HTML that tells machines what your page is about. AI agents use it to understand your product type, pricing, organization details, and API availability.
Search engines have used JSON-LD for years (it powers rich results in Google). Now AI agents use the same data to evaluate and compare tools.

Product/WebApplication schema

Add this to your homepage <head> to describe your product:

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Your Product",
  "description": "What your product does.",
  "url": "https://your-domain.com",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Web",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD",
    "description": "Free tier with 1,000 API calls/month"
  },
  "provider": {
    "@type": "Organization",
    "name": "Your Company",
    "url": "https://your-domain.com"
  }
}
</script>

Pricing schema (on your pricing page)

Add Offer schemas to your pricing page so agents can evaluate cost:

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Your Product",
  "offers": [
    {
      "@type": "Offer",
      "name": "Free",
      "price": "0",
      "priceCurrency": "USD",
      "description": "1,000 API calls/month"
    },
    {
      "@type": "Offer",
      "name": "Pro",
      "price": "49",
      "priceCurrency": "USD",
      "billingIncrement": "Monthly",
      "description": "50,000 API calls/month"
    }
  ]
}
</script>

Implementation

In Next.js, add JSON-LD to your page metadata:
`tsx
export default function Page() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {/* page content */}
    </>
  )
}
`
In other frameworks, add the <script type="application/ld+json"> tag to the <head> or <body> of your page.

Validate

Use Google's Rich Results Test (search.google.com/test/rich-results) to validate your markup
Check that the JSON parses correctly — no trailing commas, proper escaping
Run a Serge scan to confirm the checks pass
The scanner looks for Organization, Product, WebApplication, or SoftwareApplication types on your homepage, and Offer types on your pricing page.

Check your score

After implementing this, scan your domain to verify the check passes and see how your score changes.

Scan your domain