What Is Schema Markup?

Schema markup is structured data using vocabulary from schema.org that tells search engines precisely what your content represents — a product, an FAQ, a recipe, a local business. Correct implementation can unlock Google rich results: star ratings, FAQ dropdowns, price ranges, event listings, and more.

JSON-LD Format (Recommended)

Google recommends JSON-LD, placed in a <script> tag in your <head>:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "WebDesign001",
  "url": "https://webdesign001.net",
  "description": "Free tools for web designers and developers."
}
</script>

Common Schema Types

<!-- FAQ Page -->
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Is the CSS Gradient Generator free?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes, completely free with no account required."
      }
    }
  ]
}
<!-- Article/Blog Post -->
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How to Make a Sticky Header",
  "author": { "@type": "Organization", "name": "WebDesign001" },
  "datePublished": "2026-01-15",
  "dateModified": "2026-06-01",
  "image": "https://webdesign001.net/og-images/sticky-header.png"
}
<!-- HowTo -->
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Make a Sticky Header",
  "step": [
    { "@type": "HowToStep", "text": "Add position: sticky to your header element." },
    { "@type": "HowToStep", "text": "Set top: 0 to define where it sticks." },
    { "@type": "HowToStep", "text": "Add z-index: 9999 to keep it above other content." }
  ]
}

Validate Your Markup

💡 Tip: Google doesn't guarantee rich results even with valid markup. Factors like content quality and site authority also play a role. But valid schema is always a prerequisite.
← PreviousHow to Add a FaviconNext →How to Use Responsive Images