Merge pull request #311 from Gongjakso/Refactor/addRobotFileandSEOwor…

…k#302 🔀Refactor/addRobotFileandSEOwork#302 [Google Ads 및 SEO 작업 완료]
Gongjakso · Nov 11, 2024 · 408c806 · 408c806
2 parents c899288 + 4bd8acc
commit 408c806
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 22 deletions.
diff --git a/gongjakso/package-lock.json b/gongjakso/package-lock.json
diff --git a/gongjakso/package.json b/gongjakso/package.json
@@ -30,6 +30,7 @@
         "react-fullpage": "^0.1.19",
         "react-ga": "^3.3.1",
         "react-ga4": "^2.1.0",
+        "react-helmet-async": "^2.0.5",
         "react-hook-form": "^7.49.3",
         "react-intersection-observer": "^9.8.1",
         "react-multilevel-dropdown": "^4.0.0",

diff --git a/gongjakso/public/index.html b/gongjakso/public/index.html
@@ -22,30 +22,30 @@
 
   gtag('config', 'G-757LG6FY1Q');
 </script>
-<!-- HTML Meta Tags -->
-<title>공모전 팀빌딩 서비스 | 공작소 gongjakso</title>
-<meta name="description" content="귀찮은 공모전 팀 구인 과정은 이제 그만! 내가 원하는 조건에 맞추어 공모전 팀원을 모집해보세요.">
 
-<!-- Facebook Meta Tags -->
-<meta property="og:url" content="https://gongjakso.xyz">
-<meta property="og:type" content="website">
-<meta property="og:title" content="공모전 팀빌딩 서비스 | 공작소 gongjakso">
-<meta property="og:description" content="귀찮은 공모전 팀 구인 과정은 이제 그만! 내가 원하는 조건에 맞추어 공모전 팀원을 모집해보세요.">
-<meta property="og:image" content="https://opengraph.b-cdn.net/production/images/5585fb04-c501-4717-8122-8c9d3d05f246.png?token=hOfHzJ7eKbz1nuru47epxsiWBHDGHpfIodgv5PB7b0Y&height=557&width=1200&expires=33266696940">
-
-<!-- Twitter Meta Tags -->
-<meta name="twitter:card" content="summary_large_image">
-<meta property="twitter:domain" content="gongjakso.xyz">
-<meta property="twitter:url" content="https://gongjakso.xyz">
-<meta name="twitter:title" content="공모전 팀빌딩 서비스 | 공작소 gongjakso">
-<meta name="twitter:description" content="귀찮은 공모전 팀 구인 과정은 이제 그만! 내가 원하는 조건에 맞추어 공모전 팀원을 모집해보세요.">
-<meta name="twitter:image" content="https://opengraph.b-cdn.net/production/images/5585fb04-c501-4717-8122-8c9d3d05f246.png?token=hOfHzJ7eKbz1nuru47epxsiWBHDGHpfIodgv5PB7b0Y&height=557&width=1200&expires=33266696940">
-
-<!-- Meta Tags Generated via https://www.opengraph.xyz/ -->
 </head>
 
 <body>
   <div id="root"></div>
+
+  <!-- Event snippet for 페이지 조회 conversion page -->
+  <script>
+    function gtag_report_conversion(url) {
+      var callback = function () {
+        if (typeof(url) != 'undefined') {
+          window.location = url;
+        }
+      };
+      gtag('event', 'conversion', {
+          'send_to': 'AW-16763777373/-HQ6CPeV4ecZEN3iy7k-',
+          'value': 1.0,
+          'currency': 'KRW',
+          'event_callback': callback
+      });
+      return false;
+    }
+    </script>
+
 </body>
 <!-- Google Tag Manager (noscript) -->
 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KKNX2ZKD"

diff --git a/gongjakso/src/App.js b/gongjakso/src/App.js
@@ -5,6 +5,7 @@ import theme from './styles/theme';
 import { useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import NoMobilePage from './pages/NoMobilePage/NoMobilePage';
+import { HelmetProvider } from 'react-helmet-async';
 
 function App() {
     const isMobile = useMediaQuery({ query: '(max-width: 1023px)' });
@@ -13,8 +14,10 @@ function App() {
         <div className="container">
             <ThemeProvider theme={theme}>
                 <GlobalStyle />
-                {/* <Router /> */}
-                {isMobile ? <NoMobilePage /> : <Router />}
+                <HelmetProvider>
+                    {/* <Router /> */}
+                    {isMobile ? <NoMobilePage /> : <Router />}
+                </HelmetProvider>
             </ThemeProvider>
         </div>
     );

diff --git a/gongjakso/src/components/common/CountGuest/CountGuest.jsx b/gongjakso/src/components/common/CountGuest/CountGuest.jsx
@@ -6,7 +6,7 @@ const CountGuest = ({ isProject, maxGuests, onApply }) => {
     const [roles, setRoles] = useState({
         기획: 0,
         디자인: 0,
-        개발자: 0,
+        개발: 0,
         ...(isProject && { FE: 0, BE: 0 }),
         기타: 0,
     });

diff --git a/gongjakso/src/components/common/MetaTag/MetaTag.jsx b/gongjakso/src/components/common/MetaTag/MetaTag.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Helmet } from 'react-helmet-async';
+
+const MetaTag = props => {
+    return (
+        <Helmet>
+            <title>{props?.title}</title>
+            <meta name="description" content={props?.description} />
+            <meta name="keywords" content={props?.keywords} />
+            <meta property="og:type" content="website" />
+            <meta property="og:title" content={props?.title} />
+            <meta property="og:site_name" content={props?.title} />
+            <meta property="og:description" content={props?.description} />
+            <meta property="og:image" content={props?.imgsrc} />
+            <meta property="og:url" content={props?.url} />
+
+            <link rel="canonical" href={props?.url} />
+        </Helmet>
+    );
+};
+
+export default MetaTag;
diff --git a/gongjakso/src/pages/ContestListPage/ContestListPage.jsx b/gongjakso/src/pages/ContestListPage/ContestListPage.jsx
@@ -11,6 +11,7 @@ import ContestListBox from '../ContestListBox/ContestListBox';
 import Pagination from '../../components/Pagination/Pagination';
 import { getContestList } from '../../service/post_service';
 import Modal1 from '../../features/modal/LoginModal1';
+import MetaTag from '../../components/common/MetaTag/MetaTag';
 
 const ContestListPage = () => {
     const [banners, setBanners] = useState([]);
@@ -101,6 +102,13 @@ const ContestListPage = () => {
 
     return (
         <>
+            <MetaTag
+                title="공모전리스트"
+                description="다양한 공모전에 참여해보세요."
+                keywords="공모전, 참여, 팀빌딩, 기획, 디자인, 개발, IT"
+                imgsrc="https://opengraph.b-cdn.net/production/images/5585fb04-c501-4717-8122-8c9d3d05f246.png?token=hOfHzJ7eKbz1nuru47epxsiWBHDGHpfIodgv5PB7b0Y&height=557&width=1200&expires=33266696940"
+                url="https://gongjakso.xyz/contestList"
+            />
             <TopButton />
             <S.MainContent>
                 <S.Div>

diff --git a/gongjakso/src/pages/HomePage/HomePage.jsx b/gongjakso/src/pages/HomePage/HomePage.jsx
@@ -9,6 +9,7 @@ import TopButton from '../../pages/HomePage/TopButton';
 import Banner from './Banner';
 import { getMyInfo } from '../../service/auth_service';
 import { useNavigate } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
 
 const HomePage = () => {
     const authenticated = localStorage.getItem('accessToken');
@@ -53,6 +54,49 @@ const HomePage = () => {
 
     return (
         <>
+            <Helmet>
+                {/* <!-- HTML Meta Tags --> */}
+                <title>공모전 팀빌딩 서비스 | 공작소 gongjakso</title>
+                <meta
+                    name="description"
+                    content="귀찮은 공모전 팀 구인 과정은 이제 그만! 내가 원하는 조건에 맞추어 공모전 팀원을 모집해보세요."
+                />
+
+                {/* <!-- Facebook Meta Tags --> */}
+                <meta property="og:url" content="https://gongjakso.xyz" />
+                <meta property="og:type" content="website" />
+                <meta
+                    property="og:title"
+                    content="공모전 팀빌딩 서비스 | 공작소 gongjakso"
+                />
+                <meta
+                    property="og:description"
+                    content="귀찮은 공모전 팀 구인 과정은 이제 그만! 내가 원하는 조건에 맞추어 공모전 팀원을 모집해보세요."
+                />
+                <meta
+                    property="og:image"
+                    content="https://opengraph.b-cdn.net/production/images/5585fb04-c501-4717-8122-8c9d3d05f246.png?token=hOfHzJ7eKbz1nuru47epxsiWBHDGHpfIodgv5PB7b0Y&height=557&width=1200&expires=33266696940"
+                />
+
+                {/* <!-- Twitter Meta Tags --> */}
+                <meta name="twitter:card" content="summary_large_image" />
+                <meta property="twitter:domain" content="gongjakso.xyz" />
+                <meta property="twitter:url" content="https://gongjakso.xyz" />
+                <meta
+                    name="twitter:title"
+                    content="공모전 팀빌딩 서비스 | 공작소 gongjakso"
+                />
+                <meta
+                    name="twitter:description"
+                    content="귀찮은 공모전 팀 구인 과정은 이제 그만! 내가 원하는 조건에 맞추어 공모전 팀원을 모집해보세요."
+                />
+                <meta
+                    name="twitter:image"
+                    content="https://opengraph.b-cdn.net/production/images/5585fb04-c501-4717-8122-8c9d3d05f246.png?token=hOfHzJ7eKbz1nuru47epxsiWBHDGHpfIodgv5PB7b0Y&height=557&width=1200&expires=33266696940"
+                />
+
+                {/* <!-- Meta Tags Generated via https://www.opengraph.xyz/ --> */}
+            </Helmet>
             <TopButton />
             <S.HomeContent className="home-section">
                 <S.TitleWrapper>

diff --git a/gongjakso/src/pages/PostMainPage/PostMainPage.jsx b/gongjakso/src/pages/PostMainPage/PostMainPage.jsx
@@ -15,6 +15,7 @@ import TeamBox from '../TeamBox/TeamBox';
 import Modal2 from '../../features/modal/LoginModal2';
 import Modal1 from '../../features/modal/LoginModal1';
 import NoContents from '../../features/NoContents/NoContents';
+import MetaTag from '../../components/common/MetaTag/MetaTag';
 
 const PostMainPage = () => {
     const authenticated = localStorage.getItem('accessToken');
@@ -184,6 +185,13 @@ const PostMainPage = () => {
 
     return (
         <>
+            <MetaTag
+                title="공모전공고"
+                description="공모전 공고들을 모아볼 수 있는 페이지"
+                keywords="공모전, 프로젝트, 팀빌딩, 개발, 기획, 디자인"
+                imgsrc="https://opengraph.b-cdn.net/production/images/5585fb04-c501-4717-8122-8c9d3d05f246.png?token=hOfHzJ7eKbz1nuru47epxsiWBHDGHpfIodgv5PB7b0Y&height=557&width=1200&expires=33266696940"
+                url="https://gongjakso.xyz/contest"
+            />
             <TopButton />
             <S.MainContent>
                 <S.Div>

diff --git a/gongjakso/src/pages/ProfilePage/ProfilePage.jsx b/gongjakso/src/pages/ProfilePage/ProfilePage.jsx
@@ -16,6 +16,7 @@ import {
     getExistPortfolio,
     deleteExistPortfolio,
 } from '../../service/portfolio_service';
+import MetaTag from '../../components/common/MetaTag/MetaTag';
 
 const MAX_PORTFOLIOS = 3;
 
@@ -297,6 +298,13 @@ const ProfilePage = () => {
 
     return (
         <div style={{ paddingBottom: '10rem' }}>
+            <MetaTag
+                title="프로필페이지"
+                description="내 정보를 확인해봐요."
+                keywords="포트폴리오, 스크랩, 팀빌딩, 모집, 참여, 공모전"
+                imgsrc="https://opengraph.b-cdn.net/production/images/5585fb04-c501-4717-8122-8c9d3d05f246.png?token=hOfHzJ7eKbz1nuru47epxsiWBHDGHpfIodgv5PB7b0Y&height=557&width=1200&expires=33266696940"
+                url="https://gongjakso.xyz/contestList"
+            />
             <S.TopBox>
                 <S.InfoBox>
                     <S.DetailBox>