Add Schema.org JSON-LD structured data for SEO

Implemented comprehensive Schema.org structured data across the blog to improve SEO and enable rich snippets in search results.

Changes:
- Created JSON-LD helper component for safe schema rendering
- Added BlogPosting schema to blog posts with:
  * Article metadata (headline, description, image, dates)
  * Author and publisher information
  * Keywords and article sections from tags
- Added BreadcrumbList schema to blog posts for navigation
- Added WebSite and Organization schemas to root layout
  * Site-wide identity and branding
  * Search action for site search functionality
- Added CollectionPage schema to homepage
  * Blog collection metadata
- Added WebPage schema to static pages
  * Page metadata with dates and images

Benefits:
- Rich snippets in Google/Bing search results
- Better content understanding by search engines
- Article cards with images, dates, authors in SERPs
- Breadcrumb navigation in search results
- Improved SEO ranking signals

All schemas validated against Schema.org specifications and include proper Chinese language support.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/blog/[slug]/page.tsx

@@ -12,6 +12,7 @@ import { PostCard } from '@/components/post-card';
 import { PostStorylineNav } from '@/components/post-storyline-nav';
 import { SectionDivider } from '@/components/section-divider';
 import { FooterCue } from '@/components/footer-cue';
+import { JsonLd } from '@/components/json-ld';
 
 export function generateStaticParams() {
   return allPosts.map((post) => ({
@@ -76,8 +77,88 @@ export default async function BlogPostPage({ params }: Props) {
 
   const hasToc = /<h[23]/.test(post.body.html);
 
+  // Generate absolute URL for the post
+  const postUrl = `${siteConfig.url}${post.url}`;
+
+  // Get the OG image URL (same as in metadata)
+  const ogImageUrl = new URL('/api/og', siteConfig.url);
+  ogImageUrl.searchParams.set('title', post.title);
+  if (post.description) {
+    ogImageUrl.searchParams.set('description', post.description);
+  }
+  if (post.tags && post.tags.length > 0) {
+    ogImageUrl.searchParams.set('tags', post.tags.slice(0, 3).join(','));
+  }
+
+  // Get image URL - prefer feature_image, fallback to OG image
+  const imageUrl = post.feature_image
+    ? `${siteConfig.url}${post.feature_image.replace('../assets', '/assets')}`
+    : ogImageUrl.toString();
+
+  // BlogPosting Schema
+  const blogPostingSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'BlogPosting',
+    headline: post.title,
+    description: post.description || post.custom_excerpt || post.title,
+    image: imageUrl,
+    datePublished: post.published_at,
+    dateModified: post.updated_at || post.published_at,
+    author: {
+      '@type': 'Person',
+      name: post.authors?.[0] || siteConfig.author,
+      url: siteConfig.url,
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: siteConfig.name,
+      logo: {
+        '@type': 'ImageObject',
+        url: `${siteConfig.url}${siteConfig.avatar}`,
+      },
+    },
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': postUrl,
+    },
+    ...(post.tags && post.tags.length > 0 && {
+      keywords: post.tags.join(', '),
+      articleSection: post.tags[0],
+    }),
+    inLanguage: siteConfig.defaultLocale,
+    url: postUrl,
+  };
+
+  // BreadcrumbList Schema
+  const breadcrumbSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: [
+      {
+        '@type': 'ListItem',
+        position: 1,
+        name: '首頁',
+        item: siteConfig.url,
+      },
+      {
+        '@type': 'ListItem',
+        position: 2,
+        name: '所有文章',
+        item: `${siteConfig.url}/blog`,
+      },
+      {
+        '@type': 'ListItem',
+        position: 3,
+        name: post.title,
+        item: postUrl,
+      },
+    ],
+  };
+
   return (
     <>
+      <JsonLd data={blogPostingSchema} />
+      <JsonLd data={breadcrumbSchema} />
       <ReadingProgress />
       <PostLayout hasToc={hasToc} contentKey={slug}>
         <div className="space-y-8">

app/layout.tsx

@@ -4,6 +4,7 @@ import { siteConfig } from '@/lib/config';
 import { LayoutShell } from '@/components/layout-shell';
 import { ThemeProvider } from 'next-themes';
 import { Playfair_Display } from 'next/font/google';
+import { JsonLd } from '@/components/json-ld';
 
 const playfair = Playfair_Display({
   subsets: ['latin'],
@@ -49,9 +50,48 @@ export default function RootLayout({
 }) {
   const theme = siteConfig.theme;
 
+  // WebSite Schema
+  const websiteSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: siteConfig.title,
+    description: siteConfig.description,
+    url: siteConfig.url,
+    inLanguage: siteConfig.defaultLocale,
+    author: {
+      '@type': 'Person',
+      name: siteConfig.author,
+      url: siteConfig.url,
+    },
+    potentialAction: {
+      '@type': 'SearchAction',
+      target: {
+        '@type': 'EntryPoint',
+        urlTemplate: `${siteConfig.url}/blog?search={search_term_string}`,
+      },
+      'query-input': 'required name=search_term_string',
+    },
+  };
+
+  // Organization Schema
+  const organizationSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'Organization',
+    name: siteConfig.name,
+    url: siteConfig.url,
+    logo: `${siteConfig.url}${siteConfig.avatar}`,
+    sameAs: [
+      siteConfig.social.github,
+      siteConfig.social.twitter && `https://twitter.com/${siteConfig.social.twitter.replace('@', '')}`,
+      siteConfig.social.mastodon,
+    ].filter(Boolean),
+  };
+
   return (
     <html lang={siteConfig.defaultLocale} suppressHydrationWarning className={playfair.variable}>
       <body>
+        <JsonLd data={websiteSchema} />
+        <JsonLd data={organizationSchema} />
         <style
           // Set CSS variables for accent colors (light + dark variants)
           dangerouslySetInnerHTML={{

app/page.tsx

@@ -4,11 +4,34 @@ import { siteConfig } from '@/lib/config';
 import { PostListItem } from '@/components/post-list-item';
 import { TimelineWrapper } from '@/components/timeline-wrapper';
 import { SidebarLayout } from '@/components/sidebar-layout';
+import { JsonLd } from '@/components/json-ld';
 
 export default function HomePage() {
   const posts = getAllPostsSorted().slice(0, siteConfig.postsPerPage);
 
+  // CollectionPage Schema for homepage
+  const collectionPageSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'CollectionPage',
+    name: `${siteConfig.name} 的最新動態`,
+    description: siteConfig.description,
+    url: siteConfig.url,
+    inLanguage: siteConfig.defaultLocale,
+    isPartOf: {
+      '@type': 'WebSite',
+      name: siteConfig.title,
+      url: siteConfig.url,
+    },
+    about: {
+      '@type': 'Blog',
+      name: siteConfig.title,
+      description: siteConfig.description,
+    },
+  };
+
   return (
+    <>
+      <JsonLd data={collectionPageSchema} />
       <section className="space-y-6">
       <SidebarLayout>
         <header className="space-y-1 text-center">
@@ -40,5 +63,6 @@ export default function HomePage() {
         </div>
       </SidebarLayout>
     </section>
+    </>
   );
 }

app/pages/[slug]/page.tsx

@@ -9,6 +9,7 @@ import { ReadingProgress } from '@/components/reading-progress';
 import { PostLayout } from '@/components/post-layout';
 import { ScrollReveal } from '@/components/scroll-reveal';
 import { SectionDivider } from '@/components/section-divider';
+import { JsonLd } from '@/components/json-ld';
 
 export function generateStaticParams() {
   return allPages.map((page) => ({
@@ -39,8 +40,39 @@ export default async function StaticPage({ params }: Props) {
 
   const hasToc = /<h[23]/.test(page.body.html);
 
+  // Generate absolute URL for the page
+  const pageUrl = `${siteConfig.url}${page.url}`;
+
+  // Get image URL if available
+  const imageUrl = page.feature_image
+    ? `${siteConfig.url}${page.feature_image.replace('../assets', '/assets')}`
+    : `${siteConfig.url}${siteConfig.ogImage}`;
+
+  // WebPage Schema
+  const webPageSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    name: page.title,
+    description: page.description || page.title,
+    url: pageUrl,
+    image: imageUrl,
+    inLanguage: siteConfig.defaultLocale,
+    isPartOf: {
+      '@type': 'WebSite',
+      name: siteConfig.title,
+      url: siteConfig.url,
+    },
+    ...(page.published_at && {
+      datePublished: page.published_at,
+    }),
+    ...(page.updated_at && {
+      dateModified: page.updated_at,
+    }),
+  };
+
   return (
     <>
+      <JsonLd data={webPageSchema} />
       <ReadingProgress />
       <PostLayout hasToc={hasToc} contentKey={slug}>
         <div className="space-y-8">

components/json-ld.tsx

@@ -0,0 +1,12 @@
+/**
+ * JSON-LD component for rendering structured data
+ * Safely serializes and injects Schema.org structured data into the page
+ */
+export function JsonLd({ data }: { data: Record<string, any> }) {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
+    />
+  );
+}