feat: SEO 컴포넌트 생성 및 적용 (#410)

sopt-makers · Sep 17, 2023 · d60a03d · d60a03d
1 parent 7161948
commit d60a03d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,5 +1,4 @@
 import type { AppProps } from 'next/app';
-import Head from 'next/head';
 import Script from 'next/script';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
@@ -15,6 +14,7 @@ import ChannelService from '@utils/ChannelService';
 import { api, playgroundApi } from '@api/index';
 import { fetchMyProfile } from '@api/user';
 import { OverlayProvider } from '@hooks/useOverlay/OverlayProvider';
+import SEO from '@components/seo/SEO';
 
 function MyApp({ Component, pageProps }: AppProps) {
   const [queryClient] = React.useState(() => new QueryClient());
@@ -75,9 +75,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Head>
-        <title>SOPT Playground</title>
-      </Head>
+      <SEO />
       <Script
         id="gtag-base"
         strategy="afterInteractive"

diff --git a/public/assets/images/thumbnail.jpg b/public/assets/images/thumbnail.jpg
diff --git a/src/components/seo/SEO.tsx b/src/components/seo/SEO.tsx
@@ -0,0 +1,25 @@
+import Head from 'next/head';
+
+const SEO = () => {
+  return (
+    <Head>
+      <title>SOPT Playground</title>
+      <meta name="description" content="솝트와 더 친해지고 싶으신가요?" />
+      <meta property="og:type" content="website" />
+      <meta property="og:site_name" content="SOPT Playground" />
+      <meta property="og:title" content="SOPT ㅣ 모임 신청·개설하기" />
+      <meta property="og:description" content="솝트와 더 친해지고 싶으신가요?" />
+      <meta property="og:image" content="/assets/images/thumbnail.jpg" />
+      <meta property="og:url" content="https://playground.sopt.org/group" />
+      <meta property="og:locale" content="ko_KR" />
+      <meta property="twitter:card" content="summary" />
+      <meta property="twitter:site" content="SOPT Playground" />
+      <meta property="twitter:title" content="SOPT ㅣ 모임 신청·개설하기" />
+      <meta property="twitter:description" content="솝트와 더 친해지고 싶으신가요?" />
+      <meta property="twitter:image" content="/assets/images/thumbnail.jpg" />
+      <meta property="twitter:url" content="https://playground.sopt.org/group" />
+    </Head>
+  );
+};
+
+export default SEO;