feat: improved seo

components/Docs.tsx

@@ -4,9 +4,16 @@ import dynamic from 'next/dynamic'
 const Container = dynamic(() => import('@components/Container'))
 
 const Docs: React.FC<DocsProps> = ({ title, header, description, subheader, children }) => {
+	const t = typeof header === 'string' ? header : title
+	const d = description || subheader
 	return (
 		<>
-			<NextSeo title={typeof header === 'string' ? header : title} description={description || subheader}/>
+			<NextSeo title={t} description={d}
+				openGraph={{
+					title: t,
+					description: d
+				}}
+			/>
 			<div className='dark:bg-discord-black bg-discord-blurple z-20'>
 				<Container className='py-20' ignoreColor>
 					<h1 className='mt-10 text-center text-gray-100 text-4xl font-bold sm:text-left'>

components/Hero.tsx

@@ -9,7 +9,10 @@ const Search = dynamic(()=> import('@components/Search'))
 
 const Hero:React.FC<HeroProps> = ({ header, description }) => {
 	return <>
-		<NextSeo title={header} description={description} />
+		<NextSeo title={header} description={description} openGraph={{
+			title: header,
+			description
+		}} />
 		<div className='dark:bg-discord-black bg-discord-blurple text-gray-100 md:p-0 mb-8'>
 			<Container className='pt-24 pb-16 md:pb-20' ignoreColor>
 				<h1 className='hidden md:block text-left text-3xl font-bold'>

pages/addbot.tsx

@@ -71,10 +71,14 @@ const AddBot:NextPage<AddBotProps> = ({ logged, user, csrfToken, theme }) => {
 	}
 
 	if(!logged) return <Login>
-		<NextSeo title='새로운 봇 추가하기' description='자신의 봇을 한국 디스코드봇 리스트에 등록하세요.' />
+		<NextSeo title='새로운 봇 추가하기' description='자신의 봇을 한국 디스코드봇 리스트에 등록하세요.' openGraph={{
+			title:'새로운 봇 추가하기', description: '자신의 봇을 한국 디스코드봇 리스트에 등록하세요.'
+		}} />
 	</Login>
 	return <Container paddingTop className='py-5'>
-		<NextSeo title='새로운 봇 추가하기' description='자신의 봇을 한국 디스코드봇 리스트에 등록하세요.' />
+		<NextSeo title='새로운 봇 추가하기' description='자신의 봇을 한국 디스코드봇 리스트에 등록하세요.' openGraph={{
+			title:'새로운 봇 추가하기', description: '자신의 봇을 한국 디스코드봇 리스트에 등록하세요.'
+		}} />
 		<h1 className='text-3xl font-bold'>새로운 봇 추가하기</h1>
 		<div className='mt-1 mb-5'>
 			안녕하세요, <span className='font-semibold'>{user.username}#{user.tag}</span>님! <a role='button' tabIndex={0} onKeyDown={toLogin} onClick={toLogin} className='text-discord-blurple cursor-pointer outline-none'>본인이 아니신가요?</a>

pages/calculator.tsx

@@ -24,7 +24,10 @@ const Calculator:NextPage<CalculatorProps> = ({ query }) => {
 	
 	}
 	return <Container paddingTop className='pb-10'>
-		<NextSeo title='봇 초대링크 생성기' description='디스코드 봇 초대링크를 간편하게 생성하세요' />
+		<NextSeo title='봇 초대링크 생성기' description='디스코드 봇 초대링크를 간편하게 생성하세요' openGraph={{
+			title:'봇 초대링크 생성기',
+			description: '디스코드 봇 초대링크를 간편하게 생성하세요'
+		}} />
 		<h1 className='text-4xl font-bold mt-2 mb-4'>봇 초대링크 생성기</h1>
 		<div className='text-2xl font-bold inline-flex items-center'>권한: {Object.keys(value).filter(el => value[el]).map(el => Number(el)).reduce((prev, curr) => prev | curr, 0)} 
 			<span className='ml-2 text-lg font-semibold'>= { Object.keys(value).filter(el => value[el]).map(el => `0x${Number(el).toString(16)}`).join(' | ') }</span>