Setting up Structured Data (Schema.org / JSON-LD) for a Website
Structured data helps search engines understand page content and display rich results: rating stars, prices, breadcrumbs, question answers.
Formats: JSON-LD vs Microdata vs RDFa
JSON-LD — Google's recommended format. Placed in a <script> tag in <head>, not mixed with HTML, easily managed via JavaScript.
Microdata — attributes directly in HTML tags. Harder to maintain when markup changes.
RDFa — similar to Microdata, less common.
Use JSON-LD.
Basic JSON-LD Structure
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Website Name",
"url": "https://example.ru",
"potentialAction": {
"@type": "SearchAction",
"target": {
"@type": "EntryPoint",
"urlTemplate": "https://example.ru/search?q={search_term_string}"
},
"query-input": "required name=search_term_string"
}
}
</script>
Multiple Schemas on One Page
On a product page, multiple schemas are often needed:
<script type="application/ld+json">
[
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.ru" },
{ "@type": "ListItem", "position": 2, "name": "Electronics", "item": "https://example.ru/electronics" },
{ "@type": "ListItem", "position": 3, "name": "Smartphones" }
]
},
{
"@context": "https://schema.org",
"@type": "Product",
"name": "iPhone 15 Pro",
"offers": { "@type": "Offer", "price": "89990", "priceCurrency": "RUB" }
}
]
</script>
Implementation in Laravel/Blade
// Component x-schema-json
@props(['data'])
<script type="application/ld+json">{!! json_encode($data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) !!}</script>
// Usage in template
<x-schema-json :data="[
'@context' => 'https://schema.org',
'@type' => 'Product',
'name' => $product->name,
'offers' => ['@type' => 'Offer', 'price' => $product->price_formatted]
]" />
Implementation in React/Next.js
export function JsonLd({ data }) {
return (
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
/>
);
}
// Usage
<JsonLd data={{
'@context': 'https://schema.org',
'@type': 'Article',
headline: article.title,
datePublished: article.publishedAt,
author: { '@type': 'Person', name: article.author.name }
}} />
Popular Schema.org Types
| Type | Application | Rich Result |
|---|---|---|
| Product | Products | Stars, price |
| Article | Articles, news | Title, date |
| BreadcrumbList | Breadcrumbs | Path in snippet |
| FAQPage | Questions/answers | Accordion in results |
| Organization | Organization | Knowledge Panel |
| LocalBusiness | Local business | Maps, hours |
| Event | Events | Date, location |
| Review | Reviews | Stars |
| JobPosting | Job vacancies | Job card |
Validation
- Google Rich Results Test: search.google.com/test/rich-results
- Schema.org Validator: validator.schema.org
Setup timeline: 1–2 days for basic types (Product, BreadcrumbList, Organization, Article).