Product Page Demo

Product schema with pricing, brand, availability, ratings, and breadcrumbs.

Product SchemaOfferAggregateRatingBreadcrumbs

Preview

A product listing with all the SEO data rendered in the HTML source.

Home / Products / Ergonomic Mechanical Keyboard

Ergonomic Mechanical Keyboard

Premium split mechanical keyboard with Cherry MX Brown switches. Designed for all-day comfort and maximum productivity.

$189.99In Stock
Brand: Acme PeripheralsSKU: ACME-KB-001Rating: 4.7/5 (342 reviews)

SEO Tags Generated

Generated meta tagsHTML
<title>Ergonomic Mechanical Keyboard | Acme Store</title>
<meta name="description" content="Premium split mechanical keyboard..." />
<link rel="canonical" href="https://acmestore.com/products/ergonomic-keyboard" />

<!-- Open Graph (Product type) -->
<meta property="og:title" content="Ergonomic Mechanical Keyboard" />
<meta property="og:description" content="Premium split mechanical keyboard..." />
<meta property="og:type" content="product" />
<meta property="og:url" content="https://acmestore.com/products/ergonomic-keyboard" />
<meta property="og:image" content="https://acmestore.com/images/keyboard.jpg" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="800" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@acmestore" />
<meta name="twitter:title" content="Ergonomic Mechanical Keyboard" />
<meta name="twitter:image" content="https://acmestore.com/images/keyboard.jpg" />
Generated JSON-LD structured dataJSON-LD
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Ergonomic Mechanical Keyboard",
  "url": "https://acmestore.com/products/ergonomic-keyboard",
  "description": "Premium split mechanical keyboard...",
  "sku": "ACME-KB-001",
  "brand": { "@type": "Brand", "name": "Acme Peripherals" },
  "image": ["https://acmestore.com/images/keyboard.jpg"],
  "offers": {
    "@type": "Offer",
    "price": 189.99,
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": 4.7,
    "reviewCount": 342
  }
}
</script>

Source Code

ProductPage.tsxTypeScript
import {
  mergeSEOConfig,
  buildCanonicalUrl,
  createProductSchema,
  createBreadcrumbSchema,
  SEOHead,
  JsonLd,
} from "react-ssr-seo";
import { siteConfig, SITE_URL } from "../config/seo";

const product = {
  name: "Ergonomic Mechanical Keyboard",
  slug: "ergonomic-keyboard",
  description: "Premium split mechanical keyboard...",
  price: 189.99,
  image: `${SITE_URL}/images/keyboard.jpg`,
  brand: "Acme Peripherals",
  sku: "ACME-KB-001",
  inStock: true,
  rating: 4.7,
  reviewCount: 342,
};

const url = buildCanonicalUrl(SITE_URL, `/products/${product.slug}`);

// 1. Page SEO config
const pageConfig = mergeSEOConfig(siteConfig, {
  title: product.name,
  description: product.description,
  canonical: url,
  openGraph: {
    title: product.name,
    description: product.description,
    type: "product",
    url,
    images: [{ url: product.image, width: 800, height: 800, alt: product.name }],
  },
});

// 2. Product schema with pricing & ratings
const productSchema = createProductSchema({
  name: product.name,
  url,
  description: product.description,
  price: product.price,
  priceCurrency: "USD",
  availability: product.inStock ? "InStock" : "OutOfStock",
  brand: product.brand,
  sku: product.sku,
  images: [product.image],
  ratingValue: product.rating,
  reviewCount: product.reviewCount,
});

// 3. Breadcrumb navigation
const breadcrumb = createBreadcrumbSchema([
  { name: "Home", url: SITE_URL },
  { name: "Products", url: `${SITE_URL}/products` },
  { name: product.name, url },
]);

// 4. Render
<head>
  <SEOHead {...pageConfig} />
  <JsonLd data={productSchema} />
  <JsonLd data={breadcrumb} />
</head>

Features Demonstrated

createProductSchema

Generates Product JSON-LD with Offer, Brand, and AggregateRating sub-types.

Dynamic Data

SEO config built from product data — works with any CMS or database.

OG Product Type

Open Graph type set to "product" for rich e-commerce sharing previews.

Availability

InStock/OutOfStock availability mapped to schema.org values automatically.

VIEW

Right-click → View Page Source to see the Product schema with Offer, Brand, AggregateRating, and BreadcrumbList in the actual HTML.