Schema Component Demo

Testing Instructions

  1. View page source (Ctrl+U / Cmd+Option+U) to see raw JSON-LD output
  2. Use Google Rich Results Test to validate
  3. Use Schema.org Validator for detailed validation

ArticleSchema

Enhanced article structured data with full author as Person

<ArticleSchema
  headline="Best Air Rifles for Beginners"
  description="Guide to choosing your first air rifle"
  author={{ name: "John Smith", bio: "..." }}
  datePublished="2024-01-15T10:00:00Z"
  wordCount={2500}
  articleSection="Buying Guides"
/>

ProductSchema

Product with aggregateRating, Offers, and Review

<ProductSchema
  product={{
    name: "Gamo Swarm Magnum G2",
    brand: "Gamo",
    asin: "B08XYZ1234"
  }}
  rating={4.5}
  reviewCount={127}
  price={249.99}
/>

BreadcrumbSchema

Navigation hierarchy with auto-generation option

<BreadcrumbSchema
  items={[
    { name: "Home", url: "/" },
    { name: "Guides", url: "/articles" },
    { name: "Best Air Rifles", url: "/articles/best-air-rifles" }
  ]}
/>

HowToSchema

Step-by-step guide with tools and supplies

<HowToSchema
  name="How to Zero Your Scope"
  description="Step-by-step scope zeroing guide"
  totalTime="PT30M"
  tools={[{ name: "Screwdriver" }]}
  steps={[
    { text: "Set up target at 10 yards" },
    { text: "Fire 3-shot group" }
  ]}
/>

OrganizationSchema

Detailed organization with social profiles

<OrganizationSchema
  alternateName="PG101"
  email="[email protected]"
  sameAs={[
    "https://twitter.com/pelletguns101",
    "https://youtube.com/@pelletguns101"
  ]}
/>