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>
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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={{
|
||||
|
||||
26
app/page.tsx
26
app/page.tsx
@@ -4,12 +4,35 @@ 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 (
|
||||
<section className="space-y-6">
|
||||
<>
|
||||
<JsonLd data={collectionPageSchema} />
|
||||
<section className="space-y-6">
|
||||
<SidebarLayout>
|
||||
<header className="space-y-1 text-center">
|
||||
<h1 className="type-title font-bold text-slate-900 dark:text-slate-50">
|
||||
@@ -40,5 +63,6 @@ export default function HomePage() {
|
||||
</div>
|
||||
</SidebarLayout>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user