Merge pull request #26 from hayato-osh/feature/seo

最低限の SEO の設定
hayato-osh · Apr 15, 2024 · 26863e7 · 26863e7
2 parents 432d56c + 355decc
commit 26863e7
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
 		"@astrojs/check": "^0.5.10",
 		"@astrojs/tailwind": "^5.1.0",
 		"astro": "^4.6.1",
+		"astro-seo": "^0.8.3",
 		"tailwindcss": "^3.4.3",
 		"typescript": "^5.4.5"
 	},

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,9 +1,13 @@
 ---
+import { config } from "@/config";
 import ThemeIcon from "./ThemeIcon.astro";
 ---
-<header class="h-8 flex items-center justify-between">
-  <nav>
-    <a href="/tags">tags</a>
-  </nav>
-  <ThemeIcon />
+<header class="h-12 flex items-center justify-between">
+  <a href="/" class="font-bold">{config.website}</a>
+  <div class="grid grid-cols-[1fr_max-content] items-center gap-2 sm:gap-4">
+    <nav>
+      <a href="/tags" class="underline">tags</a>
+    </nav>
+    <ThemeIcon />
+  </div>
 </header>
diff --git a/src/config.ts b/src/config.ts
@@ -0,0 +1,6 @@
+export const author = "fastman";
+export const config = {
+	title: `${author} のブログ`,
+	description: `${author} のブログです`,
+	website: "blog.fastman.dev",
+};
diff --git a/src/layouts/GlobalLayout.astro b/src/layouts/GlobalLayout.astro
@@ -2,12 +2,26 @@
 import { ViewTransitions } from "astro:transitions";
 import Footer from "@/components/Footer.astro";
 import Header from "@/components/Header.astro";
+import { config } from "@/config";
+import { SEO } from "astro-seo";
+
+interface Props {
+	title: string;
+	desc?: string | undefined;
+}
+
+const { title, desc } = Astro.props;
 ---
 <html lang="ja" class="h-full">
   <head>
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
-    <meta charset="UTF-8" />
+
+    <SEO
+      charset="utf-8"
+      title={title}
+      description={desc ?? config.description}
+    />
 
     <ViewTransitions />
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,11 +1,12 @@
 ---
 import GlobalLayout from "@/layouts/GlobalLayout.astro";
+import { generateTitle } from "@/utils/generateTitle";
 import { getPosts } from "@/utils/getPosts";
 
 const posts = await getPosts();
 ---
 
-<GlobalLayout>
+<GlobalLayout title={generateTitle('ホーム')}>
 	<main>
 		<ul>
 			{posts.map(post => (

diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
@@ -17,7 +17,7 @@ type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 const { entry } = Astro.props;
 const { Content } = await entry.render();
 ---
-<GlobalLayout>
+<GlobalLayout title={entry.data.title} desc={entry.data.description}>
 	<Post post={entry}>
   	<Content />
 	</Post>

diff --git a/src/pages/tags/[...tag].astro b/src/pages/tags/[...tag].astro
@@ -1,5 +1,6 @@
 ---
 import GlobalLayout from "@/layouts/GlobalLayout.astro";
+import { generateTitle } from "@/utils/generateTitle";
 import { getTags } from "@/utils/getTags";
 import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
 
@@ -16,7 +17,7 @@ type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 const { tag } = Astro.params;
 const { posts } = Astro.props;
 ---
-<GlobalLayout>
+<GlobalLayout title={generateTitle(tag, 'タグ一覧')}>
   <p>{tag} 一覧</p>
   <ul class="grid gap-2">
     {posts.map((post) => (

diff --git a/src/pages/tags/index.astro b/src/pages/tags/index.astro
@@ -1,10 +1,11 @@
 ---
 import GlobalLayout from "@/layouts/GlobalLayout.astro";
+import { generateTitle } from "@/utils/generateTitle";
 import { getTags } from "@/utils/getTags";
 
 const tags = await getTags();
 ---
-<GlobalLayout>
+<GlobalLayout title={generateTitle('タグ一覧')}>
   <ul class="grid gap-2">
     {Array.from(tags).map(([key, value]) => (
       <li class="grid gap-1">

diff --git a/src/utils/generateTitle.ts b/src/utils/generateTitle.ts
@@ -0,0 +1,4 @@
+import { config } from "@/config";
+
+export const generateTitle = (leftTitle: string, rightTitle = config.title) =>
+	`${leftTitle} | ${rightTitle}`;