메타데이터 API와 App Router의 SEO

메타데이터가 중요한 이유

정적 메타데이터 내보내기

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My App',
  description: 'The best app ever built',
  keywords: ['react', 'nextjs', 'typescript'],
};

export default function Page() { return <main>Hello</main>; }

제목 템플릿

// app/layout.tsx
export const metadata: Metadata = {
  title: {
    template: '%s | My App',
    default: 'My App',
  },
};

// app/about/page.tsx
export const metadata: Metadata = {
  title: 'About', // renders as "About | My App"
};

generateMetadata를 사용한 동적 메타데이터

export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  const product = await getProduct(params.id);
  return {
    title: product.name,
    description: product.summary,
    openGraph: {
      title: product.name,
      images: [product.imageUrl],
    },
  };
}

오픈 그래프 태그

export const metadata: Metadata = {
  openGraph: {
    title: 'My Product',
    description: 'Buy now!',
    url: 'https://example.com/product',
    siteName: 'My App',
    images: [{ url: 'https://example.com/og.png', width: 1200, height: 630 }],
    type: 'website',
    locale: 'en_US',
  },
};

트위터 카드 태그

twitter: {
  card: 'summary_large_image',
  title: 'My Product',
  description: 'Buy now!',
  images: ['https://example.com/twitter.png'],
  creator: '@myhandle',
},

로봇 및 표준 URL

export const metadata: Metadata = {
  robots: { index: true, follow: true, googleBot: { index: true } },
  alternates: { canonical: 'https://example.com/products' },
};

파비콘 및 아이콘

// Convention: place app/icon.png → auto-detected as favicon

// Or declare explicitly:
export const metadata: Metadata = {
  icons: {
    icon: '/icon.png',
    apple: '/apple-icon.png',
    shortcut: '/shortcut-icon.png',
  },
};

ImageResponse로 OG 이미지 생성하기

// app/og/route.ts
import { ImageResponse } from 'next/og';

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') ?? 'Default';
  return new ImageResponse(
    <div style={{ fontSize: 48, background: '#fff', width: '100%', height: '100%' }}>
      {title}
    </div>,
    { width: 1200, height: 630 }
  );
}

구조화된 데이터 (JSON-LD)

export default function ProductPage({ product }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    price: product.price,
  };
  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <h1>{product.name}</h1>
    </>
  );
}

메타데이터 확인하기

빠른 확인

복습