Next.js에서 검색 엔진 최적화(SEO)를 어떻게 개선하나요?

SEO(검색 엔진 최적화)는 검색 봇이 페이지 내용을 잘 읽고 색인하도록 만드는 일입니다. CSR은 초기 HTML이 비어 있어 불리한데, Next.js는 서버 렌더링과 여러 도구로 이를 개선합니다.

서버 렌더링으로 콘텐츠 노출

SSR/SSG로 완성된 HTML을 내려보내면, 검색 봇이 자바스크립트 실행 없이도 콘텐츠를 바로 읽을 수 있습니다. 이것이 SEO 개선의 토대입니다.

메타데이터 API

앱 라우터에서는 metadata 객체나 generateMetadata 함수로 <title>, description, Open Graph 태그 등을 선언합니다.

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: { images: [post.cover] },
  };
}

그 외 수단

• 시맨틱 마크업 — <h1>, <nav>, <article> 등 의미 있는 태그 사용.
• sitemap.ts / robots.ts — 사이트맵과 크롤링 규칙을 코드로 생성.
• 이미지 최적화 — <Image>의 alt와 빠른 로딩이 평가에 도움.
• 성능(Core Web Vitals) — LCP·CLS 등 지표가 검색 순위에 영향.
• 구조화 데이터(JSON-LD) — 리치 결과 노출에 활용.

핵심은 서버에서 의미 있는 HTML과 정확한 메타데이터를 제공하는 것입니다.