Guides / json-ld structured data

Comment ajouter des données structurées JSON-LD

Les données structurées JSON-LD aident les agents IA à comprendre votre produit, vos tarifs et votre organisation. Voici comment les ajouter.

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.

Vérifiez votre score

Après avoir implémenté ceci, scannez votre domaine pour vérifier que la vérification passe et voir comment votre score change.

Scanner votre domaine