Next.js 기반 SEO 완전 최적화 가이드 (App Router, Metadata API)

Next.js는 React 기반 풀스택 프레임워크로, SEO에 필요한 모든 기능을 프레임워크 레벨에서 내장하고 있습니다. SPA의 SEO 한계를 극복하기 위해 만들어진 것이 아니라, 처음부터 서버 렌더링을 중심으로 설계된 프레임워크입니다.

Next.js App Router의 SEO 핵심 기능

정적 Metadata

// app/about/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: '회사 소개 | 브랜드명',
  description: '브랜드명은 2015년부터 SEO 컨설팅을 제공하는 전문 디지털 마케팅 에이전시입니다.',
  openGraph: {
    title: '회사 소개 | 브랜드명',
    description: '10년 경력의 SEO 전문 에이전시',
    images: [{ url: '/images/og-about.jpg', width: 1200, height: 630 }],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: '회사 소개 | 브랜드명',
    description: '10년 경력의 SEO 전문 에이전시',
  },
  alternates: {
    canonical: 'https://example.com/about',
    languages: { 'en': 'https://example.com/en/about' },
  },
};

동적 Metadata (generateMetadata)

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next';
import { getPost } from '@/lib/api';

export async function generateMetadata(
  { params }: { params: Promise<{ slug: string }> }
): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);

  return {
    title: `${post.title} | 블로그`,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.coverImage, width: 1200, height: 630 }],
      type: 'article',
      publishedTime: post.publishedAt,
      authors: [post.author.name],
    },
    alternates: {
      canonical: `https://example.com/blog/${slug}`,
    },
  };
}

Layout 메타데이터 상속

App Router에서 layout.tsx에 정의한 메타데이터는 하위 페이지에 자동 상속됩니다. 하위 페이지에서 같은 필드를 정의하면 깊은 병합(Deep Merge)이 아닌 덮어쓰기(Override)됩니다.

// app/layout.tsx — 전역 기본값
export const metadata: Metadata = {
  metadataBase: new URL('https://example.com'),
  title: { default: '브랜드명', template: '%s | 브랜드명' },
  description: '기본 설명',
  robots: { index: true, follow: true },
};

// app/blog/[slug]/page.tsx — 페이지별 제목 (template 적용)
// title: '게시글 제목' → 실제 출력: '게시글 제목 | 브랜드명'

sitemap.ts: 동적 사이트맵 생성

// app/sitemap.ts
import type { MetadataRoute } from 'next';
import { getAllPosts, getAllProducts } from '@/lib/api';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts();
  const products = await getAllProducts();

  const blogEntries = posts.map((post) => ({
    url: `https://example.com/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'weekly' as const,
    priority: 0.7,
  }));

  const productEntries = products.map((product) => ({
    url: `https://example.com/products/${product.slug}`,
    lastModified: new Date(product.updatedAt),
    changeFrequency: 'daily' as const,
    priority: 0.8,
  }));

  return [
    { url: 'https://example.com', lastModified: new Date(), priority: 1.0 },
    { url: 'https://example.com/about', lastModified: new Date(), priority: 0.5 },
    ...blogEntries,
    ...productEntries,
  ];
}

대규모 사이트맵 분할 (50,000개 이상)

// app/sitemap.ts — 사이트맵 인덱스 생성
export async function generateSitemaps() {
  const totalProducts = await getProductCount();
  const sitemapCount = Math.ceil(totalProducts / 50000);
  return Array.from({ length: sitemapCount }, (_, i) => ({ id: i }));
}

// 각 사이트맵 청크 생성
export default async function sitemap({ id }: { id: number }) {
  const start = id * 50000;
  const products = await getProducts({ offset: start, limit: 50000 });
  return products.map((p) => ({
    url: `https://example.com/products/${p.slug}`,
    lastModified: p.updatedAt,
  }));
}

robots.ts: 동적 robots.txt

// app/robots.ts
import type { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';

  return {
    rules: [
      {
        userAgent: '*',
        allow: '/',
        disallow: ['/admin/', '/api/', '/private/'],
      },
      {
        userAgent: 'GPTBot',
        disallow: ['/premium-content/'],
      },
    ],
    sitemap: `${baseUrl}/sitemap.xml`,
  };
}

기본 패턴: Script 태그로 JSON-LD 삽입

// app/blog/[slug]/page.tsx — Server Component
export default async function BlogPost({ params }) {
  const { slug } = await params;
  const post = await getPost(slug);

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    description: post.excerpt,
    image: post.coverImage,
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
    author: {
      '@type': 'Person',
      name: post.author.name,
      url: post.author.url,
    },
    publisher: {
      '@type': 'Organization',
      name: '브랜드명',
      logo: { '@type': 'ImageObject', url: 'https://example.com/logo.png' },
    },
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>
        <h1>{post.title}</h1>
        {/* ... */}
      </article>
    </>
  );
}

핵심 포인트

• Server Component에서 삽입: JSON-LD가 초기 HTML에 포함되어 1단계 크롤에서 즉시 인식. Client Component에서 삽입하면 렌더링 후에만 인식
• dangerouslySetInnerHTML 사용: React가 JSON을 이스케이프하지 않도록 raw로 삽입
• 서비스별 스키마 유형: 블로그(Article), 상품(Product), FAQ(FAQPage), 조직(Organization), 이벤트(Event), 리뷰(Review) 등 적절한 타입 사용

재사용 가능한 JSON-LD 헬퍼

// lib/json-ld.ts
export function createArticleJsonLd(post: Post) {
  return {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    description: post.excerpt,
    image: post.coverImage,
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
    author: { '@type': 'Person', name: post.author.name },
  };
}

export function createBreadcrumbJsonLd(items: { name: string; url: string }[]) {
  return {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: items.map((item, i) => ({
      '@type': 'ListItem',
      position: i + 1,
      name: item.name,
      item: item.url,
    })),
  };
}

ISR (Incremental Static Regeneration)

// app/products/[slug]/page.tsx
export const revalidate = 300; // 5분마다 재검증

// 빌드 시 미리 생성할 페이지 (인기 상품 Top 100)
export async function generateStaticParams() {
  const topProducts = await getTopProducts({ limit: 100 });
  return topProducts.map((p) => ({ slug: p.slug }));
}

// 나머지 상품은 첫 요청 시 On-Demand 생성 후 캐싱
export default async function ProductPage({ params }) {
  const { slug } = await params;
  const product = await getProduct(slug);
  // ...
}

On-Demand Revalidation: 즉시 캐시 무효화

// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {
  const { secret, path, tag } = await req.json();
  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  if (path) revalidatePath(path);       // 특정 경로 캐시 무효화
  if (tag) revalidateTag(tag);           // 특정 태그의 모든 캐시 무효화
  return NextResponse.json({ revalidated: true });
}

CMS에서 콘텐츠를 업데이트하면 Webhook으로 이 API를 호출하여 해당 페이지만 즉시 재생성합니다. 전체 재빌드가 필요 없습니다.

next/image: 이미지 SEO 최적화

import Image from 'next/image';

<Image
  src="/images/product-hero.jpg"
  alt="나이키 에어맥스 블랙 - 측면 뷰"     {/* 구체적 alt 텍스트 */}
  width={1200}
  height={630}
  priority                                  {/* LCP 요소일 경우 preload */}
  sizes="(max-width: 768px) 100vw, 50vw"   {/* 반응형 크기 지정 */}
/>

• 자동 WebP/AVIF 변환: 브라우저 지원에 따라 최적 포맷으로 변환
• 자동 lazy loading: viewport에 가까워질 때 로드 (priority 없는 경우)
• 자동 srcset 생성: 다양한 크기의 이미지를 자동 생성하여 기기별 최적 이미지 전달
• CLS 방지: width/height가 지정되어 있으므로 브라우저가 이미지 영역을 미리 확보

SEO 체크리스트

흔한 실수 5가지