Chore/next seo

package.json

@@ -30,6 +30,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.544.0",
     "next": "15.5.3",
+    "next-seo": "^6.8.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "tailwind-merge": "^3.3.1",

src/app/lab/noindex/page.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Labs (Internal)",
+  robots: {
+    index: false,
+    follow: false,
+    googleBot: { index: false, follow: false, noimageindex: true, nosnippet: true },
+  },
+};
+
+export default function Page() {
+  return <main className="p-8">내부 테스트 페이지(검색 제외)</main>;
+}

src/app/lab/og-preview/page.tsx

@@ -0,0 +1,24 @@
+import { withBase } from "@/seo/baseUrl"; // 선택: 절대 URL 유틸
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "PlanMate 프로모션 Seed",
+  description: "공유 카드(OG/Twitter) 테스트용 페이지",
+  openGraph: {
+    title: "PlanMate 프로모션 Seed",
+    description: "공유 카드(OG/Twitter) 테스트용 페이지",
+    images: [
+      {
+        url: withBase("/og/promo-seed.png"),
+        width: 1200,
+        height: 630,
+        alt: "PlanMate 프로모션 Seed",
+      },
+    ],
+  },
+  twitter: { card: "summary_large_image" },
+};
+
+export default function Page() {
+  return <main className="p-8">OG/Twitter 카드 테스트 페이지</main>;
+}

src/app/layout.tsx

@@ -1,10 +1,53 @@
+// app/layout.tsx
 import type { Metadata } from "next";
 import "./globals.css";
 import { Providers } from "./providers";
 
+import {
+  DEFAULT_DESCRIPTION,
+  DEFAULT_TITLE,
+  LOCALE,
+  OG_DEFAULT_IMAGE,
+  SITE_NAME,
+  SITE_URL,
+  TITLE_TEMPLATE,
+} from "@/seo/constants";
+
 export const metadata: Metadata = {
-  title: "Custom Daily Planner",
-  description: "나만의 맞춤형 플래너를 손쉽게 디자인하고 사용할 수 있는 웹 앱",
+  // 절대 URL 기준점 (canonical/OG 절대경로 변환에 사용)
+  metadataBase: new URL(SITE_URL),
+
+  // 전역 타이틀 규칙
+  title: {
+    default: DEFAULT_TITLE,
+    template: TITLE_TEMPLATE, // 예: "{페이지제목} | MyPlanMate"
+  },
+
+  // 전역 설명
+  description: DEFAULT_DESCRIPTION,
+
+  // Open Graph 기본값
+  openGraph: {
+    type: "website",
+    url: "/", // metadataBase 기준으로 절대 URL 처리
+    siteName: SITE_NAME,
+    title: DEFAULT_TITLE,
+    description: DEFAULT_DESCRIPTION,
+    images: [
+      {
+        url: OG_DEFAULT_IMAGE, // "/og/og-default.png" → 절대 URL로 자동 변환
+        width: 1200,
+        height: 630,
+        alt: `${SITE_NAME} 대표 이미지`,
+      },
+    ],
+    locale: LOCALE, // "ko_KR"
+  },
+
+  // Twitter 카드 기본값
+  twitter: {
+    card: "summary_large_image",
+  },
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
@@ -25,6 +68,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             </ThemeProvider>
           </AuthProvider>
         */}
+
         <Providers>{children}</Providers>
       </body>
     </html>

src/seo/baseUrl.ts

@@ -0,0 +1,10 @@
+export const getBaseUrl = () => {
+  const fromEnv = process.env.NEXT_PUBLIC_SITE_URL?.replace(/\/$/, "");
+  return fromEnv ?? "http://localhost:3000";
+};
+
+export const withBase = (path = "/") => {
+  const base = getBaseUrl();
+  if (!path.startsWith("/")) return path; // 이미 절대 주소면 그대로
+  return `${base}${path}`;
+};

src/seo/constants.ts

@@ -0,0 +1,12 @@
+export const SITE_NAME = "MyPlanMate";
+
+export const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.replace(/\/$/, "") ?? "http://localhost:3000";
+
+export const DEFAULT_TITLE = `${SITE_NAME} - 나만의 맞춤형 플래너`;
+export const TITLE_TEMPLATE = `%s | ${SITE_NAME}`;
+export const DEFAULT_DESCRIPTION =
+  "일간·주간·월간·투두·습관·메모를 자유롭게 조합하는 커스텀 플래너";
+
+export const OG_DEFAULT_IMAGE = "/og/og-default.png"; // metadataBase로 절대경로 해석
+export const LOCALE = "ko_KR";