Article Page Demo

<!-- Title with template -->
<title>Understanding React Server Components | Acme Store</title>
<meta name="description" content="A deep dive into React Server Components..." />
<link rel="canonical" href="https://acmestore.com/blog/react-server-components" />

<!-- Open Graph (Article type) -->
<meta property="og:title" content="Understanding React Server Components" />
<meta property="og:description" content="A deep dive into RSC architecture." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://acmestore.com/blog/react-server-components" />
<meta property="og:image" content="https://acmestore.com/images/rsc.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Acme Store" />

<!-- Twitter Card with creator -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@acmestore" />
<meta name="twitter:creator" content="@janedoe" />
<meta name="twitter:title" content="Understanding React Server Components" />
<meta name="twitter:description" content="A deep dive into RSC architecture." />
<meta name="twitter:image" content="https://acmestore.com/images/rsc.jpg" />

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Understanding React Server Components",
  "url": "https://acmestore.com/blog/react-server-components",
  "description": "A deep dive into RSC architecture.",
  "datePublished": "2025-06-15",
  "dateModified": "2025-07-01",
  "author": [
    { "@type": "Person", "name": "Jane Doe", "url": ".../authors/jane" },
    { "@type": "Person", "name": "John Smith" }
  ],
  "publisher": {
    "@type": "Organization",
    "name": "Acme Store",
    "logo": { "@type": "ImageObject", "url": ".../logo.png" }
  },
  "articleSection": "Technology",
  "keywords": ["React", "Server Components", "SSR", "RSC"]
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "position": 1, "name": "Home", "item": "https://acmestore.com" },
    { "position": 2, "name": "Blog", "item": "https://acmestore.com/blog" },
    { "position": 3, "name": "React Server Components", "item": "..." }
  ]
}
</script>

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

// 1. Merge page config with site defaults
const pageConfig = mergeSEOConfig(siteConfig, {
  title: "Understanding React Server Components",
  description: "A deep dive into React Server Components...",
  canonical: buildCanonicalUrl(SITE_URL, "/blog/react-server-components"),
  openGraph: {
    title: "Understanding React Server Components",
    description: "A deep dive into RSC architecture.",
    type: "article",
    url: `${SITE_URL}/blog/react-server-components`,
    images: [{
      url: `${SITE_URL}/images/rsc.jpg`,
      width: 1200,
      height: 630,
      alt: "React Server Components diagram",
    }],
  },
  twitter: {
    creator: "@janedoe",
    image: `${SITE_URL}/images/rsc.jpg`,
  },
});

// 2. Create structured data schemas
const articleSchema = createArticleSchema({
  headline: "Understanding React Server Components",
  url: `${SITE_URL}/blog/react-server-components`,
  description: "A deep dive into RSC architecture.",
  datePublished: "2025-06-15",
  dateModified: "2025-07-01",
  author: [
    { name: "Jane Doe", url: `${SITE_URL}/authors/jane` },
    { name: "John Smith" },
  ],
  publisher: { name: "Acme Store", logo: `${SITE_URL}/logo.png` },
  images: [`${SITE_URL}/images/rsc.jpg`],
  section: "Technology",
  keywords: ["React", "Server Components", "SSR", "RSC"],
});

const breadcrumb = createBreadcrumbSchema([
  { name: "Home", url: SITE_URL },
  { name: "Blog", url: `${SITE_URL}/blog` },
  { name: "React Server Components", url: `${SITE_URL}/blog/react-server-components` },
]);

// 3. Render in JSX
<head>
  <SEOHead {...pageConfig} />
  <JsonLd data={articleSchema} />
  <JsonLd data={breadcrumb} />
</head>