BLOG-48 SEO Improvement (#116)

### Description

#### Overview
This PR improves the website's SEO by:
1. Moving title and meta description tags from app.html to individual page components
2. Adding dynamic meta descriptions based on page content
3. Implementing structured data for blog posts using JSON-LD
4. Optimizing meta descriptions for better search engine visibility

#### Changes
- **app.html**: Removed static title and meta description tags
- **HomePage.svelte**: Added descriptive title parameter to generateTitle function
- **Terminal.svelte**: Dynamically generates meta description from terminal lines
- **PostContentPage.svelte**: Added meta description and structured data for blog posts
- **PostOverallPage.svelte**: Added descriptive meta description for blog listing page
- **StructuredData.svelte**: Created new component to generate JSON-LD structured data for blog posts

#### Benefits
- Improved SEO through better metadata management
- Enhanced search engine visibility with structured data
- More accurate and dynamic meta descriptions
- Better control over page-specific metadata

> [!NOTE]
> Since sitemap auto generating is a little more complex, it will be solved in #117 in the future.

### Package Changes

_No response_

### Screenshots

_No response_

### Reference

Resolves #48

### Checklist

- [x] A milestone is set
- [x] The related issuse has been linked to this branch

Reviewed-on: #116
Co-authored-by: SquidSpirit <squid@squidspirit.com>
Co-committed-by: SquidSpirit <squid@squidspirit.com>

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,10 @@
 
 <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,30 @@
+<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
+	});
+
+	const jsonLdScript = $derived(
+		`<script type="application/ld+json">${JSON.stringify(structuredData)}${'<'}/script>`
+	);
+</script>
+
+{@html jsonLdScript}