Structured data is code that helps search engines understand your content better. By adding structured data markup to your HTML, you can help search engines display your content as rich results, which can improve click-through rates and visibility in search results.
What is Structured Data?
Structured data is a standardized format for providing information about a page and classifying its content. It's like giving search engines a detailed roadmap of what your page contains:
- Articles: Author, publish date, headline
- Products: Price, availability, ratings
- Events: Date, time, location, ticket info
- Recipes: Ingredients, cook time, ratings
- Organizations: Contact info, social profiles
Why Structured Data Matters
Structured data helps you:
- Earn rich snippets: Enhanced search results with images, ratings, prices
- Improve CTR: More appealing results get more clicks
- Better understanding: Help search engines comprehend your content
- Voice search optimization: Structured data powers voice assistants
- Knowledge Graph: Potential inclusion in Google's Knowledge Graph
Schema.org
Schema.org is a collaborative project between Google, Microsoft, Yahoo, and Yandex that provides a vocabulary for structured data. It defines hundreds of types (Article, Product, Event, etc.) and their properties.
JSON-LD (Recommended Format)
JSON-LD (JavaScript Object Notation for Linked Data) is Google's recommended format. It's easy to implement and doesn't clutter your HTML:
json-ld-basic.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Article Title</title>
<!-- JSON-LD structured data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "How to Learn HTML",
"author": {
"@type": "Person",
"name": "John Doe"
},
"datePublished": "2024-10-15",
"image": "https://example.com/article-image.jpg"
}
</script>
</head>
<body>
<!-- Regular HTML content -->
<article>
<h1>How to Learn HTML</h1>
<p>Article content...</p>
</article>
</body>
</html>Article Schema
For blog posts, news articles, and other written content:
article-schema.html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Complete Guide to HTML for Beginners",
"description": "A comprehensive tutorial covering HTML basics to advanced topics.",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"datePublished": "2024-10-15T08:00:00+00:00",
"dateModified": "2024-10-16T10:30:00+00:00",
"author": {
"@type": "Person",
"name": "John Doe",
"url": "https://example.com/author/john-doe"
},
"publisher": {
"@type": "Organization",
"name": "Web Dev Academy",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.jpg",
"width": 600,
"height": 60
}
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://example.com/articles/html-guide"
}
}
</script>Article Requirements
- headline: Title of article (max 110 characters)
- image: At least 1200 pixels wide
- datePublished: ISO 8601 format
- author: Person or Organization
- publisher: Organization with logo
Product Schema
For e-commerce products to show price, availability, and ratings:
product-schema.html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Nike Air Max 270 Running Shoes",
"image": [
"https://example.com/photos/shoe-front.jpg",
"https://example.com/photos/shoe-side.jpg",
"https://example.com/photos/shoe-back.jpg"
],
"description": "Comfortable running shoes with Air Max cushioning for daily training.",
"sku": "NIKE-AM270-BLK-10",
"mpn": "925594",
"brand": {
"@type": "Brand",
"name": "Nike"
},
"offers": {
"@type": "Offer",
"url": "https://example.com/products/nike-air-max-270",
"priceCurrency": "USD",
"price": "129.99",
"priceValidUntil": "2024-12-31",
"availability": "https://schema.org/InStock",
"itemCondition": "https://schema.org/NewCondition"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.5",
"reviewCount": "267"
},
"review": {
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "5",
"bestRating": "5"
},
"author": {
"@type": "Person",
"name": "Sarah Johnson"
},
"reviewBody": "Best running shoes I've ever owned. Comfortable for long runs."
}
}
</script>Breadcrumb Schema
Help search engines understand your site hierarchy:
breadcrumb-schema.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": "Tutorials",
"item": "https://example.com/tutorials"
},
{
"@type": "ListItem",
"position": 3,
"name": "HTML",
"item": "https://example.com/tutorials/html"
},
{
"@type": "ListItem",
"position": 4,
"name": "Structured Data",
"item": "https://example.com/tutorials/html/structured-data"
}
]
}
</script>Organization Schema
For your homepage or about page:
organization-schema.html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Web Dev Academy",
"url": "https://example.com",
"logo": "https://example.com/logo.png",
"description": "Online platform for learning web development",
"foundingDate": "2020",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-555-123-4567",
"contactType": "customer service",
"email": "support@example.com",
"availableLanguage": ["English"]
},
"sameAs": [
"https://www.facebook.com/webdevacademy",
"https://twitter.com/webdevacademy",
"https://www.linkedin.com/company/webdevacademy",
"https://www.youtube.com/webdevacademy"
],
"address": {
"@type": "PostalAddress",
"streetAddress": "123 Web Street",
"addressLocality": "San Francisco",
"addressRegion": "CA",
"postalCode": "94102",
"addressCountry": "US"
}
}
</script>Person Schema
For author pages or personal websites:
person-schema.html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "John Doe",
"jobTitle": "Web Developer",
"url": "https://example.com/john-doe",
"image": "https://example.com/john-photo.jpg",
"description": "Full-stack web developer specializing in HTML, CSS, and JavaScript",
"email": "john@example.com",
"telephone": "+1-555-987-6543",
"sameAs": [
"https://twitter.com/johndoe",
"https://linkedin.com/in/johndoe",
"https://github.com/johndoe"
],
"worksFor": {
"@type": "Organization",
"name": "Web Dev Academy"
}
}
</script>Event Schema
For conferences, webinars, or any events:
event-schema.html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Event",
"name": "Web Development Conference 2024",
"startDate": "2024-11-15T09:00:00-08:00",
"endDate": "2024-11-17T17:00:00-08:00",
"eventStatus": "https://schema.org/EventScheduled",
"eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
"location": {
"@type": "Place",
"name": "Convention Center",
"address": {
"@type": "PostalAddress",
"streetAddress": "123 Main Street",
"addressLocality": "San Francisco",
"addressRegion": "CA",
"postalCode": "94102",
"addressCountry": "US"
}
},
"image": "https://example.com/event-banner.jpg",
"description": "Three-day conference featuring talks and workshops on modern web development.",
"offers": {
"@type": "Offer",
"url": "https://example.com/events/webdev-2024",
"price": "299",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock",
"validFrom": "2024-01-01"
},
"performer": {
"@type": "Person",
"name": "Jane Smith"
},
"organizer": {
"@type": "Organization",
"name": "Web Dev Academy",
"url": "https://example.com"
}
}
</script>Recipe Schema
For cooking and recipe websites:
recipe-schema.html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Recipe",
"name": "Chocolate Chip Cookies",
"image": "https://example.com/photos/cookies.jpg",
"author": {
"@type": "Person",
"name": "Sarah Baker"
},
"datePublished": "2024-10-15",
"description": "Classic chocolate chip cookies that are crispy on the outside and chewy inside.",
"prepTime": "PT20M",
"cookTime": "PT12M",
"totalTime": "PT32M",
"recipeYield": "24 cookies",
"recipeCategory": "Dessert",
"recipeCuisine": "American",
"keywords": "chocolate chip, cookies, dessert",
"nutrition": {
"@type": "NutritionInformation",
"calories": "150 calories"
},
"recipeIngredient": [
"2 cups all-purpose flour",
"1 cup butter, softened",
"3/4 cup granulated sugar",
"3/4 cup brown sugar",
"2 large eggs",
"2 cups chocolate chips"
],
"recipeInstructions": [
{
"@type": "HowToStep",
"text": "Preheat oven to 350°F (175°C)."
},
{
"@type": "HowToStep",
"text": "Mix butter and sugars until creamy."
},
{
"@type": "HowToStep",
"text": "Beat in eggs one at a time."
}
],
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "342"
}
}
</script>FAQ Schema
For frequently asked questions pages:
faq-schema.html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is HTML?",
"acceptedAnswer": {
"@type": "Answer",
"text": "HTML (HyperText Markup Language) is the standard language used to create and structure content on the web. It provides the basic structure for web pages."
}
},
{
"@type": "Question",
"name": "How long does it take to learn HTML?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Basic HTML can be learned in a few days to a week. To become proficient, expect to practice for several weeks to months, depending on your learning pace and dedication."
}
},
{
"@type": "Question",
"name": "Do I need to know programming to learn HTML?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No, HTML is not a programming language but a markup language. You don't need any prior programming knowledge to learn HTML."
}
}
]
}
</script>Local Business Schema
For physical businesses:
local-business-schema.html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Restaurant",
"name": "The Gourmet Kitchen",
"image": "https://example.com/restaurant.jpg",
"url": "https://example.com",
"telephone": "+1-555-123-4567",
"priceRange": "$$",
"servesCuisine": "Italian",
"address": {
"@type": "PostalAddress",
"streetAddress": "456 Food Street",
"addressLocality": "San Francisco",
"addressRegion": "CA",
"postalCode": "94102",
"addressCountry": "US"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": 37.7749,
"longitude": -122.4194
},
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday"
],
"opens": "11:00",
"closes": "22:00"
},
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Saturday",
"Sunday"
],
"opens": "10:00",
"closes": "23:00"
}
],
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.5",
"reviewCount": "267"
}
}
</script>Multiple Schemas on One Page
You can include multiple structured data blocks on the same page:
multiple-schemas.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Organization schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Web Dev Academy",
"url": "https://example.com"
}
</script>
<!-- Breadcrumb schema -->
<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": "Article",
"item": "https://example.com/article"
}
]
}
</script>
<!-- Article schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Article Title",
"author": {
"@type": "Person",
"name": "John Doe"
}
}
</script>
</head>
<body>
<!-- Content -->
</body>
</html>Testing Structured Data
Always test your structured data before publishing:
- Google Rich Results Test: search.google.com/test/rich-results
- Schema Markup Validator: validator.schema.org
- Google Search Console: Check "Enhancements" section
- Structured Data Linter: linter.structured-data.org
Common Schema Types
| Type | Use For |
|---|---|
| Article | Blog posts, news articles |
| Product | E-commerce products |
| Event | Conferences, webinars, concerts |
| Recipe | Cooking instructions |
| Organization | Company information |
| Person | Author profiles |
| LocalBusiness | Physical store locations |
| FAQPage | FAQ sections |
| HowTo | Step-by-step guides |
| VideoObject | Video content |
Structured Data Best Practices
- Use JSON-LD: Google's recommended format
- Place in head: Add structured data in the
<head>section - Be accurate: Only mark up content actually on the page
- Follow guidelines: Use schema.org documentation
- Test thoroughly: Validate before publishing
- Keep updated: Update when content changes
- Don't spam: Don't mark up irrelevant content
- Use specific types: Be as specific as possible (Restaurant vs LocalBusiness)
Common Mistakes to Avoid
- Missing required properties: Each schema type has required fields
- Incorrect date formats: Use ISO 8601 format
- Hidden content: Don't mark up invisible content
- Wrong schema type: Choose the most appropriate type
- Duplicate schemas: Don't repeat the same structured data
- Invalid JSON: Check JSON syntax carefully
- Not testing: Always validate before going live
Types of Rich Results
Structured data can enable various rich results:
- Rich Snippets: Enhanced search results with ratings, prices, images
- Knowledge Cards: Information boxes on the right side
- Carousels: Scrollable results for recipes, courses
- Featured Snippets: Position zero answers
- People Also Ask: FAQ-style expandable boxes
Key Takeaways
- Structured data helps search engines understand your content better
- JSON-LD is Google's recommended format for structured data
- Schema.org provides vocabulary for different content types
- Rich snippets can improve click-through rates from search results
- Always test structured data before publishing
- Use the most specific schema type available
- Only mark up content that's actually visible on the page
- Keep structured data updated when content changes
- Common types include Article, Product, Event, Recipe, and Organization
- Rich results eligibility doesn't guarantee they'll appear
What's Next?
Now that you understand structured data, you can help search engines better understand your content and potentially earn rich snippets. In the next lesson, we'll explore performance optimization techniques to make your HTML pages load faster.