Showcase

Each example shows real output produced by astro-structured-data itself, from files in the project repository. Input on the left, output on the right.

Blog post

examples/blog-post.astroDetail →

---
import { ArticleSchema } from '@casoon/astro-structured-data/components';
---

<ArticleSchema
  title="Structured data for Astro sites"
  description="How JSON-LD is generated from typed, validated component props."
  datePublished="2026-09-10"
  dateModified="2026-09-12"
  authorName="Jane Doe"
  imageUrl="/images/structured-data.jpg"
  publisherName="Example Blog"
  publisherLogo="/logo.png"
  inLanguage="en"
  keywords={['astro', 'json-ld', 'seo']}
  readingTimeMinutes={4}
/>

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Structured data for Astro sites",
  "description": "How JSON-LD is generated from typed, validated component props.",
  "datePublished": "2026-09-10",
  "dateModified": "2026-09-12",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/"
  },
  "author": {
    "@type": "Person",
    "name": "Jane Doe"
  },
  "isAccessibleForFree": true,
  "publisher": {
    "@type": "Organization",
    "name": "Example Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "/logo.png"
    }
  },
  "image": {
    "@type": "ImageObject",
    "url": "/images/structured-data.jpg"
  },
  "inLanguage": "en",
  "keywords": "astro, json-ld, seo",
  "timeRequired": "PT4M"
}

BlogPosting
ArticleSchema

Product with offer and rating

examples/product.astroDetail →

---
import { ProductSchema } from '@casoon/astro-structured-data/components';
---

<ProductSchema
  name="Super Gadget"
  description="The best gadget ever"
  imageUrl="/images/gadget.jpg"
  price={29.99}
  priceCurrency="EUR"
  availability="InStock"
  brand="Gadget Co"
  sku="SG-001"
  ratingValue={4.5}
  reviewCount={128}
/>

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Super Gadget",
  "description": "The best gadget ever",
  "image": [
    "/images/gadget.jpg"
  ],
  "offers": {
    "@type": "Offer",
    "price": 29.99,
    "priceCurrency": "EUR",
    "availability": "https://schema.org/InStock",
    "url": "https://example.com/"
  },
  "brand": {
    "@type": "Brand",
    "name": "Gadget Co"
  },
  "sku": "SG-001",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": 4.5,
    "reviewCount": 128
  }
}

Product
ProductSchema

Online event

examples/online-event.astroDetail →

---
import { EventSchema } from '@casoon/astro-structured-data/components';
---

<!-- Online event: no venue, the stream URL becomes a VirtualLocation. -->
<EventSchema
  name="Astro Live Webinar"
  description="Structured data in Astro, live with Q&A."
  startDate="2026-10-20T17:00:00+02:00"
  endDate="2026-10-20T18:30:00+02:00"
  attendanceMode="Online"
  onlineUrl="https://example.com/live"
  organizer={{ name: 'Example GmbH', url: 'https://example.com' }}
  price={0}
  priceCurrency="EUR"
/>

{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "Astro Live Webinar",
  "startDate": "2026-10-20T17:00:00+02:00",
  "endDate": "2026-10-20T18:30:00+02:00",
  "description": "Structured data in Astro, live with Q&A.",
  "eventAttendanceMode": "https://schema.org/OnlineEventAttendanceMode",
  "eventStatus": "https://schema.org/EventScheduled",
  "location": {
    "@type": "VirtualLocation",
    "url": "https://example.com/live"
  },
  "offers": {
    "@type": "Offer",
    "price": 0,
    "priceCurrency": "EUR",
    "availability": "https://schema.org/InStock",
    "url": "https://example.com/"
  },
  "organizer": {
    "@type": "Organization",
    "name": "Example GmbH",
    "url": "https://example.com"
  }
}

Event
VirtualLocation
EventSchema

Remote job posting

examples/remote-job.astroDetail →

---
import { JobPostingSchema } from '@casoon/astro-structured-data/components';
---

<!-- Fully remote: jobLocationType plus applicantLocationRequirements, no jobLocation. -->
<JobPostingSchema
  title="Remote Frontend Engineer"
  description="<p>Fully remote position open worldwide.</p>"
  hiringOrganizationName="ACME GmbH"
  datePosted="2026-09-01"
  validThrough="2026-12-31"
  jobLocationType="TELECOMMUTE"
  applicantLocationRequirements="DE"
  employmentType="FULL_TIME"
  baseSalary={{ value: 72000, currency: 'EUR', unit: 'YEAR' }}
/>

{
  "@context": "https://schema.org",
  "@type": "JobPosting",
  "title": "Remote Frontend Engineer",
  "description": "<p>Fully remote position open worldwide.</p>",
  "datePosted": "2026-09-01",
  "validThrough": "2026-12-31",
  "employmentType": "FULL_TIME",
  "hiringOrganization": {
    "@type": "Organization",
    "name": "ACME GmbH",
    "url": "https://example.com"
  },
  "baseSalary": {
    "@type": "MonetaryAmount",
    "currency": "EUR",
    "value": {
      "@type": "QuantitativeValue",
      "value": 72000,
      "unitText": "YEAR"
    }
  },
  "jobLocationType": "TELECOMMUTE",
  "applicantLocationRequirements": {
    "@type": "Country",
    "name": "DE"
  }
}

JobPosting
JobPostingSchema

Local business

examples/local-business.astroDetail →

---
import { LocalBusinessSchema } from '@casoon/astro-structured-data/components';
---

<LocalBusinessSchema
  name="My Shop"
  telephone="+49 30 1234567"
  address={{
    streetAddress: 'Hauptstraße 42',
    addressLocality: 'Berlin',
    postalCode: '10119',
    addressCountry: 'DE',
  }}
  geo={{ latitude: 52.53, longitude: 13.41 }}
  openingHours={['Mo-Fr 09:00-18:00', 'Sa 10:00-16:00']}
/>

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "My Shop",
  "telephone": "+49 30 1234567",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Hauptstraße 42",
    "addressLocality": "Berlin",
    "postalCode": "10119",
    "addressCountry": "DE"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": 52.53,
    "longitude": 13.41
  },
  "openingHours": [
    "Mo-Fr 09:00-18:00",
    "Sa 10:00-16:00"
  ]
}

LocalBusiness
LocalBusinessSchema

Recipe

examples/recipe.astroDetail →

---
import { RecipeSchema } from '@casoon/astro-structured-data/components';
---

<RecipeSchema
  name="Classic Chocolate Chip Cookies"
  description="Crispy edges, chewy and soft in the center."
  imageUrl="/images/cookies.jpg"
  authorName="Baker Bob"
  prepTime="PT15M"
  cookTime="PT10M"
  recipeYield="12 cookies"
  ingredients={['200g butter', '150g brown sugar', '2 eggs', '300g flour', '200g chocolate chips']}
  instructions={[
    { name: 'Preheat', text: 'Preheat oven to 190°C.' },
    { name: 'Make dough', text: 'Mix butter, sugar and eggs. Fold in flour and chocolate chips.' },
    { name: 'Bake', text: 'Scoop onto a sheet and bake for 10 minutes.' },
  ]}
/>

{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Classic Chocolate Chip Cookies",
  "description": "Crispy edges, chewy and soft in the center.",
  "image": [
    "/images/cookies.jpg"
  ],
  "author": {
    "@type": "Person",
    "name": "Baker Bob"
  },
  "recipeIngredient": [
    "200g butter",
    "150g brown sugar",
    "2 eggs",
    "300g flour",
    "200g chocolate chips"
  ],
  "recipeInstructions": [
    {
      "@type": "HowToStep",
      "text": "Preheat oven to 190°C.",
      "name": "Preheat"
    },
    {
      "@type": "HowToStep",
      "text": "Mix butter, sugar and eggs. Fold in flour and chocolate chips.",
      "name": "Make dough"
    },
    {
      "@type": "HowToStep",
      "text": "Scoop onto a sheet and bake for 10 minutes.",
      "name": "Bake"
    }
  ],
  "prepTime": "PT15M",
  "cookTime": "PT10M",
  "recipeYield": "12 cookies"
}

Recipe
RecipeSchema

FAQ page

examples/faq.astroDetail →

---
import { FAQSchema } from '@casoon/astro-structured-data/components';
---

<FAQSchema
  questions={[
    { question: 'What is this?', answer: 'An Astro integration.' },
    { question: 'How does it work?', answer: 'It injects JSON-LD.' },
  ]}
/>

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is this?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "An Astro integration."
      }
    },
    {
      "@type": "Question",
      "name": "How does it work?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "It injects JSON-LD."
      }
    }
  ]
}

FAQPage
FAQSchema

Breadcrumbs from the URL

examples/auto-breadcrumbs.astroDetail →

---
import { AutoBreadcrumbSchema } from '@casoon/astro-structured-data/components';
---

<!-- Rendered on /en/blog/my-post/: the path becomes the breadcrumb trail. -->
<AutoBreadcrumbSchema
  homeLabel="Start"
  ignoreSegments={['en']}
  labels={{ 'my-post': 'My Post' }}
/>

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Start",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Blog",
      "item": "https://example.com/en/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "My Post",
      "item": "https://example.com/en/blog/my-post"
    }
  ]
}

BreadcrumbList
AutoBreadcrumbSchema

Invalid props fail the build

examples/invalid-event.astroDetail →

---
import { EventSchema } from '@casoon/astro-structured-data/components';
---

<!-- Invalid on purpose: the build stops instead of emitting broken JSON-LD. -->
<EventSchema
  name="Tech Meetup Berlin"
  startDate="15.06.2026"
  attendanceMode="Offline"
  locationName="Hub Berlin"
  price={10}
  priceCurrency="euro"
/>

[astro-structured-data] <EventSchema> on /events/meetup/ received invalid props:
✖ Invalid input
  → at startDate
✖ Must be an ISO 4217 currency code like "EUR"
  → at priceCurrency

validation
EventSchema