Skip to content

Commit

Permalink
Merge pull request #209 from sopt-makers/feat/#205-open-graph
Browse files Browse the repository at this point in the history 
feat : head 태그 컴포넌트로 분리 및 프로젝트별 og tag 적용
  • Loading branch information
@f0rever0
f0rever0 authored Oct 12, 2023
2 parents 2af72bf + 043fa36 commit acc4b5f
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 63 deletions.
84 changes: 84 additions & 0 deletions src/components/common/HTMLHead/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Head>
<title>SOPT</title>
<meta
name="description"
content="SOPT는 IT와 벤처 창업에 뜻이 있는 대학생들이 모인 국내 최대 규모의 대학생 연합 IT 벤처 창업 동아리입니다."
/>
<meta name="title" content="SOPT" />
<meta name="keyword" content="IT, 창업, 개발, 대학생, 동아리" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />

<meta name="apple-mobile-web-app-title" content="SOPT" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<link rel="manifest" href="/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1"
/>
<meta content="yes" name="apple-mobile-web-app-capable" />

{/* Twitter */}
<meta name="twitter:title" content="SOPT" />
<meta name="twitter:description" content="대학생 연합 IT 벤처 창업 동아리" />
<meta property="twitter:card" content="website" />
<meta property="twitter:site" content="https://sopt.org/" />
<meta
name="twitter:image"
content="https://s3.ap-northeast-2.amazonaws.com/sopt.org/admin/origin/img_sopt_homepage.png"
/>
<meta property="twitter:image:alt" content="SOPT 공식 홈페이지 이미지" />

{/* Open Graph */}
<meta property="og:type" content="website" />
<meta property="og:locale" content="ko_KR" />
<meta
property="og:url"
content={`https://sopt.org/project/${projectID}` || 'https://sopt.org/'}
/>
<meta property="og:title" content={`SOPT 프로젝트 ${projectTitle}` || 'SOPT'} />
<meta property="og:site_name" content="SOPT 공식 홈페이지" />
<meta property="og:description" content={'대학생 연합 IT 벤처 창업 동아리'} />
<meta
property="og:image"
content={
projectImageURL ||
'https://s3.ap-northeast-2.amazonaws.com/sopt.org/admin/origin/img_sopt_homepage.png'
}
/>
<meta property="og:image:alt" content="SOPT 공식 홈페이지 이미지" />
</Head>
);
}

export default HTMLHead;
65 changes: 2 additions & 63 deletions src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -33,68 +33,7 @@ function MyApp({ Component, pageProps }: AppProps) {

return (
<>
<Head>
<title>SOPT</title>
<meta
name="description"
content="SOPT는 IT와 벤처 창업에 뜻이 있는 대학생들이 모인 국내 최대 규모의 대학생 연합 IT 벤처 창업 동아리입니다."
/>
<meta name="title" content="SOPT" />
<meta name="keyword" content="IT, 창업, 개발, 대학생, 동아리" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />

<meta name="apple-mobile-web-app-title" content="SOPT" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<link rel="manifest" href="/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1"
/>
<meta content="yes" name="apple-mobile-web-app-capable" />

{/* Open Graph */}
<meta property="og:type" content="website" />
<meta property="og:locale" content="ko_KR" />
<meta property="og:url" content="https://sopt.org/" />
<meta property="og:title" content="SOPT" />
<meta property="og:site_name" content="SOPT 공식 홈페이지" />
<meta property="og:description" content="대학생 연합 IT 벤처 창업 동아리" />
<meta
property="og:image"
content="https://s3.ap-northeast-2.amazonaws.com/sopt.org/admin/origin/img_sopt_homepage.png"
/>
<meta property="og:image:alt" content="SOPT 공식 홈페이지 이미지" />

{/* Twitter */}
<meta name="twitter:title" content="SOPT" />
<meta name="twitter:description" content="대학생 연합 IT 벤처 창업 동아리" />
<meta property="twitter:card" content="website" />
<meta property="twitter:site" content="https://sopt.org/" />
<meta
name="twitter:image"
content="https://s3.ap-northeast-2.amazonaws.com/sopt.org/admin/origin/img_sopt_homepage.png"
/>
<meta property="twitter:image:alt" content="SOPT 공식 홈페이지 이미지" />
</Head>
<HTMLHead />
<GoogleTagManagerScript />
<Global styles={global} />
<ThemeProvider theme={theme}>
Expand Down
2 changes: 2 additions & 0 deletions src/views/ProjectDetailPage/ProjectDetailPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -49,6 +50,7 @@ function ProjectDetailPage() {

return (
<PageLayout showScrollTopButton>
<HTMLHead projectTitle={name} projectImageURL={projectImage} projectID={id} />
<S.Root>
<S.Container>
<S.ProjectHeader>
Expand Down

0 comments on commit acc4b5f

Please sign in to comment.