feat(seo): next-seo 적용 (#39)

* fix(style): darkmode text color 고정 * chore(package): next-seo 적용 * feat(app): next-seo 적용
TeamHavit · Oct 2, 2023 · 0bb87dd · 0bb87dd
1 parent 21c31e6
commit 0bb87dd
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 />