dreamyPatisiel · minyoung22222 · Oct 19, 2025 · Oct 19, 2025
diff --git a/components/meta/MetaHead.tsx b/components/meta/MetaHead.tsx
@@ -4,36 +4,59 @@ import 뎁구리_og from '@public/image/뎁구리/뎁구리_og.png';
 
 import { META, SITE_URL } from '@/constants/metaData';
 
-const MetaHead = ({
-  title,
-  description,
-  url,
-  keyword,
-  image,
-}: {
+export type MetaHeadProps = {
   title?: string;
   description?: string;
   url?: string;
   keyword?: string[];
   image?: string;
-}) => {
+};
+
+const toAbsoluteUrl = (src: string) => {
+  if (/^https?:\/\//.test(src)) {
+    return src;
+  }
+
+  try {
+    return new URL(src, SITE_URL).toString();
+  } catch {
+    return `${SITE_URL}${src.startsWith('/') ? src : `/${src}`}`;
+  }
+};
+
+const MetaHead = ({ title, description, url, keyword, image }: MetaHeadProps) => {
+  const metaTitle = title ?? META.MAIN.title;
+  const metaDescription = description ?? META.MAIN.description;
+  const metaKeywords = (keyword ?? META.MAIN.keyword).join(',');
+  const metaUrl = url ?? SITE_URL;
+  const defaultImage = toAbsoluteUrl(뎁구리_og.src);
+  const metaImage = image ? toAbsoluteUrl(image) : defaultImage;
+
   return (
     <Head>
-      <title>{title || META.MAIN.title}</title>
-      <meta name='description' content={description || META.MAIN.description} />
+      <title>{metaTitle}</title>
+      <meta name='description' content={metaDescription} />
       <meta name='viewport' content='initial-scale=1.0, width=device-width' />
-      <meta name='keywords' content={keyword?.join(',') || META.MAIN.keyword.join(',')} />
-      <meta property='og:title' content={title || META.MAIN.title} />
+      <meta name='keywords' content={metaKeywords} />
+
+      {/* Open Graph */}
+      <meta property='og:title' content={metaTitle} />
       <meta property='og:type' content='website' />
-      {/* TODO: 최종 url은 변경 필요 */}
-      <meta property='og:url' content={url || SITE_URL} />
-      <meta property='og:image' content={image || 뎁구리_og.src} />
-
-      {/* 트위터용 */}
-      <meta name='twitter:title' content={title || META.MAIN.title} />
-      <meta name='twitter:description' content={description || META.MAIN.description} />
-      <meta name='twitter:image' content={image || 뎁구리_og.src} />
+      <meta property='og:url' content={metaUrl} />
+      <meta property='og:description' content={metaDescription} />
+      <meta property='og:image' content={metaImage} />
+      <meta property='og:site_name' content='DEVDEVDEV' />
+
+      {/* Twitter */}
+      <meta name='twitter:card' content='summary_large_image' />
+      <meta name='twitter:title' content={metaTitle} />
+      <meta name='twitter:description' content={metaDescription} />
+      <meta name='twitter:image' content={metaImage} />
+      <meta name='twitter:url' content={metaUrl} />
+
+      <link rel='canonical' href={metaUrl} />
     </Head>
   );
 };
+
 export default MetaHead;
diff --git a/pages/_app.page.tsx b/pages/_app.page.tsx
@@ -8,7 +8,7 @@ import { QueryClient, QueryClientProvider, HydrationBoundary } from '@tanstack/r
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import Layout from '@components/common/layout';
-import MetaHead from '@components/meta/MetaHead';
+import MetaHead, { type MetaHeadProps } from '@components/meta/MetaHead';
 
 import useSetAxiosConfig from '@/api/useSetAxiosConfig';
 import { DAY, HALF_DAY } from '@/constants/TimeConstants';
@@ -18,6 +18,8 @@ import '@/styles/globals.css';
 
 import * as gtag from '../lib/gtag';
 
+type ComponentWithMeta = AppProps['Component'] & { meta?: MetaHeadProps };
+
 export default function MyApp({ Component, pageProps }: AppProps) {
   useSetAxiosConfig();
   console.log('process.env.NODE_ENV', process.env.NODE_ENV);
@@ -56,7 +58,9 @@ export default function MyApp({ Component, pageProps }: AppProps) {
     };
   }, [router.events]);
 
-  const meta = pageProps.meta || META.MAIN;
+  const componentMeta = (Component as ComponentWithMeta)?.meta;
+  const meta: MetaHeadProps =
+    (pageProps.meta as MetaHeadProps | undefined) ?? componentMeta ?? META.MAIN;
 
   return (
     <>

diff --git a/pages/pickpickpick/[id]/index.page.tsx b/pages/pickpickpick/[id]/index.page.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import type { NextPage } from 'next';
 import { useRouter } from 'next/router';
 
 import DevLoadingComponent from '@pages/loading/index.page';
@@ -16,7 +17,9 @@ import {
   PICK_VOTE_MODIFIED_MODAL,
 } from '@components/common/modals/modalConfig/pickVote';
 import MoreButton from '@components/common/moreButton';
+import type { MetaHeadProps } from '@components/meta/MetaHead';
 
+import { META } from '@/constants/metaData';
 import { ROUTES } from '@/constants/routes';
 import { useMediaQueryContext } from '@/contexts/MediaQueryContext';
 
@@ -27,7 +30,9 @@ import SimilarPick from './components/SimilarPick';
 import VoteCard from './components/VoteCard';
 import usePickDetailHandlers from './handlers/usePickDetailHandlers';
 
-export default function Index() {
+type NextPageWithMeta = NextPage & { meta?: MetaHeadProps };
+
+const PickDetailPage: NextPageWithMeta = () => {
   const router = useRouter();
   const { id } = router.query;
 
@@ -148,4 +153,8 @@ export default function Index() {
       </div>
     </>
   );
-}
+};
+
+PickDetailPage.meta = META.PICK;
+
+export default PickDetailPage;
diff --git a/pages/techblog/[id]/index.page.tsx b/pages/techblog/[id]/index.page.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import type { NextPage } from 'next';
 import { useRouter } from 'next/router';
 
 import DevLoadingComponent from '@pages/loading/index.page';
@@ -13,7 +14,9 @@ import WritableComment from '@components/common/comment/WritableComment';
 import DevGuriHorizontalError from '@components/common/error/DevGuriHorizontalError';
 import MobileToListButton from '@components/common/mobile/mobileToListButton';
 import { LoginModal } from '@components/common/modals/modal';
+import type { MetaHeadProps } from '@components/meta/MetaHead';
 
+import { META } from '@/constants/metaData';
 import { ROUTES } from '@/constants/routes';
 import { useMediaQueryContext } from '@/contexts/MediaQueryContext';
 
@@ -24,7 +27,9 @@ import CompanyInfoCard from '../components/CompanyInfoCard';
 import TechDetailCard from '../components/TechDetailCard';
 import { TechCardProps } from '../types/techBlogType';
 
-export default function Page() {
+type NextPageWithMeta = NextPage & { meta?: MetaHeadProps };
+
+const TechBlogDetailPage: NextPageWithMeta = () => {
   const router = useRouter();
   const techArticleId = router.query.id as string | undefined;
 
@@ -116,4 +121,8 @@ export default function Page() {
       {isLoginModalOpen && loginStatus !== 'login' && <LoginModal />}
     </>
   );
-}
+};
+
+TechBlogDetailPage.meta = META.TECH;
+
+export default TechBlogDetailPage;