When properly implemented, structured data can enable special search result features and enhancements, such as:
JSON-LD stands for JavaScript Object Notation for Linked Data. Unlike Microformats and Microdata, JSON-LD is not embedded into your HTML elements. Instead, it sits in a dedicated script block—completely separated from your HTML content.
JSON-LD has gained prominence as Google’s recommended format because it simplifies implementation and maintenance, reducing the likelihood of errors when updating your website.
Interesting fact: JSON-LD was developed by the W3C, the same organization behind many web standards we use daily, including HTML and CSS.
It’s part of the broader semantic web initiative, aiming to make the internet more machine-readable while maintaining human-friendly interfaces.
JSON-LD provides context through a simple, readable format that both humans and machines can understand:
Separate Script Block: You place a <script type="application/ld+json">
block in your HTML document, usually in the head or just before the closing body tag.
JSON Format: Inside that script block, you write out your structured data in pure JSON, referencing recognized vocabularies like Schema.org.
Decoupled from Presentation: Since the data is separate from your HTML, it’s easier to maintain and update.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Jane Doe",
"url": "http://janedoe.com",
"jobTitle": "Software Engineer",
"worksFor": {
"@type": "Organization",
"name": "Tech Company"
},
"sameAs": [
"https://www.linkedin.com/in/janedoe",
"https://twitter.com/janedoe"
]
}
</script>
Let’s break down the key components:
@context
: Defines the vocabulary being used (typically schema.org)@type
: Specifies what kind of entity you’re describingUnderstanding how JSON-LD compares to other structured data formats helps explain why it has become the preferred choice:
Feature | JSON-LD | Microdata | RDFa |
---|---|---|---|
Implementation | Separate script block | Inline HTML attributes | Inline HTML attributes |
Complexity | Low | Medium | High |
Maintenance | Easy | Difficult | Difficult |
HTML Impact | None | Modifies HTML | Modifies HTML |
Google Preference | Recommended | Supported | Supported |
Learning Curve | Moderate | Moderate | Steep |
While Google supports all three formats, they’ve publicly stated their preference for JSON-LD due to its ease of implementation and lower risk of markup errors.
<div itemscope itemtype="https://schema.org/Person">
<span itemprop="name">Jane Doe</span>
<span itemprop="jobTitle">Software Engineer</span>
<div itemprop="worksFor" itemscope itemtype="https://schema.org/Organization">
<span itemprop="name">Tech Company</span>
</div>
</div>
As you can see, Microdata intertwines with your HTML structure, making it more difficult to maintain and update compared to the clean separation offered by JSON-LD.
Adding JSON-LD to your website is straightforward. Here’s how to get started:
<head>
section or before the closing </body>
tagDifferent types of pages require different schema types:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Using JSON-LD to improve website SEO",
"image": "https://yoursite.com/images/article-image.jpg",
"author": {
"@type": "Person",
"name": "Your Name"
},
"publisher": {
"@type": "Organization",
"name": "Your Publication",
"logo": {
"@type": "ImageObject",
"url": "https://yoursite.com/logo.png"
}
},
"datePublished": "2024-02-14",
"dateModified": "2024-02-20"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Awesome Coffee Shop",
"image": "https://yoursite.com/images/coffee-shop.jpg",
"address": {
"@type": "PostalAddress",
"streetAddress": "123 Main St",
"addressLocality": "San Francisco",
"addressRegion": "CA",
"postalCode": "94122",
"addressCountry": "US"
},
"telephone": "+14155552671",
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
"opens": "08:00",
"closes": "18:00"
}
]
}
</script>
Implementing JSON-LD properly can significantly impact your SEO in several ways:
JSON-LD enables rich results, which can include:
These enhanced results typically have higher click-through rates than standard results.
When search engines clearly understand what your page is about, they can:
As voice search becomes more prevalent, structured data becomes increasingly important:
“In a world where nearly 30% of all searches will be done without a screen by 2025, structured data isn’t optional – it’s essential.”
— Mary Meeker, Internet Trends Report
Follow these guidelines to get the most out of your JSON-LD implementation:
For pages that represent multiple entities, you can include multiple script blocks:
<!-- Person schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "John Smith"
}
</script>
<!-- Article schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Article Title"
}
</script>
Even experienced developers can make these common JSON-LD errors:
Google may issue manual actions against sites that use structured data in manipulative or deceptive ways, so always follow their guidelines.
Before deploying your JSON-LD, always validate it using these tools:
Google’s Rich Results Test: https://search.google.com/test/rich-results
Schema.org Validator: https://validator.schema.org/
JSON-LD Playground: https://json-ld.org/playground/
Regular testing ensures your structured data remains valid as your website evolves.
Will be updated in next revision.
JSON-LD offers a clean, efficient, and powerful way to implement structured data without cluttering your HTML. While it might take a little getting used to if you’re steeped in traditional markup approaches, the benefits in maintainability, scalability, and SEO results are substantial.
The future of search is increasingly semantic, with search engines attempting to understand not just keywords but meaning and relationships. JSON-LD is perfectly positioned to bridge the gap between human-readable content and machine-understandable data.
Remember, structured data implementation is not a one-time task but an ongoing process that should evolve with your website and Google’s guidelines.
This article is part of our ongoing series on technical SEO strategies. Check out my other guides on website optimization, core web vitals, and more.
November 19, 2023
Learn how to implement Microdata and Microformats to improve your website's SEO, help search engines understand your content, and increase visibility in search results.
July 29, 2023
A comprehensive, actionable SEO checklist for web developers covering titles, meta descriptions, structured data, and technical optimizations to improve search rankings.
April 11, 2019
Learn how to structure your React applications with a scalable and maintainable architecture. Discover practical directory organization patterns based on real-world experience.
May 11, 2019
Learn how to architect complex React applications with Redux, Redux-Saga, and service layers. This guide provides a scalable structure for organizing reducers, actions, middlewares, and selectors in large React projects.
June 29, 2019
Learn how to automate your Lighthouse audits with Mocha and Chai instead of manually performing audits on your Progressive Web Application. Run tests programmatically in CI/CD environments or locally to maintain consistent quality standards.
May 19, 2019
In this article, we explore managing React application state using hooks. We leverage the React.useContext and React.useReducer hooks to create a Redux-like state management system without external dependencies.