BLOG-48 feat: add structured data component for improved SEO and metadata handling

frontend/src/app.html

@@ -14,9 +14,7 @@
 		/>
 
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>魚之魷魂 SquidSpirit</title>
 
-		<meta name="description" content="程式、科技、教學、分享" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link

frontend/src/lib/home/framework/ui/HomePage.svelte

@@ -6,7 +6,8 @@
 </script>
 
 <svelte:head>
-	<title>{generateTitle()}</title>
+	<title>{generateTitle('程式、科技、教學、分享')}</title>
+	<!-- The meta description is set in `Terminal` -->
 </svelte:head>
 <div>
 	<TitleScreen />

frontend/src/lib/home/framework/ui/Terminal.svelte

@@ -52,6 +52,9 @@
 	}
 </script>
 
+<svelte:head>
+	<meta name="description" content="{lines.join('，')}" />
+</svelte:head>
 <div
 	class="container flex flex-col items-center justify-center gap-y-2.5 py-32 md:gap-y-8 md:px-24 md:py-32"
 >

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,6 +20,15 @@
 
 <svelte:head>
 	<title>{generateTitle(state.data?.info.title)}</title>
+	{#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">
 	{#if state.data}

frontend/src/lib/post/framework/ui/PostOverallPage.svelte

@@ -12,6 +12,7 @@
 
 <svelte:head>
 	<title>{generateTitle('文章')}</title>
+	<meta name="description" content="探索 魚之魷魂 SquidSpirit 的所有文章，這裡是您尋找最新技術洞見與實用教學的園地。" />
 </svelte:head>
 <div class="container pb-10">
 	<h1 class="py-9 text-center text-3xl font-bold text-gray-800 md:py-20 md:text-5xl">文章</h1>

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