If you want search engines to truly understand your content, schema markup is no longer optional. It powers rich results, knowledge panels, and AI-generated answers in search. In this practical tutorial, we’ll show you exactly how to add schema markup to a website using JSON-LD, with copy-paste code for the most common types and a clear testing workflow.
This guide is written for developers who want real implementation steps, not marketing fluff.
What Is Schema Markup (And Why JSON-LD)?
Schema markup is a standardized vocabulary (defined at schema.org) that tells search engines what your content actually means. Instead of guessing that a page is about a product, a recipe, or an event, search engines read your structured data and know for certain.
There are three accepted formats:
- JSON-LD (recommended by Google)
- Microdata
- RDFa
We’re focusing on JSON-LD because it’s the format Google officially recommends, it lives in a single <script> tag in your <head>, and it doesn’t pollute your HTML markup.
Step 1: Plan Which Schema Types Your Pages Need
Before writing code, map your page types to schema types. Here’s a quick reference:
| Page Type | Recommended Schema | Rich Result Eligible |
|---|---|---|
| Blog post / news | Article, BlogPosting, NewsArticle | Yes |
| Product page | Product + Offer | Yes |
| FAQ page or section | FAQPage | Limited (since 2023) |
| Homepage / company | Organization, WebSite | Sitelinks search box |
| Local business | LocalBusiness | Yes |
| Breadcrumbs | BreadcrumbList | Yes |
Step 2: The Basic JSON-LD Implementation Pattern
Every JSON-LD snippet follows the same skeleton. You drop it inside a <script type="application/ld+json"> tag, preferably in the <head> of your HTML document:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Thing",
"name": "Example"
}
</script>Three rules to remember:
- Always declare @context as
https://schema.org - Always declare @type matching a valid schema.org type
- The content inside the script must be valid JSON (no trailing commas, double quotes only)
Step 3: Add Article Schema
This is the most common schema for blog posts and editorial content. Here’s a complete, production-ready example:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "How to Add Schema Markup to a Website",
"description": "A developer-focused tutorial on implementing JSON-LD structured data.",
"image": "https://pixelseed.net/images/schema-tutorial.jpg",
"datePublished": "2026-05-11T02:00:00+02:00",
"dateModified": "2026-05-11T02:00:00+02:00",
"author": {
"@type": "Person",
"name": "Pixelseed Team",
"url": "https://pixelseed.net/about"
},
"publisher": {
"@type": "Organization",
"name": "Pixelseed",
"logo": {
"@type": "ImageObject",
"url": "https://pixelseed.net/logo.png"
}
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://pixelseed.net/blog/how-to-add-schema-markup"
}
}
</script>Key Properties Explained
- headline: Keep under 110 characters
- image: Use high-resolution images (at least 1200px wide)
- datePublished / dateModified: ISO 8601 format with timezone
- mainEntityOfPage: The canonical URL of the article
Step 4: Add Product Schema
For e-commerce, Product schema is what unlocks price, availability, and review stars in search results.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Pixelseed Pro Plan",
"image": [
"https://pixelseed.net/products/pro-1.jpg",
"https://pixelseed.net/products/pro-2.jpg"
],
"description": "Annual subscription for our advanced SEO platform.",
"sku": "PXS-PRO-001",
"brand": {
"@type": "Brand",
"name": "Pixelseed"
},
"offers": {
"@type": "Offer",
"url": "https://pixelseed.net/pricing/pro",
"priceCurrency": "USD",
"price": "299.00",
"priceValidUntil": "2026-12-31",
"availability": "https://schema.org/InStock",
"itemCondition": "https://schema.org/NewCondition"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "127"
}
}
</script>Important: Only include aggregateRating if the reviews are genuinely visible on the page. Google will flag (or remove) rich results for fake or hidden ratings.
Step 5: Add FAQ Schema
Although Google has restricted FAQ rich results to authoritative government and health sites since 2023, FAQ schema still helps with semantic understanding and can appear in AI summaries.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is schema markup?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Schema markup is structured data that helps search engines understand the meaning of content on a webpage."
}
},
{
"@type": "Question",
"name": "Is JSON-LD better than Microdata?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Google officially recommends JSON-LD because it's cleaner, easier to maintain, and decoupled from the HTML structure."
}
}
]
}
</script>
Step 6: Combining Multiple Schemas on One Page
You have two options when a page needs multiple schema types:
Option A: Separate Script Tags
Add each JSON-LD block in its own <script> tag. Clean and simple.
Option B: A Single @graph Array
Combine everything into one script using the @graph property. This is preferred for performance and for linking entities with @id:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://pixelseed.net/#org",
"name": "Pixelseed",
"url": "https://pixelseed.net"
},
{
"@type": "WebSite",
"@id": "https://pixelseed.net/#website",
"url": "https://pixelseed.net",
"publisher": { "@id": "https://pixelseed.net/#org" }
}
]
}
</script>Step 7: Inject Schema Dynamically (SPA / Framework Setups)
If you work with React, Next.js, Vue, or other modern frameworks, here’s how to handle it:
- Next.js 14+: Render the JSON-LD inside your page component using a
<script>tag withdangerouslySetInnerHTML, or use the built-in metadata API. - Nuxt: Use
useHead()to inject script tags server-side. - WordPress: Either hook into
wp_headin your theme’sfunctions.php, or rely on a plugin like Yoast or Rank Math. - Static HTML: Just paste it in the
<head>.
Example for Next.js:
export default function ArticlePage() {
const jsonLd = {
"@context": "https://schema.org",
"@type": "Article",
"headline": "My Article Title"
};
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
{/* page content */}
</>
);
}
Step 8: Test With Google’s Rich Results Test
This is the non-negotiable final step. Never ship schema without validating it.
- Go to the Rich Results Test at
search.google.com/test/rich-results - Paste your URL or your raw code
- Check for green checkmarks on detected items
- Resolve every error (these prevent rich results)
- Address warnings when reasonable (these are recommended fields)
Also useful:
- Schema.org Validator at
validator.schema.orgfor general schema validation beyond Google rich results - Google Search Console: monitor the “Enhancements” reports to catch issues on indexed pages
Common Mistakes to Avoid
- Marking up invisible content: Schema must match what’s actually visible on the page
- Using fake ratings or reviews: This can trigger a manual penalty
- Wrong date format: Use ISO 8601 (e.g.,
2026-05-11T02:00:00+02:00) - Missing required fields: Each schema type has different requirements; check Google’s docs
- Multiple conflicting types for the same entity: Pick one type per entity per page
FAQ
How do I add schema markup to a website without coding?
Use Google’s Structured Data Markup Helper to generate the code visually, then paste it into your site’s head section. CMS plugins like Yoast SEO (WordPress) or built-in tools in Webflow, Duda, and Shopify can also handle this automatically.
Where should JSON-LD be placed in the HTML?
The <head> is preferred, but Google also accepts JSON-LD anywhere in the <body>. Putting it in the head keeps it organized and ensures it’s read early by crawlers.
Does schema markup directly improve rankings?
Not directly. It doesn’t give a ranking boost on its own, but it can dramatically increase your click-through rate by enabling rich results, and it helps Google’s AI features understand and surface your content.
How long until schema markup shows in search results?
After Google recrawls and reindexes the page, which can take anywhere from a few days to a few weeks. You can speed this up by requesting indexing in Google Search Console.
Can I have too much schema on a page?
You can have as many relevant schema types as needed, but every entity must be accurate and reflect visible page content. Don’t add schemas that aren’t connected to the actual content.
Final Thoughts
Adding schema markup to a website is one of the highest-ROI technical SEO tasks you can implement. With JSON-LD, the workflow is simple: identify the right schema, write valid JSON, drop it in your head tag, and validate with the Rich Results Test. Start with your highest-value pages (homepage, top articles, top products), and expand from there.
Need help auditing or implementing structured data across your site? The team at Pixelseed can help you scale schema across hundreds of templates without breaking your codebase.
