Structured data: JSON-LD in HTML for real AI SEO
Every part so far has been about HTML that a browser renders visually. JSON-LD structured data is different — it's real, machine-readable metadata embedded in the page specifically for search engines and AI systems to read, invisible to a visitor entirely. This is the single most direct AI-SEO technique this series covers.
Adding JSON-LD to the page
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Bright Leaf Coffee",
"url": "https://brightleafcoffee.com",
"logo": "https://brightleafcoffee.com/images/logo.svg",
"sameAs": [
"https://www.instagram.com/brightleafcoffee",
"https://www.facebook.com/brightleafcoffee"
]
}
</script>This goes inside <head> (or anywhere in <body> — placement doesn't affect how it's read), as a <script> tag with type="application/ld+json", containing real, valid JSON describing the page using schema.org's standardized vocabulary — the exact same underlying approach the SEO series' own structured data guidance covers from a strategy angle; this part covers writing it correctly by hand.
A real Product schema for a subscription page
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Gift Subscription",
"description": "One 12oz bag a month, with a handwritten note on the first shipment.",
"image": "https://brightleafcoffee.com/images/gift-box.jpg",
"offers": {
"@type": "Offer",
"price": "18.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
}
</script>This is exactly what lets a search result show a real, rich price and availability snippet directly in results, rather than a plain blue link — genuine, visible real estate in a search result that a page without structured data simply doesn't get access to, regardless of how well it ranks otherwise.
Why this matters more, not less, for AI answer engines
A traditional search crawler: reads the page's visible text and
structure to determine relevance and ranking
An AI answer engine (an AI Overview, a chatbot citing a source):
needs to extract a specific, correct fact from a page quickly —
a price, an availability status, an organization's real identityPlain prose text requires real inference to extract a specific fact reliably — a paragraph mentioning "$18 a month" requires the reading system to correctly parse that as the Gift Subscription's price, not some unrelated number on the page. JSON-LD removes that ambiguity entirely: "price": "18.00" inside a Product schema is an explicit, structured, unambiguous fact, not something extracted through inference — exactly the property that makes it disproportionately valuable for AI systems, covered directly in the SEO series' own AI-SEO and answer engines guidance.
BreadcrumbList: real navigation structure, machine-readable
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://brightleafcoffee.com/" },
{ "@type": "ListItem", "position": 2, "name": "Subscriptions", "item": "https://brightleafcoffee.com/subscriptions" },
{ "@type": "ListItem", "position": 3, "name": "Gift Subscription", "item": "https://brightleafcoffee.com/subscriptions/gift" }
]
}
</script>This is the exact same real pattern this tutorial series' own pages use for their own breadcrumb structured data — a machine-readable version of the visual breadcrumb trail, letting a search result show the real page hierarchy directly instead of just a raw URL.
Writing JSON-LD that describes something the visible page doesn't actually say — a price, availability status, or review rating that isn't genuinely present and accurate on the rendered page. Search engines can and do detect this mismatch, and it's treated as a real, deliberate violation of structured data guidelines, not a harmless shortcut — structured data should always be a faithful, machine-readable mirror of real, visible page content, never a way to claim something the page itself doesn't actually show.
Validating real structured data before it ships
Structured data with a small JSON syntax error (a missing comma, an unclosed brace) fails silently — the page still renders completely normally, since the <script> tag's content isn't parsed as visible HTML at all, which means a real, broken JSON-LD block can sit unnoticed on a live page indefinitely. Google's Rich Results Test and the schema.org validator are the real, practical way to confirm a structured data block actually parses and matches a recognized schema type before treating it as done.
Next: accessibility fundamentals — bringing together everything touched on alt text, labels, and semantic structure into one real, complete accessibility pass.