Structured Data & Schema - SEO Tutorial | TechLead

Structured Data for SEO

Structured data helps search engines understand your content better and can enable rich results like star ratings, FAQs, and product information directly in search results.

JSON-LD Format

Google recommends JSON-LD format for structured data:

// Basic Article schema
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Learn React Hooks",
  "author": {
    "@type": "Person",
    "name": "John Developer"
  },
  "datePublished": "2024-01-15",
  "dateModified": "2024-01-20",
  "image": "https://example.com/react-hooks.jpg",
  "publisher": {
    "@type": "Organization",
    "name": "TechLead",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  }
}
</script>

Common Schema Types

Content Types:

Article / BlogPosting
HowTo / Tutorial
FAQPage
Course / LearningResource
VideoObject

Business Types:

Organization
LocalBusiness
Product
Review / AggregateRating
BreadcrumbList

FAQ Schema Example

// FAQ schema for rich results
const faqSchema = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What are React Hooks?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "React Hooks are functions that let you use state and other React features in functional components."
      }
    },
    {
      "@type": "Question",
      "name": "When should I use useEffect?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Use useEffect for side effects like data fetching, subscriptions, or DOM manipulation."
      }
    }
  ]
};

// In Next.js page
export default function Page() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
      />
      {/* Page content */}
    </>
  );
}

Breadcrumb Schema

const breadcrumbSchema = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "React",
      "item": "https://example.com/react"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Hooks",
      "item": "https://example.com/react/hooks"
    }
  ]
};

Testing Structured Data

Google Rich Results Test: https://search.google.com/test/rich-results
Schema Markup Validator: https://validator.schema.org
Google Search Console: Enhancements reports