add meta description

app.vue

@@ -1,9 +1,14 @@
 <script lang="ts" setup>
 const title = "blog.kzhrk.com";
+const description = "kzhrk のブログ。プログラミングとか料理とか映像作品とか。";
 
 useHead(() => ({
 	title,
 	meta: [
+		{
+			name: "description",
+			content: description,
+		},
 		{
 			name: "twitter:card",
 			content: "summary_large_image",
@@ -16,6 +21,10 @@ useHead(() => ({
 			name: "twitter:title",
 			content: title,
 		},
+		{
+			property: "og:description",
+			content: description,
+		},
 		{
 			property: "og:image",
 			content: "https://blog.kzhrk.com/images/ogp.png",

pages/posts/[...slug].vue

@@ -17,16 +17,25 @@ const title = res.data.value.title;
 const metaTitle = `${title} | blog.kzhrk.com`;
 const html = res.data.value.html;
 const date = res.data.value.date;
+const description = res.data.value.description;
 const formatedDate = format(date, "yyyy年M月d日");
 const url = `https://blog.kzhrk.com/posts/${slug.join("/")}`;
 
 useHead(() => ({
 	title: metaTitle,
 	meta: [
+		{
+			name: "description",
+			content: description,
+		},
 		{
 			name: "twitter:title",
 			content: metaTitle,
 		},
+		{
+			property: "og:description",
+			content: description,
+		},
 		{
 			property: "og:url",
 			content: url,

server/api/posts/[...slug].ts

@@ -11,8 +11,13 @@ export default defineEventHandler(async (event) => {
 		content: string;
 	};
 	const html = parse(content);
+	const description = `${content
+		.replace(/##(#+)?\s/g, "")
+		.replace(/```(\w+)?(\r\n|\n|\r)/g, "")
+		.substring(0, 100)}...`;
 	return {
 		...metadata,
 		html,
+		description,
 	};
 });