diff --git a/package-lock.json b/package-lock.json
index cd94114..f059d16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "eslint": "8.38.0",
         "eslint-config-next": "13.3.0",
         "next": "13.3.0",
+        "next-seo": "^6.1.0",
         "react": "18.2.0",
         "react-device-detect": "^2.2.3",
         "react-dom": "18.2.0",
@@ -5144,6 +5145,16 @@
         }
       }
     },
+    "node_modules/next-seo": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/next-seo/-/next-seo-6.1.0.tgz",
+      "integrity": "sha512-iMBpFoJsR5zWhguHJvsoBDxDSmdYTHtnVPB1ij+CD0NReQCP78ZxxbdL9qkKIf4oEuZEqZkrjAQLB0bkII7RYA==",
+      "peerDependencies": {
+        "next": "^8.1.1-canary.54 || >=9.0.0",
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
diff --git a/package.json b/package.json
index ccfa822..3d4274d 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
     "next": "13.3.0",
+    "next-seo": "^6.1.0",
     "react": "18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "18.2.0",
diff --git a/public/static/images/og-kakao.png b/public/static/images/og-kakao.png
new file mode 100644
index 0000000..b15f574
Binary files /dev/null and b/public/static/images/og-kakao.png differ
diff --git a/src/components/DetailCheck/DetailCheck.module.scss b/src/components/DetailCheck/DetailCheck.module.scss
index fc03a8a..7eeb5e7 100644
--- a/src/components/DetailCheck/DetailCheck.module.scss
+++ b/src/components/DetailCheck/DetailCheck.module.scss
@@ -25,6 +25,7 @@
     font-weight: 700;
     letter-spacing: -0.06em;
     text-align: center;
+    color: var(--black);
 
     @include tablet {
       margin-top: 5rem;
diff --git a/src/components/DetailEasy/DeatailEasy.tsx b/src/components/DetailEasy/DeatailEasy.tsx
index ceff1b7..7ec45cf 100644
--- a/src/components/DetailEasy/DeatailEasy.tsx
+++ b/src/components/DetailEasy/DeatailEasy.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Image from 'next/image';
 
-import onbardingSrc from '../../../public/static/images/onboarding.webp';
+import onboardingSrc from '../../../public/static/images/onboarding.webp';
 
 import Styles from './DetailEasy.module.scss';
 
@@ -26,7 +26,7 @@ export default function DetailEasy(): JSX.Element {
       <div className={Styles.DetailEasy__imageWrapper}>
         <div className={Styles.DetailEasy__imageWrapper__image}>
           <Image
-            src={onbardingSrc}
+            src={onboardingSrc}
             alt="onboarding image"
             style={{ width: '100%', height: 'auto' }}
             priority
diff --git a/src/components/DetailEasy/DetailEasy.module.scss b/src/components/DetailEasy/DetailEasy.module.scss
index cd60991..dc717d2 100644
--- a/src/components/DetailEasy/DetailEasy.module.scss
+++ b/src/components/DetailEasy/DetailEasy.module.scss
@@ -44,6 +44,7 @@
       margin-bottom: 2rem;
       font-size: 2.5rem;
       font-weight: 700;
+      color: var(--black);
 
       @include tablet {
         font-size: 2rem;
diff --git a/src/constants/objects/seo.ts b/src/constants/objects/seo.ts
new file mode 100644
index 0000000..86f8aad
--- /dev/null
+++ b/src/constants/objects/seo.ts
@@ -0,0 +1,47 @@
+export default {
+  titleTemplate: '%s | 기억하고 싶은 모든 콘텐츠를 내 손안에',
+  description: '기억하고 싶은 모든 콘텐츠를 내 손안에, HAVIT',
+  additionalLinkTags: [
+    {
+      rel: 'icon',
+      href: '/favicon.ico',
+    },
+    {
+      rel: 'apple-touch-icon',
+      sizes: '180x180',
+      href: '/apple-touch-icon.png',
+    },
+    {
+      rel: 'icon',
+      type: 'image/png',
+      sizes: '32x32',
+      href: '/favicon-32x32.png',
+    },
+    {
+      rel: 'icon',
+      type: 'image/png',
+      sizes: '16x16',
+      href: '/favicon-16x16.png',
+    },
+  ],
+  openGraph: {
+    type: 'website',
+    locale: 'ko_KR',
+    url: 'https://www.havit.app',
+    title: 'HAVIT | 기억하고 싶은 모든 콘텐츠를 내 손안에',
+    site_name: 'HAVIT',
+    images: [
+      {
+        url: '/static/images/og-kakao.png',
+        width: 800,
+        height: 400,
+        alt: 'og image for HAVIT',
+      },
+    ],
+  },
+  twitter: {
+    handle: '@handle',
+    site: 'havit.app',
+    cardType: 'summary_large_image',
+  },
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 4b80b9b..8b373cc 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -2,7 +2,15 @@ import '@/styles/globals.scss';
 import '../../public/static/fonts/style.css';
 
 import type { AppProps } from 'next/app';
+import { DefaultSeo } from 'next-seo';
+
+import SEO from '@/constants/objects/seo';
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <>
+      <DefaultSeo {...SEO} />
+      <Component {...pageProps} />
+    </>
+  );
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9621e4b..7af27f2 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import Head from 'next/head';
+import { NextSeo } from 'next-seo';
 
 import { Main } from '@/components/Main';
 import { DetailEasy } from '@/components/DetailEasy';
@@ -12,36 +12,7 @@ import styles from '@/styles/Home.module.scss';
 export default function Home() {
   return (
     <>
-      <Head>
-        <title>HAVIT | 기억하고 싶은 모든 콘텐츠를 내 손안에</title>
-        <meta
-          name="description"
-          content="기억하고 싶은 모든 콘텐츠를 내 손안에, HAVIT"
-        />
-        {/* <meta name="viewport" content="width=device-width, initial-scale=1" /> */}
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1"
-        ></meta>
-        <link rel="icon" href="/favicon.ico" />
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href="/apple-touch-icon.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href="/favicon-32x32.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href="/favicon-16x16.png"
-        />
-      </Head>
+      <NextSeo title="HAVIT" canonical="https://havit.app" />
       <main className={styles.main}>
         <Main />
         <DetailEasy />