diff --git a/src/components/common/HTMLHead/index.tsx b/src/components/common/HTMLHead/index.tsx
new file mode 100644
index 00000000..0d02d5b5
--- /dev/null
+++ b/src/components/common/HTMLHead/index.tsx
@@ -0,0 +1,84 @@
+import Head from 'next/head';
+
+interface HeadProps {
+ projectTitle?: string;
+ projectID?: string;
+ projectImageURL?: string;
+}
+
+function HTMLHead(props: HeadProps) {
+ const { projectTitle, projectID, projectImageURL } = props;
+
+ return (
+
+ SOPT
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Twitter */}
+
+
+
+
+
+
+
+ {/* Open Graph */}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default HTMLHead;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index e56eab0b..333edd6b 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,11 +1,11 @@
import * as amplitude from '@amplitude/analytics-browser';
import type { AppProps } from 'next/app';
-import Head from 'next/head';
import { useRouter } from 'next/router';
import { Global, ThemeProvider } from '@emotion/react';
import { useEffect } from 'react';
import { useState } from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
+import HTMLHead from '@src/components/common/HTMLHead';
import GoogleTagManagerNoscript from '@src/components/googleTagManager/Noscript';
import GoogleTagManagerScript from '@src/components/googleTagManager/Script';
import * as gtm from '@src/components/googleTagManager/gtm';
@@ -33,68 +33,7 @@ function MyApp({ Component, pageProps }: AppProps) {
return (
<>
-
- SOPT
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Open Graph */}
-
-
-
-
-
-
-
-
-
- {/* Twitter */}
-
-
-
-
-
-
-
+
diff --git a/src/views/ProjectDetailPage/ProjectDetailPage.tsx b/src/views/ProjectDetailPage/ProjectDetailPage.tsx
index 2c8dfef3..be7369dc 100644
--- a/src/views/ProjectDetailPage/ProjectDetailPage.tsx
+++ b/src/views/ProjectDetailPage/ProjectDetailPage.tsx
@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
import { useState } from 'react';
import { useQuery } from 'react-query';
import { ReactComponent as IToggle } from '@src/assets/images/toggle.svg';
+import HTMLHead from '@src/components/common/HTMLHead';
import PageLayout from '@src/components/common/PageLayout';
import { api } from '@src/lib/api';
import { ProjectLinkType } from '@src/lib/types/project';
@@ -49,6 +50,7 @@ function ProjectDetailPage() {
return (
+