How to add schema markup without breaking the site

Schema markup is a block of structured data, usually JSON-LD, that tells a machine what the page represents without changing what the user sees. You add it with a script in the document and validate it before deployment.

The format: JSON-LD

Google documents three syntaxes, JSON-LD, microdata and RDFa, and recommends JSON-LD. The block lives in a <script type="application/ld+json"> and must not be nested inside another script. The vocabulary is schema.org, licensed CC BY-SA 3.0; the Google Search Central documentation, proprietary but free to read, lists the types that produce a rich result.

The minimum block

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article headline",
  "datePublished": "2026-11-01",
  "dateModified": "2026-11-01",
  "author": {
    "@type": "Person",
    "name": "Enea Zani",
    "url": "https://eneawork.it"
  }
}

Where to put it in Next.js

In a server component, render the script with dangerouslySetInnerHTML and serialise the object with JSON.stringify. Replace every < with \u003c: without that replacement a string containing </script> closes the block and breaks the page. The next/script component is not needed, because JSON-LD is data to read in the initial document, not code to load.

How to check it before deployment

cat > check-jsonld.mjs ]*application\/ld\+json[^>]*>([\s\S]*?)/g)];
for (const [i, block] of blocks.entries()) {
  JSON.parse(block[1]);
  console.log(`JSON-LD ${i}: valid`);
}
console.log(`${blocks.length} blocks parsed`);
EOF
curl -s https://ui.eneawork.it/ > page.html
node check-jsonld.mjs page.html

The script reads the HTML file, extracts every application/ld+json block and calls JSON.parse. A syntax error appears with the block number; a valid block does not guarantee Google will use it, but an invalid block guarantees it will not. For rich results, use the Rich Results Test and the Schema Markup Validator, both free.

What Google actually uses

Google does not use every schema.org type. Rich results cover a documented subset, for example Article, BreadcrumbList, Product, Event and Recipe. Since August 2023 FAQ rich results are limited to authoritative government and health sites; since September 2023 HowTo rich results have been removed. Adding FAQPage to a blog no longer produces expandable questions in the SERP, even though the markup still helps describe the entity.

The EneUI catalogue

For a product page or an FAQ, the catalogue offers real records: Kokonut UI FAQ, MIT licence, and the FAQ category inside the 1,556 blocks in the catalogue. An accordion does not generate FAQPage on its own: you add the markup by reading the visible questions, and it must match the text on the page. Checked on 1 November 2026.

The limitation

Schema markup describes; it does not guarantee. Google can ignore an unsupported type, limit a rich result or apply a manual action when the markup contradicts visible content; no validator sees that difference, because the comparison is semantic and a person makes it.

Where to continue

The sequence for getting indexed is in getting a site indexed by Google; where metadata belongs in the App Router is in Next.js App Router structure. If the site runs on WordPress or on React components, the comparison is in WordPress, Wix or React components.