✨ Head タグが正しくビルドされるようにした

package.json

@@ -56,6 +56,7 @@
     "bits-ui": "^0.21.2",
     "cheerio": "^1.0.0-rc.12",
     "highlight.js": "^11.9.0",
+    "just-extend": "^6.2.0",
     "microcms-js-sdk": "^3.1.0",
     "nanostores": "^0.10.2",
     "the-new-css-reset": "^1.11.2"

src/lib/assets/info.ts

@@ -8,7 +8,7 @@ export const INFO = {
     title: "MISC - 愛工大名電 情報システム部",
     description: "愛工大名電 情報システム部の公式サイトです。",
   },
-  url: "https://mise-mdn.dev",
+  url: "https://misc-mdn.dev",
   internal: {
     id: "misc-mdn",
     localStorageVersion: "1",

src/lib/utils/types/microcms.ts

@@ -11,9 +11,9 @@ type DateType = {
   revisedAt: string;
 };
 type Structure<T, P> = T extends "get"
-  ? { id: string } & DateType & Required<P>
+  ? { id: string } & DateType & P
   : T extends "gets"
-    ? GetsType<{ id: string } & DateType & Required<P>>
+    ? GetsType<{ id: string } & DateType & P>
     : Partial<DateType> & (T extends "patch" ? Partial<P> : P);
 
 export type Blogs<T = "get"> = Structure<

src/routes/+layout.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+  import extend from "just-extend";
+  import { MetaTags } from "svelte-meta-tags";
   import { setupViewTransition } from "sveltekit-view-transition";
+  import { page } from "$app/stores";
   import Footer from "$lib/components/Footer.svelte";
-  import HeadTags from "$lib/components/HeadTags.svelte";
   import Header from "$lib/components/Header.svelte";
 
   import "the-new-css-reset";
@@ -12,6 +14,10 @@
   import "$lib/styles/article.scss";
 
   setupViewTransition();
+
+  export let data;
+
+  $: metaTags = extend(true, {}, data.baseMetaTags, $page.data.pageMetaTags);
 </script>
 
 <svelte:head>
@@ -26,7 +32,7 @@
   </script>
 </svelte:head>
 
-<HeadTags />
+<MetaTags {...metaTags} />
 
 <div>
   <Header />

src/routes/+layout.ts

@@ -1,2 +1,41 @@
+import type { MetaTagsProps } from "svelte-meta-tags";
+import type { LayoutLoad } from "./$types";
+import { INFO } from "$lib/assets/info.js";
+
+export const load: LayoutLoad = ({ url }) => {
+  const image = new URL("/images/ogp.png", INFO.url).href;
+
+  const baseMetaTags = Object.freeze({
+    title: INFO.about.title,
+    description: INFO.about.description,
+    canonical: new URL(url.pathname, url.origin).href,
+    openGraph: {
+      type: "website",
+      url: new URL(url.pathname, url.origin).href,
+      locale: "ja_JP",
+      title: INFO.about.title,
+      description: INFO.about.description,
+      siteName: INFO.about.title,
+      images: [
+        {
+          url: image,
+          width: 1200,
+          height: 630,
+        },
+      ],
+    },
+    twitter: {
+      cardType: "summary_large_image",
+      title: INFO.about.title,
+      description: INFO.about.description,
+      image: image,
+    },
+  } as const satisfies MetaTagsProps);
+
+  return {
+    baseMetaTags,
+  };
+};
+
 export const prerender = true;
 export const trailingSlash = "always";

src/routes/+page.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { MetaTags } from "svelte-meta-tags";
   import type { PageData } from "./$types";
-  import { INFO } from "$lib/assets/info";
   import About from "$lib/components/About.svelte";
   import Arrow from "$lib/components/Arrow.svelte";
   import BlogList from "$lib/components/BlogList.svelte";
@@ -25,8 +23,6 @@
   });
 </script>
 
-<MetaTags title={INFO.about.title} />
-
 <div class="landing">
   <p>夢が現実になる、<wbr />未来への一歩を</p>
   <div class="arrow">

src/routes/about/+page.server.ts

@@ -0,0 +1,12 @@
+import type { MetaTagsProps } from "svelte-meta-tags";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async () => {
+  const pageMetaTags = Object.freeze({
+    title: "About",
+  } as const satisfies MetaTagsProps);
+
+  return {
+    pageMetaTags,
+  };
+};

src/routes/about/+page.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
   import Icon from "@iconify/svelte";
   import About from "$lib/components/About.svelte";
-  import HeadTags from "$lib/components/HeadTags.svelte";
   import Marker from "$lib/components/Marker.svelte";
 </script>
 
-<HeadTags title="ABOUT" />
-
 <h2>
   <Marker>about</Marker>
 </h2>

src/routes/blogs/+page.server.ts

@@ -1,10 +1,16 @@
+import type { MetaTagsProps } from "svelte-meta-tags";
 import type { PageServerLoad } from "./$types";
 import { getContentList } from "$lib/utils/services/microcms";
 
 export const load: PageServerLoad = async () => {
   const res = await getContentList("blogs");
 
+  const pageMetaTags = Object.freeze({
+    title: "Blogs",
+  } as const satisfies MetaTagsProps);
+
   return {
     blogList: res,
+    pageMetaTags,
   };
 };

src/routes/blogs/+page.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
   import type { PageData } from "./$types";
   import BlogList from "$lib/components/BlogList.svelte";
-  import HeadTags from "$lib/components/HeadTags.svelte";
   import Marker from "$lib/components/Marker.svelte";
 
   export let data: PageData;
 </script>
 
-<HeadTags title="BLOGS" />
-
 <h1>
   <Marker>blogs</Marker>
 </h1>

src/routes/blogs/[slug]/+page.server.ts

@@ -1,10 +1,36 @@
+import type { MetaTagsProps } from "svelte-meta-tags";
 import type { PageServerLoad } from "./$types";
+import { INFO } from "$lib/assets/info";
 import { getContentDetail } from "$lib/utils/services/microcms";
 
 export const load: PageServerLoad = async ({ params }) => {
   const { slug } = params;
   const res = await getContentDetail("blogs", slug);
+
+  const title = `${res.title} | Blogs | ${INFO.about.title}`;
+  const description = res.description ?? INFO.about.description;
+  const image = res.ogpImg?.url ?? new URL("/images/ogp.png", INFO.url).href;
+  const pageMetaTags = Object.freeze({
+    title,
+    openGraph: {
+      title,
+      description,
+      images: [
+        {
+          url: image,
+        },
+      ],
+    },
+    twitter: {
+      cardType: "summary_large_image",
+      title,
+      description,
+      image,
+    },
+  } as const satisfies MetaTagsProps);
+
   return {
     detail: res,
+    pageMetaTags,
   };
 };

src/routes/blogs/[slug]/+page.svelte

@@ -1,15 +1,8 @@
 <script lang="ts">
   import type { PageData } from "./$types";
   import BlogDetails from "$lib/components/BlogDetails.svelte";
-  import HeadTags from "$lib/components/HeadTags.svelte";
 
   export let data: PageData;
 </script>
 
-<HeadTags
-  title={data.detail.title}
-  description={data.detail.description}
-  ogpImgUrl={data.detail.ogpImg?.url}
-/>
-
 <BlogDetails details={data.detail} />