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">

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>`}