HTML5 Mastery: The Complete Web Foundation
HomeInsightsCoursesHTMLStructured Data & Schema.org
SEO & Discovery

Structured Data & Schema Markup

Enhance your search results with rich snippets. Learn how to implement Schema.org structured data to display ratings, prices, recipes, events, and more in search results.

What is Structured Data?

Structured data is standardized code that helps search engines understand your content and display rich results (rich snippets) in search.

🌟 Rich Snippets

Stand out in search with stars, images, prices, and more

📊 Knowledge Graph

Appear in Google's Knowledge Panel

🎯 Better CTR

Rich results get 30% more clicks

🤖 Voice Search

Optimize for voice assistants

JSON-LD Format (Recommended)

Google recommends JSON-LD format - easy to implement, doesn't clutter HTML, and can be dynamically generated.

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Article Title</title>
    
    <!-- JSON-LD structured data --&gt;
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": "Complete Guide to Image Compression",
      "author": {
        "@type": "Person",
        "name": "John Doe"
      },
      "datePublished": "2024-01-15",
      "image": "https://example.com/image.jpg"
    }
    </script>
</head>
<body>
    <!-- Regular HTML content --&gt;
</body>
</html>

Article Schema

Blog Post / Tutorial

HTML
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How to Compress Images Without Losing Quality",
  "description": "Learn the best techniques for image compression",
  "image": "https://www.filefusion.app/images/compression-guide.jpg",
  "author": {
    "@type": "Person",
    "name": "Jane Smith",
    "url": "https://www.filefusion.app/authors/jane-smith"
  },
  "publisher": {
    "@type": "Organization",
    "name": "FileFusion",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.filefusion.app/logo.png"
    }
  },
  "datePublished": "2024-01-15",
  "dateModified": "2024-01-20",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.filefusion.app/insights/courses/image-compression"
  }
}
</script>

Benefits:

  • ✅ Article rich snippet in search results
  • ✅ Shows author, date, and image
  • ✅ Eligible for Google News
  • ✅ Better mobile search display

Product Schema

E-commerce Product

HTML
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Premium Image Compression Software",
  "image": "https://www.filefusion.app/images/product.jpg",
  "description": "Professional image compression tool for businesses",
  "brand": {
    "@type": "Brand",
    "name": "FileFusion"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://www.filefusion.app/products/premium",
    "priceCurrency": "USD",
    "price": "49.99",
    "priceValidUntil": "2024-12-31",
    "availability": "https://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "FileFusion"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "235"
  }
}
</script>

Rich Snippet Shows:

  • ⭐ Star rating (4.8/5)
  • 💰 Price ($49.99)
  • ✅ Availability (In Stock)
  • 📊 Review count (235 reviews)
  • 🖼️ Product image

Recipe Schema

HTML
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Chocolate Chip Cookies",
  "image": "https://example.com/cookies.jpg",
  "description": "Delicious homemade chocolate chip cookies",
  "author": {
    "@type": "Person",
    "name": "Chef Maria"
  },
  "datePublished": "2024-01-15",
  "prepTime": "PT15M",
  "cookTime": "PT12M",
  "totalTime": "PT27M",
  "recipeYield": "24 cookies",
  "recipeCategory": "Dessert",
  "recipeCuisine": "American",
  "keywords": "cookies, chocolate, dessert",
  "nutrition": {
    "@type": "NutritionInformation",
    "calories": "150 calories"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "ratingCount": "482"
  },
  "recipeIngredient": [
    "2 cups all-purpose flour",
    "1 cup butter",
    "2 cups chocolate chips"
  ],
  "recipeInstructions": [
    {
      "@type": "HowToStep",
      "text": "Preheat oven to 350°F (175°C)"
    },
    {
      "@type": "HowToStep",
      "text": "Mix butter and sugar until creamy"
    }
  ]
}
</script>

Rich Snippet Shows:

  • ⭐ Rating (4.9/5 from 482 reviews)
  • ⏱️ Time (Prep: 15min, Cook: 12min, Total: 27min)
  • 🔥 Calories (150 per serving)
  • 🖼️ Recipe image

FAQ Schema

HTML
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How does image compression work?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Image compression reduces file size by removing redundant data. Lossy compression (JPEG) discards some visual information, while lossless compression (PNG) preserves all original data."
      }
    },
    {
      "@type": "Question",
      "name": "What's the best image format for web?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "WebP is generally best for web, offering 25-35% smaller file sizes than JPEG with similar quality. However, JPEG remains widely supported and is a good fallback."
      }
    },
    {
      "@type": "Question",
      "name": "Can I compress images without losing quality?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes, using lossless compression formats like PNG or lossless WebP. However, lossy compression (JPEG, lossy WebP) achieves much smaller file sizes with minimal visible quality loss."
      }
    }
  ]
}
</script>

Benefits:

  • ✅ Questions appear in search results
  • ✅ Expandable Q&A in Google
  • ✅ Featured in "People also ask" section
  • ✅ Increases visibility

How-To Schema

HTML
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Compress an Image",
  "description": "Step-by-step guide to compress images online",
  "image": "https://www.filefusion.app/images/how-to.jpg",
  "totalTime": "PT5M",
  "estimatedCost": {
    "@type": "MonetaryAmount",
    "currency": "USD",
    "value": "0"
  },
  "tool": [
    {
      "@type": "HowToTool",
      "name": "FileFusion Image Compressor"
    }
  ],
  "step": [
    {
      "@type": "HowToStep",
      "name": "Upload Image",
      "text": "Click 'Upload' and select your image file",
      "image": "https://www.filefusion.app/images/step1.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Choose Quality",
      "text": "Select compression quality (recommend 80-90%)",
      "image": "https://www.filefusion.app/images/step2.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Download Result",
      "text": "Click 'Download' to save compressed image",
      "image": "https://www.filefusion.app/images/step3.jpg"
    }
  ]
}
</script>

Organization Schema

HTML
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "FileFusion",
  "url": "https://filefusion.com",
  "logo": "https://www.filefusion.app/logo.png",
  "description": "Free online file conversion and editing tools",
  "foundingDate": "2020",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-555-123-4567",
    "contactType": "Customer Support",
    "email": "support@filefusion.com",
    "availableLanguage": ["English", "Spanish"]
  },
  "sameAs": [
    "https://twitter.com/filefusion",
    "https://facebook.com/filefusion",
    "https://linkedin.com/company/filefusion"
  ],
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Tech Street",
    "addressLocality": "San Francisco",
    "addressRegion": "CA",
    "postalCode": "94105",
    "addressCountry": "US"
  }
}
</script>

Breadcrumb Schema

HTML
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://filefusion.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Tutorials",
      "item": "https://www.filefusion.app/tutorials"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "HTML",
      "item": "https://www.filefusion.app/insights/courses/html"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Structured Data",
      "item": "https://www.filefusion.app/insights/courses/html/structured-data"
    }
  ]
}
</script>

<!-- Corresponding HTML --&gt;
<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/tutorials">Tutorials</a></li>
        <li><a href="/insights/courses/html">HTML</a></li>
        <li aria-current="page">Structured Data</li>
    </ol>
</nav>

Video Schema

HTML
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "How to Compress Images Tutorial",
  "description": "Learn image compression techniques in this 10-minute video",
  "thumbnailUrl": "https://www.filefusion.app/videos/thumb.jpg",
  "uploadDate": "2024-01-15",
  "duration": "PT10M30S",
  "contentUrl": "https://www.filefusion.app/videos/compression-tutorial.mp4",
  "embedUrl": "https://youtube.com/embed/abc123",
  "publisher": {
    "@type": "Organization",
    "name": "FileFusion",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.filefusion.app/logo.png"
    }
  }
}
</script>

Testing Structured Data

Google Tools

  1. Rich Results Test:
    https://search.google.com/test/rich-results
    Test if your markup is eligible for rich results
  2. Schema Markup Validator:
    https://validator.schema.org
    Validate your structured data syntax
  3. Google Search Console:
    Monitor how Google sees your structured data

Common Errors

  • ❌ Missing required fields (e.g., image, author)
  • ❌ Invalid date format (use ISO 8601: YYYY-MM-DD)
  • ❌ Invalid URL format (must be absolute URLs)
  • ❌ Mismatched content (structured data doesn't match page)
  • ❌ JSON syntax errors (missing commas, brackets)

Best Practices

✅ Do

  • Use JSON-LD format (recommended by Google)
  • Match structured data to visible content
  • Include all required properties
  • Use absolute URLs (not relative)
  • Test with Google's Rich Results Test
  • Keep data accurate and up-to-date
  • Use appropriate schema types

❌ Don't

  • Add invisible content to users
  • Mark up content not on the page
  • Include misleading information
  • Stuff keywords in structured data
  • Use wrong schema types
  • Forget to update when content changes

What's Next?

Learn about Open Graph tags for social media optimization.

Next: Open Graph Tags →