feat: seo

esc-chula · Feb 2, 2024 · fc4f7e3 · fc4f7e3
1 parent 2359394
commit fc4f7e3
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "@types/react-cookies": "0.1.3",
     "@types/react-dom": "^18.2.18",
     "astro": "^4.2.6",
+    "astro-seo": "0.8.0",
     "clsx": "2.0.0",
     "framer-motion": "10.16.16",
     "howler": "2.2.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/gearfest.webp b/public/gearfest.webp
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -6,22 +6,65 @@ import "@fontsource/ibm-plex-sans-thai/thai-500.css";
 import "@/styles/global.css";
 
 import { ViewTransitions } from "astro:transitions";
+import { SEO } from "astro-seo";
 import BGM from "@/components/story/BGM";
 interface Props {
   pageTitle?: string;
 }
 
-const { pageTitle = "GearFestival" } = Astro.props;
+const { pageTitle = "GearFestival | Find your cocktail !" } = Astro.props;
 ---
 
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} />
-    <meta name="theme-color" content="#864974" />
-    <title>{pageTitle}</title>
+    <SEO
+      title={pageTitle}
+      description="มาร่วมค้นหาค็อกเทลที่ตรงใจคุณกับงาน Gear Festival 2024 TU X CU ในวันที่ 2 กุมภาพันธ์ 2567 ติดตามรายละเอียดเพิ่มเติมได้ผ่านทาง IG: gearfestival_official"
+      openGraph={{
+        basic: {
+          title: pageTitle,
+          type: "website",
+          image: "/gearfest.webp",
+        },
+      }}
+      extend={{
+        // extending the default link tags
+        link: [{ rel: "icon", href: "/favicon.png", type: "image/svg+xml" }],
+        // extending the default meta tags
+        meta: [
+          {
+            name: "viewport",
+            content: "width=device-width, initial-scale=1",
+          },
+          {
+            name: "generator",
+            content: Astro.generator,
+          },
+          {
+            name: "theme-color",
+            content: "#864974",
+          },
+          {
+            name: "twitter:card",
+            content: "summary_large_image",
+          },
+          {
+            name: "twitter:title",
+            content: pageTitle,
+          },
+          {
+            name: "twitter:description",
+            content:
+              "มาร่วมค้นหาค็อกเทลที่ตรงใจคุณกับงาน Gear Festival 2024 TU X CU ในวันที่ 2 กุมภาพันธ์ 2567 ติดตามรายละเอียดเพิ่มเติมได้ผ่านทาง IG: gearfestival_official",
+          },
+          {
+            name: "twitter:image",
+            content: "/gearfest.webp",
+          },
+        ],
+      }}
+    />
     <ViewTransitions />
 
     <!-- Google tag (gtag.js) -->

diff --git a/src/pages/donate.astro b/src/pages/donate.astro
@@ -13,7 +13,7 @@ import kntuLogo from "@/assets/logo/kntu-logo.webp";
 import DonateCode from "@/assets/images/gearfest-donate.webp";
 ---
 
-<BaseLayout pageTitle="Login">
+<BaseLayout>
   <SignInBackground>
     <div
       class="relative flex h-full w-full flex-col items-center justify-center px-14 py-8"

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -12,7 +12,7 @@ import gearfestLogo from "@/assets/logo/gearfest-logo.webp";
 import kntuLogo from "@/assets/logo/kntu-logo.webp";
 ---
 
-<BaseLayout pageTitle="Login">
+<BaseLayout>
   <SignInBackground>
     <div
       class="relative flex h-full w-full flex-col items-center justify-center px-14 py-8"