Structured Data with JSON-LD
Describe your content to search engines so it can earn rich results.
Structured data is machine-readable description of what a page is — a recipe, a product, an event, an article. Provide it and search engines can render rich results: star ratings, prices, cook times, FAQ dropdowns right in the results page.
Why JSON-LD wins
There are a few formats, but JSON-LD is the one Google recommends and the one seniors reach for. Instead of sprinkling attributes through your markup, you drop a single <script type="application/ld+json"> block — usually in the head — that describes the page separately from its presentation. Your HTML stays clean.
Every item follows the schema.org vocabulary and needs two keys:
@context— almost always"https://schema.org".@type— what this is:Product,Recipe,Article,Organization, and so on.
The rest of the keys are properties of that type. The data should mirror what a human sees on the page — describing content that isn't visible is against the rules and can get you penalized.
Example
When to use it
- An e-commerce site adds Product schema JSON-LD so Google can display price and availability directly in search results.
- A recipe blog uses Recipe structured data so search engines show cook time and star ratings in rich result cards.
- A local business adds LocalBusiness schema to the homepage so Google Maps and Knowledge Panels show accurate hours and address.
More examples
Article schema with JSON-LD
JSON-LD inside a script tag injects structured data that search engines read without parsing visible HTML.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "HTML Tutorial for Beginners",
"author": {
"@type": "Person",
"name": "Jane Doe"
},
"datePublished": "2025-06-01",
"image": "https://soundscode.io/img/html-tutorial.png"
}
</script>BreadcrumbList structured data
BreadcrumbList schema makes breadcrumb navigation appear in Google search result URLs for the page.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home",
"item": "https://soundscode.io/" },
{ "@type": "ListItem", "position": 2, "name": "HTML",
"item": "https://soundscode.io/html/" },
{ "@type": "ListItem", "position": 3, "name": "Basics" }
]
}
</script>FAQ schema for rich search results
FAQPage schema enables Google to display question-answer pairs as expandable rich results in search.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is HTML?",
"acceptedAnswer": {
"@type": "Answer",
"text": "HTML is the markup language used to structure web pages."
}
},
{
"@type": "Question",
"name": "Is HTML a programming language?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No, HTML is a markup language, not a programming language."
}
}
]
}
</script>
Discussion