From a81e6cf1267ea5ba17400e5783c904ac70a17980 Mon Sep 17 00:00:00 2001
From: SquidSpirit <squid@squidspirit.com>
Date: Mon, 4 Aug 2025 13:02:34 +0800
Subject: [PATCH] BLOG-48 feat: add structured data component for improved SEO
 and metadata handling

---
 .../post/framework/ui/PostContentPage.svelte  |  9 ++++++-
 .../post/framework/ui/StructuredData.svelte   | 26 +++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/lib/post/framework/ui/StructuredData.svelte

diff --git a/frontend/src/lib/post/framework/ui/PostContentPage.svelte b/frontend/src/lib/post/framework/ui/PostContentPage.svelte
index 659f639..8bd038a 100644
--- a/frontend/src/lib/post/framework/ui/PostContentPage.svelte
+++ b/frontend/src/lib/post/framework/ui/PostContentPage.svelte
@@ -5,6 +5,7 @@
 	import markdownit from 'markdown-it';
 	import SafeHtml from '$lib/common/framework/ui/SafeHtml.svelte';
 	import generateTitle from '$lib/common/framework/ui/generateTitle';
+	import StructuredData from '$lib/post/framework/ui/StructuredData.svelte';
 
 	const { id }: { id: number } = $props();
 
@@ -19,8 +20,14 @@
 
 <svelte:head>
 	<title>{generateTitle(state.data?.info.title)}</title>
-	{#if state.data?.info.description}
+	{#if state.data}
 		<meta name="description" content={state.data.info.description} />
+		<StructuredData
+			headline={state.data.info.title}
+			description={state.data.info.description}
+			datePublished={state.data.info.publishedTime}
+			image={state.data.info.previewImageUrl}
+		/>
 	{/if}
 </svelte:head>
 <article class="container prose pb-10 prose-gray">
diff --git a/frontend/src/lib/post/framework/ui/StructuredData.svelte b/frontend/src/lib/post/framework/ui/StructuredData.svelte
new file mode 100644
index 0000000..2aac4e8
--- /dev/null
+++ b/frontend/src/lib/post/framework/ui/StructuredData.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	/* eslint-disable svelte/no-at-html-tags */
+
+	const {
+		headline,
+		description,
+		datePublished,
+		image
+	}: {
+		headline: string;
+		description: string;
+		datePublished: Date;
+		image: URL;
+	} = $props();
+
+	const structuredData = $derived({
+		'@context': 'https://schema.org',
+		'@type': 'BlogPosting',
+		headline: headline,
+		description: description,
+		datePublished: datePublished.toISOString(),
+		image: image.href
+	});
+</script>
+
+{@html `<script type="application/ld+json">${JSON.stringify(structuredData)}<\/script>`}