feat: implement SEO best practices with metadata, sitemap, and structured data (#62)

- Add comprehensive metadata to root layout (Open Graph, Twitter Cards,
  canonical URL, keywords, robots directives)
- Add per-station generateMetadata with unique titles and descriptions
  for 300+ station detail pages
- Add metadata exports for about, archive, and route pages
- Create sitemap.ts generating XML sitemap for all pages
- Create robots.ts with sitemap reference
- Add JSON-LD structured data: WebSite schema on root layout,
  BreadcrumbList on station pages via next-seo
- Handle edge case for station names ending with 역 (e.g. 서울역)

https://claude.ai/code/session_01NNQGR2ptdKHnqpDMPdueuK

Co-authored-by: Claude <noreply@anthropic.com>

Author: brody-0125

web/package-lock.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "next": "^16.0.0",
+    "next-seo": "^7.2.0",
     "playwright": "^1.58.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

web/package.json

@@ -1,8 +1,20 @@
-'use client';
-
+import type { Metadata } from 'next';
 import Link from 'next/link';
 import ThemeToggle from '@/components/ThemeToggle';
 
+export const metadata: Metadata = {
+  title: '데이터 출처 및 투명성',
+  description:
+    '나들이는 서울 열린 데이터 광장의 공식 API를 통해 지하철 편의시설 실시간 데이터를 제공합니다.',
+  alternates: { canonical: '/about/' },
+  openGraph: {
+    title: '데이터 출처 및 투명성 | 나들이',
+    description:
+      '나들이는 서울 열린 데이터 광장의 공식 API를 통해 지하철 편의시설 실시간 데이터를 제공합니다.',
+    url: '/about/',
+  },
+};
+
 export default function AboutPage() {
   return (
     <>

web/src/app/about/page.tsx

@@ -1,7 +1,19 @@
-'use client';
-
+import type { Metadata } from 'next';
 import Link from 'next/link';
 
+export const metadata: Metadata = {
+  title: '데이터 아카이브',
+  description:
+    '서울 지하철 이동편의시설 과거 운행 기록을 조회할 수 있는 데이터 아카이브입니다.',
+  alternates: { canonical: '/archive/' },
+  openGraph: {
+    title: '데이터 아카이브 | 나들이',
+    description:
+      '서울 지하철 이동편의시설 과거 운행 기록을 조회할 수 있는 데이터 아카이브입니다.',
+    url: '/archive/',
+  },
+};
+
 export default function ArchivePage() {
   return (
     <>

web/src/app/archive/page.tsx

@@ -8,10 +8,55 @@ import './globals.css';
 const recaptchaSiteKey = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;
 const goatcounterCode = process.env.NEXT_PUBLIC_GOATCOUNTER_CODE;
 
+const SITE_URL = 'https://nadeuri.today';
+const SITE_NAME = '나들이';
+const SITE_DESCRIPTION =
+  '서울 지하철 엘리베이터, 에스컬레이터 등 교통약자 편의시설의 실시간 운행 상태를 확인하세요. 1~9호선, 우이신설선 300개 이상 역의 편의시설 정보를 제공합니다.';
+
 export const metadata: Metadata = {
-  title: '나들이 — 오늘은 어디로 가볼까?',
-  description:
-    '서울 지하철 엘리베이터, 에스컬레이터 등 교통약자 편의시설의 실시간 운행 상태를 확인하세요.',
+  metadataBase: new URL(SITE_URL),
+  title: {
+    default: '나들이 — 서울 지하철 교통약자 편의시설 실시간 현황',
+    template: '%s | 나들이',
+  },
+  description: SITE_DESCRIPTION,
+  keywords: [
+    '서울 지하철',
+    '교통약자',
+    '편의시설',
+    '엘리베이터',
+    '에스컬레이터',
+    '실시간',
+    '장애인',
+    '휠체어',
+    '지하철 엘리베이터 고장',
+    '서울 메트로',
+  ],
+  alternates: {
+    canonical: '/',
+  },
+  openGraph: {
+    type: 'website',
+    siteName: SITE_NAME,
+    title: '나들이 — 서울 지하철 교통약자 편의시설 실시간 현황',
+    description: SITE_DESCRIPTION,
+    url: SITE_URL,
+    locale: 'ko_KR',
+  },
+  twitter: {
+    card: 'summary',
+    title: '나들이 — 서울 지하철 교통약자 편의시설 실시간 현황',
+    description: SITE_DESCRIPTION,
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-snippet': -1,
+    },
+  },
 };
 
 export default function RootLayout({
@@ -27,6 +72,19 @@ export default function RootLayout({
           href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600;700;900&family=Noto+Sans+KR:wght@300;400;500;700&family=DM+Mono:wght@300;400;500&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
         />
         <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify({
+              '@context': 'https://schema.org',
+              '@type': 'WebSite',
+              name: SITE_NAME,
+              url: SITE_URL,
+              description: SITE_DESCRIPTION,
+              inLanguage: 'ko',
+            }),
+          }}
+        />
       </head>
       <body className="antialiased min-h-screen flex flex-col font-sans">
         {recaptchaSiteKey && (

web/src/app/layout.tsx

@@ -0,0 +1,13 @@
+import type { MetadataRoute } from 'next';
+
+export const dynamic = 'force-static';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+    },
+    sitemap: 'https://nadeuri.today/sitemap.xml',
+  };
+}

web/src/app/robots.ts

@@ -1,7 +1,19 @@
-'use client';
-
+import type { Metadata } from 'next';
 import Link from 'next/link';
 
+export const metadata: Metadata = {
+  title: '경로 안내',
+  description:
+    '교통약자를 위한 서울 지하철 최적 경로 안내. 엘리베이터, 에스컬레이터 등 편의시설 상태를 고려한 경로를 제공합니다.',
+  alternates: { canonical: '/route/' },
+  openGraph: {
+    title: '경로 안내 | 나들이',
+    description:
+      '교통약자를 위한 서울 지하철 최적 경로 안내. 엘리베이터, 에스컬레이터 등 편의시설 상태를 고려한 경로를 제공합니다.',
+    url: '/route/',
+  },
+};
+
 export default function RoutePage() {
   return (
     <>

web/src/app/route/page.tsx

@@ -0,0 +1,44 @@
+import type { MetadataRoute } from 'next';
+import { STATIONS } from '@/lib/stations';
+
+export const dynamic = 'force-static';
+
+const SITE_URL = 'https://nadeuri.today';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const staticPages: MetadataRoute.Sitemap = [
+    {
+      url: SITE_URL,
+      lastModified: new Date(),
+      changeFrequency: 'always',
+      priority: 1.0,
+    },
+    {
+      url: `${SITE_URL}/about/`,
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${SITE_URL}/archive/`,
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.3,
+    },
+    {
+      url: `${SITE_URL}/route/`,
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.3,
+    },
+  ];
+
+  const stationPages: MetadataRoute.Sitemap = STATIONS.map((station) => ({
+    url: `${SITE_URL}/station/${station.code}/`,
+    lastModified: new Date(),
+    changeFrequency: 'always' as const,
+    priority: 0.8,
+  }));
+
+  return [...staticPages, ...stationPages];
+}

web/src/app/sitemap.ts

@@ -1,11 +1,69 @@
-import { STATIONS } from '@/lib/stations';
+import type { Metadata } from 'next';
+import { STATIONS, getStation } from '@/lib/stations';
+import { BreadcrumbJsonLd } from 'next-seo';
 import StationDetailClient from './StationDetailClient';
 
+const LINE_NAMES: Record<string, string> = {
+  '1': '1호선', '2': '2호선', '3': '3호선', '4': '4호선',
+  '5': '5호선', '6': '6호선', '7': '7호선', '8': '8호선', '9': '9호선',
+  S: '우이신설선',
+};
+
+function stationLabel(name: string): string {
+  return name.endsWith('역') ? name : `${name}역`;
+}
+
 export function generateStaticParams() {
   return STATIONS.map((s) => ({ code: s.code }));
 }
 
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ code: string }>;
+}): Promise<Metadata> {
+  const { code } = await params;
+  const station = getStation(code);
+
+  if (!station) {
+    return { title: '존재하지 않는 역' };
+  }
+
+  const lineText = station.lines.map((l) => LINE_NAMES[l] ?? `${l}호선`).join(' · ');
+  const title = `${stationLabel(station.name)} 편의시설 현황`;
+  const description = `${stationLabel(station.name)}(${lineText}) 엘리베이터, 에스컬레이터 등 교통약자 편의시설의 실시간 운행 상태를 확인하세요.`;
+
+  return {
+    title,
+    description,
+    alternates: {
+      canonical: `/station/${code}/`,
+    },
+    openGraph: {
+      title: `${stationLabel(station.name)} 편의시설 현황 | 나들이`,
+      description,
+      url: `/station/${code}/`,
+    },
+  };
+}
+
 export default async function StationPage({ params }: { params: Promise<{ code: string }> }) {
   const { code } = await params;
-  return <StationDetailClient code={code} />;
+  const station = getStation(code);
+  const stationName = station?.name ?? code;
+
+  return (
+    <>
+      <BreadcrumbJsonLd
+        items={[
+          { name: '홈', item: 'https://nadeuri.today/' },
+          {
+            name: `${stationLabel(stationName)}`,
+            item: `https://nadeuri.today/station/${code}/`,
+          },
+        ]}
+      />
+      <StationDetailClient code={code} />
+    </>
+  );
 }