How to add structured data (LD+JSON) schema to your pages
This demo showcases how schema.org structured data is added to every page on the site — enabling Google Search to generate rich results for articles, events, FAQ pages, and more. Two approaches are demonstrated: schema included in the page, and schema assembled automatically during page decoration based on page content and blocks.
Why This Matters
The challenge: Search engines can read the text on a page, but they can't reliably infer what type of content it represents — whether it's an article, an upcoming event, or a Q&A page. Without that signal, pages compete for generic search rankings and miss eligibility for Google's rich results.
The solution: Schema.org structured data in LD+JSON format tells search engines exactly what a page is and what it contains. Google uses this to surface rich results — event cards with dates and locations, article bylines, FAQ panels — directly in search results, before a user even clicks through.
Why structured data matters for your site:
- Rich results in Google Search — event cards, article metadata, and FAQ panels appear directly in search results, increasing visibility and click-through rates.
- Zero authoring overhead — schema is assembled automatically from metadata authors already provide (title, description, date, location). No extra work required.
- Full coverage across page types — every page type gets appropriate schema out of the box: Organization, Article, Event, FAQPage, and WebPage.
- Composable by design — blocks can enrich any schema at decoration time, whether it was included in the page or assembled automatically.
Real-world use cases:
- Upcoming events surfacing in Google Search with date, time, and location — without any additional authoring
- Articles appearing with author name and publication date in search snippets
- FAQ content expanding inline in search results, reducing zero-click searches
- Organization schema on the homepage supporting Google's knowledge panel for the brand
Demo
This demo highlights both approaches — schema included in the page on event pages, and schema assembled during decoration on article and FAQ pages.
- Open an event page: https://demo.bbird.live/events/career-spotlight-panel
- View page source (Ctrl+U / Cmd+U) — find
<script type="application/ld+json">in the<head>with a complete Event schema already present, including name, startDate, location, and address. This schema is part of the page itself — included via thejson-ldmetadata property, populated from the event data (title, description, occurrenceDate, location, address). - Open an article page: https://demo.bbird.live/learn/fire/fire-flavours
- Open DevTools → Elements — find the
<script type="application/ld+json">assembled by schema.js during page decoration, containing an Article schema built from the page's existing metadata: title, description, author, date, og:image, and keywords. - Validate either page at https://search.google.com/test/rich-results — show rich result eligibility for the detected schema type.
How it works
- schema.js runs on every page during eager load. On init it hydrates any existing LD+JSON from the DOM into an in-memory graph — so schema included in the page can still be extended during decoration by blocks.
- The in-memory graph is serialized to a single consolidated
<script type="application/ld+json">element. If an existing element was hydrated, it is updated in place — no duplicates. - Page type is detected automatically from existing metadata:
template: article→ Article schema;keywordsincluding events → Event schema; FAQ block present → FAQPage upgrade. No author configuration required. - The FAQ block calls
extendSchema('WebPage', { '@type': 'FAQPage', mainEntity: [...] })to upgrade the schema and add each Q&A pair as aQuestionentity, enabling Google's FAQ rich results. - Any block or script can extend the page schema by calling
addSchema()(new type) orextendSchema()(merge into existing type) — for example, addingoffersorperformerto an Event.
Key Points
- Zero configuration for authors — schema types are detected and assembled automatically based on existing page metadata and blocks.
- Two complementary approaches: schema included in the page (via the
json-ldmetadata property or BYOM template) and schema assembled during decoration (schema.js) — both produce a single valid@graphLD+JSON block. - Schema types covered out of the box: Organization (homepage), Article (article template), FAQPage (any page with FAQ block), Event (event pages), WebPage (all other pages).
- The hydration model means both approaches are composable — a block can always enrich page-included schema during decoration without knowing how it was created.