refactor: update schema handling and improve SEO metadata

- Changed schema type from WithContext<Thing> to Thing[] in Head, BaseLayout, and JsonLd components for better flexibility.
- Added optional robots meta tag to Head component.
- Updated JSON-LD generation in JsonLd component to include a structured payload.
- Enhanced page and blog schemas to support breadcrumb and person schemas for improved SEO.
- Introduced new utility schemas for website and person to streamline schema generation.
- Refactored existing schemas to align with the new structure and ensure consistency across components.

2 files changed, 46 insertions, 18 deletions

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 3bd2c61..5ba6b3b 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -1,9 +1,13 @@
 ---
 import { type CollectionEntry, getCollection, render } from "astro:content";
-import Comments from "../../components/Comments.astro";
-import Layout from "../../layouts/BaseLayout.astro";
 import blogPostSchema from "../../utils/schemas/blogPostSchema";
+import breadcrumbSchema from "../../utils/schemas/breadcrumbSchema";
+import Comments from "../../components/Comments.astro";
 import dayjs from "dayjs";
+import Layout from "../../layouts/BaseLayout.astro";
+import personSchema from "../../utils/schemas/personSchema";
+import websiteSchema from "../../utils/schemas/websiteSchema";
+import { config } from "../../config";
 
 type Props = CollectionEntry<"blog">;
 
@@ -33,17 +37,31 @@ const dateModified = post.data.dateModified?.toISOString();
 const datePublished = post.data.datePublished.toISOString();
 const formattedDate = dayjs(post.data.datePublished.toString()).format("MMMM DD, YYYY");
 
-const schema = blogPostSchema({
-	siteUrl: new URL("/", Astro.site).toString(),
-	dateModified,
-	datePublished,
-	description,
-	isBasedOn,
-	lang,
-	preview,
-	slug,
-	title,
-});
+const siteUrl = new URL("/", Astro.site).toString();
+
+const schema = [
+	websiteSchema({ siteUrl, name: config.og.website, description, lang }),
+	personSchema({ siteUrl }),
+	blogPostSchema({
+		siteUrl,
+		dateModified,
+		datePublished,
+		description,
+		isBasedOn,
+		lang,
+		preview,
+		slug,
+		title,
+	}),
+	breadcrumbSchema({
+		siteUrl,
+		items: [
+			{ name: "Home", url: "/" },
+			{ name: "Blog", url: "/blog/" },
+			{ name: title, url: `/blog/${slug}` },
+		],
+	}),
+];
 ---
 
 <style lang="scss">
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 3a27111..aa1b46c 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -3,9 +3,11 @@ import type { CollectionEntry } from "astro:content";
 import { config } from "../../config";
 import { getCollection } from "astro:content";
 import blogSchema from "../../utils/schemas/blogSchema";
+import breadcrumbSchema from "../../utils/schemas/breadcrumbSchema";
 import Layout from "../../layouts/BaseLayout.astro";
 import PostElement from "../../components/PostElement.astro";
 import RSSIcon from "../../components/Icons/RSS.astro";
+import websiteSchema from "../../utils/schemas/websiteSchema";
 
 const posts = await getCollection("blog", ({ data }) => {
 	return data.draft !== true;
@@ -29,11 +31,19 @@ const description = "Explore Valentin Popov's blog on software development, tech
 const preview = config.og.defaultPreview;
 const lang = "en";
 
-const schema = blogSchema({
-	siteUrl: new URL("/", Astro.site).toString(),
-	title,
-	posts,
-});
+const siteUrl = new URL("/", Astro.site).toString();
+
+const schema = [
+	websiteSchema({ siteUrl, name: config.og.website, description, lang }),
+	blogSchema({ siteUrl, title, description, lang, posts }),
+	breadcrumbSchema({
+		siteUrl,
+		items: [
+			{ name: "Home", url: "/" },
+			{ name: "Blog", url: "/blog/" },
+		],
+	}),
+];
 ---
 
 <Layout title={title} description={description} preview={preview} lang={lang} schema={schema}>