Introduction
Have you seen search results that show a product's price, stock, or star rating?
Or ones with a breadcrumb like "Home > Category > Product" above the title?
Those rich displays only become possible by handing something called structured data to search engines. In this article, I'll explain how, on an EC site for motorcycle gear, I output product and breadcrumb structured data in JSON-LD format.
What Structured Data Is
Telling Search Engines the "Meaning"
Ordinary HTML is written to be read by humans. If there's a number like "4980," a machine can't tell whether it's a price or a model number. Structured data resolves this ambiguity by explicitly marking, in a machine-readable form, "this is a price" or "this is stock status."
Hand this over, and search engines accurately understand the page's content and reflect it richly in search results. In headless EC, this part that the theme used to output disappears, so you need to provide it yourself.
The JSON-LD Notation
There are several notations for structured data, but I chose JSON-LD. Separated from the HTML body, it can be written as a <script type="application/ld+json"> block, so it doesn't clutter your visible markup.
Embedded directly in HTML tag attributes. Markup tends to get complex
Written in a script block separate from the body. Easier to manage
Because it's handled independently from the visual HTML, you can implement it as a single JSON-LD layer over the body you generated with SSR.
Product Structured Data
The Main Properties to Output
Product pages get structured data representing the product (Product). Including price, stock status, product name, and image here makes prices and stock more likely to appear in search results.
These are assembled from the product data fetched via SSR, so the structured data naturally matches what's displayed.
Keeping It Consistent with the Display
Match Structured Data to the Display
If the price or stock in your structured data diverges from what's actually shown on the page, you risk a penalty from search engines. By assembling both from the same data source fetched via SSR, I prevent this mismatch.
Breadcrumb Structured Data
Conveying Hierarchy with BreadcrumbList
A breadcrumb list is navigation showing where a page sits in the site's hierarchy. Output as structured data (BreadcrumbList), the hierarchy can appear near the title in search results, helping users grasp the site structure.
The server determines which category the current page sits under
Order items as Home → Category → Product
Give each item a name and URL in BreadcrumbList format
Output as a script block via SSR
Consistency with the Internal Link Structure
It's important that breadcrumb structured data matches the actual internal link structure. If you generate the SSR-rendered breadcrumb links and the JSON-LD hierarchy from the same logic, the path users follow and the hierarchy crawlers read line up exactly. This consistency stabilizes evaluation across the whole site.
Conclusion
JSON-LD structured data is a "meaning-assigning" mechanism for surfacing rich information — price, stock, hierarchy — in search results. Assemble Product for items and BreadcrumbList for hierarchy from the same data fetched via SSR. Matching the display and the structured data was the single biggest point for maintaining trust.
Structured data layers meaning on top of the information you made visible with SSR. If you haven't read them yet, check out the foundational "Supplementing Crawler-Visible Content with SSR" and the big-picture "SEO Design for Headless EC" as well.