feat: add opengraph to main pages

bibbi-team · Jan 31, 2024 · 8d7dfd7 · 8d7dfd7
1 parent bb80271
commit 8d7dfd7
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 15 deletions.
diff --git a/components/BBiBBiHead.tsx b/components/BBiBBiHead.tsx
@@ -0,0 +1,18 @@
+import Head from "next/head";
+
+export default function BBiBBiHead({title, description}: {title: string, description: string}) {
+  return (
+    <>
+        <Head>
+            <title>{title}</title>
+            <meta name="description" content={description} />
+            <meta name="og:title" content="삐삐 - 가족 일상 위젯" />
+            <meta name="og:url" content="https://no5ing.kr/" />
+            <meta name="og:description" content="하루 한 번 가족에게 보내는 생존신고 위젯, 삐삐" />
+            <meta name="og:image" content="https://no5ing.kr/og_image.png" />
+            <meta name="og:image:width" content="800" />
+            <meta name="og:image:height" content="400" />
+        </Head>
+    </>
+  );
+}
diff --git a/pages/404.tsx b/pages/404.tsx
@@ -2,14 +2,11 @@ import Image from "next/image";
 import verySad from '../public/very_sad.svg'
 import './globals.css'
 import * as React from "react";
-import Head from "next/head";
+import BBiBBiHead from "@/components/BBiBBiHead";
 
 export default function NotFound() {
     return <div className={"flex flex-col justify-center items-center h-screen w-screen gap-8"}>
-        <Head>
-            <title>삐삐 - 찾을 수 없음</title>
-            <meta name="description" content="삐삐 소개 페이지" />
-        </Head>
+        <BBiBBiHead title={"삐삐 - 찾을 수 없음"} description={"삐삐 소개 페이지"} />
         <Image src={verySad} width={200} height={200} alt={"logo"} />
         <div className={"text-center text-lg text-gray-300"}>
             <span>페이지를 찾을 수 없어요</span>

diff --git a/pages/[pageId].tsx b/pages/[pageId].tsx
@@ -6,6 +6,7 @@ import {NotionAPI} from "notion-client";
 import NotionPage from "@/components/NotionPage";
 import {GetStaticPropsContext} from "next";
 import Head from "next/head";
+import BBiBBiHead from "@/components/BBiBBiHead";
 
 
 const rootNotionPageId = 'Bibbi-c3dd457b32564f369c1a08c42c0ab00e';
@@ -36,10 +37,7 @@ export async function getStaticPaths() {
 
 export default function Page({ recordMap }: { recordMap: ExtendedRecordMap }) {
     return <>
-        <Head>
-            <title>삐삐 - 소개 페이지</title>
-            <meta name="description" content="삐삐 소개 페이지" />
-        </Head>
+        <BBiBBiHead title={"삐삐 - 소개 페이지"} description={"삐삐 소개 페이지"} />
         <NotionPage recordMap={recordMap} />
     </>
 }
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -2,16 +2,12 @@ import 'react-notion-x/src/styles.css';
 import { ExtendedRecordMap } from "notion-types";
 import {NotionAPI} from "notion-client";
 import NotionPage from "@/components/NotionPage";
-import {Metadata} from "next";
-import Head from "next/head";
+import BBiBBiHead from "@/components/BBiBBiHead";
 
 export default function MainPage({ recordMap }: { recordMap: ExtendedRecordMap }) {
     if(!recordMap) return <></>
     return <>
-        <Head>
-            <title>삐삐 - 소개 페이지</title>
-            <meta name="description" content="삐삐 소개 페이지" />
-        </Head>
+        <BBiBBiHead title={"삐삐 - 소개 페이지"} description={"삐삐 소개 페이지"} />
         <NotionPage recordMap={recordMap} />
     </>
 }