JSON-LD Structured Data
Generate JSON-LD structured data for SEO and rich search results.
When to Use
- •Setting up a new page type
- •Adding product/article/event pages
- •Improving search appearance
Common Schemas
Website (add to homepage)
html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Site Name",
"url": "https://example.com",
"description": "Site description",
"potentialAction": {
"@type": "SearchAction",
"target": "https://example.com/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
Organization
html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Company Name",
"url": "https://example.com",
"logo": "https://example.com/logo.png",
"sameAs": [
"https://twitter.com/handle",
"https://github.com/handle"
]
}
</script>
Article/Blog Post
html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Article Title",
"description": "Article description",
"image": "https://example.com/image.jpg",
"datePublished": "2024-01-01",
"dateModified": "2024-01-02",
"author": {
"@type": "Person",
"name": "Author Name"
}
}
</script>
Product
html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Product Name",
"description": "Product description",
"image": "https://example.com/product.jpg",
"offers": {
"@type": "Offer",
"price": "99.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
}
</script>
BreadcrumbList
html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com" },
{ "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog" },
{ "@type": "ListItem", "position": 3, "name": "Post Title" }
]
}
</script>
React Component Pattern
tsx
interface JsonLdProps {
data: Record<string, unknown>
}
export function JsonLd({ data }: JsonLdProps) {
return (
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
/>
)
}