feat: og, twitter 및 메타 데이터 설정

frontend/src/app/(with-header)/(home)/nearby/page.tsx

@@ -3,8 +3,22 @@ import MapComponent from '@/app/_components/naver-map/MapComponent';
 import ViewTravelMap from '@/app/_components/near/ViewTravelMap';
 import { getMySpotIds } from '@/app/_components/near/hooks/nearActions';
 import { myInfoSchema } from '@/types/response';
+import { Metadata } from 'next';
 import React from 'react';
 
+export const metadata: Metadata = {
+  title: '장소/코스 검색',
+  description: `원하는 장소/코스를 검색해보세요.`,
+  openGraph: {
+    title: '장소/코스 검색',
+    description: `원하는 장소/코스를 검색해보세요.`,
+  },
+  twitter: {
+    title: '장소/코스 검색',
+    description: `원하는 장소/코스를 검색해보세요.`,
+  },
+};
+
 export default async function NearbyPage() {
   const res = await authenticateUser();
   const user = myInfoSchema.safeParse(res);

frontend/src/app/(with-header)/(home)/places/popular/page.tsx

@@ -5,6 +5,20 @@ import { myInfoSchema } from '@/types/response';
 
 import { Place } from '@/app/_components/place/places';
 import { getPlaces } from '@/app/_components/place/places/action';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '인기 장소/코스',
+  description: `현재 인기있는 장소/코스를 만나보세요.`,
+  openGraph: {
+    title: '인기 장소/코스',
+    description: `현재 인기있는 장소/코스를 만나보세요.`,
+  },
+  twitter: {
+    title: '인기 장소/코스',
+    description: `현재 인기있는 장소/코스를 만나보세요.`,
+  },
+};
 
 export default async function PopularPlacesPage() {
   const memberJson = await authenticateUser();

frontend/src/app/(with-header)/(home)/places/recommended/page.tsx

@@ -3,6 +3,20 @@ import { myInfoSchema } from '@/types/response';
 
 import { Place } from '@/app/_components/place/places';
 import { getPlaces } from '@/app/_components/place/places/action';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '맞춤 추천',
+  description: `개인별 맞춤 추천 지역의 장소/코스를 만나보세요.`,
+  openGraph: {
+    title: '맞춤 추천',
+    description: `개인별 맞춤 추천 지역의 장소/코스를 만나보세요.`,
+  },
+  twitter: {
+    title: '맞춤 추천',
+    description: `개인별 맞춤 추천 지역의 장소/코스를 만나보세요.`,
+  },
+};
 
 export default async function RecommendedPlacesPage() {
   const memberJson = await authenticateUser();

frontend/src/app/(with-header)/(home)/places/regions/[id]/page.tsx

@@ -7,6 +7,20 @@ import { getInterestedRegions, getRegionPlaces } from '../../../action';
 import DummyPlace from '@/app/_components/place/dummy/DummyPlace';
 
 import { RegionPlaces } from '@/app/_components/place/places';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '관심 지역',
+  description: `관심 지역을 설정하고 관심 지역의 장소/코스를 만나보세요.`,
+  openGraph: {
+    title: '관심 지역',
+    description: `관심 지역을 설정하고 관심 지역의 장소/코스를 만나보세요.`,
+  },
+  twitter: {
+    title: '관심 지역',
+    description: `관심 지역을 설정하고 관심 지역의 장소/코스를 만나보세요.`,
+  },
+};
 
 export default async function RegionsPlacePage({
   params,

frontend/src/app/(with-header)/(home)/search/page.tsx

@@ -6,6 +6,12 @@ import { myInfoSchema } from '@/types/response';
 import type { TMemberStatus } from '@/context/MemberContext';
 import BackendSearchBar from '@/app/_components/place/BackendSearchBar';
 import TravelSearchResult from '@/app/_components/search/TravelSearchResult';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '이길로그 검색 페이지',
+  description: '원하는 장소/코스를 검색해보세요.',
+};
 
 export default async function SearchPage({
   searchParams,

frontend/src/app/(with-header)/detail/[travel]/[id]/page.tsx

@@ -32,7 +32,16 @@ export async function generateMetadata({
         title: '장소 상세 페이지',
         description: '장소 상세 설명',
         openGraph: {
-          images: ['/logo/og-logo.png'],
+          images: {
+            url: '/logo/og-logo.png',
+            alt: '이길로그 로고',
+          },
+        },
+        twitter: {
+          images: {
+            url: '/logo/og-logo.png',
+            alt: '이길로그 로고',
+          },
         },
       };
   } else {
@@ -50,7 +59,16 @@ export async function generateMetadata({
         title: '코스 상세 페이지',
         description: '코스 상세 설명',
         openGraph: {
-          images: ['/logo/favicon.svg'],
+          images: {
+            url: '/logo/og-logo.png',
+            alt: '이길로그 로고',
+          },
+        },
+        twitter: {
+          images: {
+            url: '/logo/og-logo.png',
+            alt: '이길로그 로고',
+          },
         },
       };
   }

frontend/src/app/(with-header)/place/[id]/page.tsx

@@ -1,6 +1,20 @@
 import PlaceDetailWithMySpot from '@/app/_components/place/detail/PlaceDetailWithMySpot';
+import { getPlaceDetail } from '@/app/_components/place/detail/action';
+import { createMetadata } from '@/utils';
 
+export async function generateMetadata({ params }: { params: { id: number } }) {
+  const detailResult = await getPlaceDetail(params.id);
+  if (detailResult.success) {
+    const data = {
+      title: detailResult.data.place_name,
+      description: detailResult.data.address,
+      image: detailResult.data.thumbnail_image_url,
+      url: `https://yigil.co.kr/place/${params.id}`,
+    };
 
+    return createMetadata(data);
+  }
+}
 
 export default async function PlaceDetailPage({
   params,

frontend/src/app/(without-header)/login/page.tsx

@@ -10,8 +10,20 @@ import { naverOAuthEndPoint } from '@/app/endpoints/api/auth/callback/naver/cons
 import GoogleLoginButton from '@/app/_components/ui/button/GoogleLoginButton';
 import NaverLoginButton from '@/app/_components/ui/button/NaverLoginButton';
 import { googleOAuthEndPoint } from '@/app/endpoints/api/auth/callback/google/constants';
+import { Metadata } from 'next';
 
-
+export const metadata: Metadata = {
+  title: '로그인',
+  description: `로그인 후 이길로그의 여러 기능을 만나보세요`,
+  openGraph: {
+    title: '로그인',
+    description: `로그인 후 이길로그의 여러 기능을 만나보세요`,
+  },
+  twitter: {
+    title: '로그인',
+    description: `로그인 후 이길로그의 여러 기능을 만나보세요`,
+  },
+};
 
 export default async function LoginPage() {
   const { KAKAO_ID, GOOGLE_CLIENT_ID, NAVER_SEARCH_ID } = process.env;

frontend/src/app/layout.tsx

@@ -14,26 +14,24 @@ const Pretendard = localFont({
 });
 
 export const metadata: Metadata = {
+  metadataBase: new URL('https://yigil.co.kr'),
   title: '이길로그',
-
   icons: {
     icon: [{ url: '/logo/favicon.svg', href: '/logo/favicon.svg' }],
   },
-
   description: '지도 기반 장소 기록·공유 서비스',
   openGraph: {
     title: '이길로그 홈페이지',
     description: '지도 기반 장소 기록·공유 서비스',
-    images: ['/logo/og-logo.png'],
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
     type: 'website',
     siteName: '이길로그',
-    url: 'https://yigil.co.kr',
     locale: 'ko-KR',
   },
   twitter: {
     title: '이길로그 홈페이지',
     description: '지도 기반 장소 기록·공유 서비스',
-    images: ['/logo/og-logo.png'],
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
   },
 };
 

frontend/src/utils.ts

@@ -108,14 +108,11 @@ export async function createMetadata(data: {
     title: title,
     description: description,
     openGraph: {
-      siteName: '이길로그',
       url: url,
-      locale: 'ko-KR',
       images: {
         url: image,
-        alt: title,
+        alt: `${title}-이미지`,
       },
-      type: 'website',
     },
     twitter: {
       title: title,