Next.js SEO 완전 가이드: App Router metadata부터 배포 확인까지

학습 목표·선수 지식: SEO 증상을 측정 가능한 점검 순서로 연결합니다. 선수 지식: metadata·HTTP.

Next.js SEO 대표 가이드에서 먼저 볼 순서

아래 순서대로 metadata, 렌더링, 이미지, 배포 점검 글을 이어서 확인합니다.

1. 1단계 · metadata 기본 구조 · Next.js App Router metadata 설정 기준
2. 2단계 · generateMetadata 코드 적용 · Next.js Metadata API 실무 예제
3. 3단계 · SSR과 검색 노출 구조 · Next.js SEO SSR 적용법
4. 4단계 · 현장 점검 체크리스트 · Next.js SEO 현장 점검 체크리스트
5. 5단계 · 배포 중 발생하는 SEO 빌드 오류 · Next.js useSearchParams Suspense 오류 해결
6. 6단계 · 이미지와 외부 도메인 점검 · Next.js Image remotePatterns 오류 해결
7. 7단계 · 배포 후 라우팅·리다이렉트 · Next.js redirects 설정

문제 상황 요약

검색 결과의 제목이 이상하거나, description이 비어 있거나, SNS 공유 이미지가 나오지 않거나, 배포 후 색인이 기대와 다를 때는 Next.js SEO 흐름을 나눠 봐야 합니다. 먼저 metadata가 어디에서 생성되는지 확인하고, 그 다음 렌더링 결과 HTML, OG 이미지 접근성, canonical, sitemap, robots.txt를 순서대로 봅니다.

문제 상황별 Next.js SEO 세부 글

아래 목록은 증상을 기준으로 세부 글을 나눈 것입니다. 검색 결과 제목·설명 문제인지, App Router metadata 문법 문제인지, 이미지·빌드 오류가 함께 있는지 먼저 고르면 이동이 빠릅니다.

문제 상황	먼저 확인할 위치	연결 글
검색 결과 title, description, canonical이 페이지별로 안 나뉨	layout.tsx, page.tsx, metadata export, canonical	Next.js App Router metadata 설정 기준
동적 상세 페이지에서 generateMetadata 적용이 헷갈림	generateMetadata, params, 데이터 요청, fallback 처리	Next.js Metadata API 실무 예제
SSR/SSG/ISR 중 검색 노출에 맞는 렌더링 방식을 고르기 어려움	초기 HTML, 서버 렌더링, 정적 생성, 갱신 주기	Next.js SEO SSR 적용법
metadata, SSR, Image, sitemap 중 어디부터 봐야 할지 모름	증상별 SEO 점검 순서, 공개 HTML, OG 이미지, robots	Next.js SEO 현장 점검 체크리스트
SEO 점검 중 App Router 빌드 오류나 Suspense 오류가 같이 발생	useSearchParams, Suspense boundary, client component	Next.js useSearchParams Suspense 오류 해결
OG/본문 이미지가 깨지거나 외부 이미지 도메인이 막힘	next/image, remotePatterns, 이미지 URL 200 확인	Next.js Image remotePatterns 오류 해결
구 URL을 새 URL로 옮기거나 검색 노출 URL을 정리해야 함	next.config.js redirects, 307/308 상태 코드	Next.js redirects 설정

Next.js SEO 해결 순서

1. 검색 결과나 공유 미리보기에서 어떤 증상이 보이는지 먼저 나눕니다.
2. 정적 metadata인지, 동적 generateMetadata가 필요한 페이지인지 확인합니다.
3. 브라우저 view-source 또는 배포된 HTML에서 title, description, canonical, OG 태그가 실제로 들어갔는지 확인합니다.
4. OG 이미지 URL이 200인지, 외부 이미지라면 접근 가능한지 확인합니다.
5. sitemap과 robots.txt가 색인을 막지 않는지 확인합니다.
6. Vercel 배포 후 Preview와 Production에서 같은 결과인지 다시 확인합니다.

문제 상황별로 이어서 읽기

메타데이터와 검색 미리보기 문제

• Next.js App Router metadata 설정 기준: SEO 개념과 실무 적용
• Next.js Metadata API 실무 예제: metadata 객체와 generateMetadata 코드
• Next.js SEO 현장 점검 체크리스트: metadata API, SSR, Image 순서

렌더링·이미지·배포 중 함께 터지는 문제

• Next.js SEO SSR 적용법: 검색 노출과 렌더링 구조 잡기
• Next.js Image remotePatterns 오류 해결: 외부 이미지 도메인 허용하기
• Next.js useSearchParams Suspense 오류 해결: App Router 빌드가 실패할 때

URL 정리와 배포 후 확인

• Next.js redirects 설정: next.config.js에서 URL 이동 처리
• Vercel Next.js 배포 실패 해결 체크리스트

실무 체크리스트

• 페이지별 title과 description이 중복되지 않는지 확인합니다.
• 동적 상세 페이지는 generateMetadata에서 slug별 값을 반환하는지 확인합니다.
• canonical URL이 실제 공개 URL과 일치하는지 확인합니다.
• OG 이미지 URL이 200이고 이미지 크기와 포맷이 적절한지 확인합니다.
• sitemap에 중요한 URL이 포함되고 robots.txt가 막지 않는지 확인합니다.

자주 묻는 질문

Next.js SEO는 metadata만 설정하면 끝인가요?

아닙니다. metadata는 시작점이고, 실제 HTML 출력, OG 이미지 접근성, canonical, sitemap, robots.txt, 배포 후 확인까지 함께 봐야 합니다.

generateMetadata는 언제 필요한가요?

게시글 상세처럼 slug마다 title과 description이 달라져야 하는 페이지라면 generateMetadata를 사용하는 것이 적합합니다.

배포 후 검색 결과가 바로 바뀌지 않으면 실패인가요?

검색 결과 반영에는 시간이 걸릴 수 있습니다. 먼저 공개 HTML과 sitemap이 올바른지 확인하고, 이후 Search Console에서 재크롤링을 요청하는 흐름이 안전합니다.

Next.js SEO 체크리스트 표

항목	확인할 것	관련 글
metadata	title, description, openGraph 기본값	metadata 가이드
generateMetadata	동적 상세 페이지 title/canonical 생성	App Router metadata
canonical	중복 URL 대표 주소 통일	canonical URL 정리
sitemap	중요 URL 포함, 얇은 URL 제외	sitemap/robots 설정
robots	색인 허용/차단 정책 확인	robots 설정

상황별 먼저 읽을 글

• 검색 결과 제목과 설명부터 잡고 싶다면: Next.js metadata 설정
• 동적 페이지 SEO가 고민이라면: generateMetadata 흐름
• 색인 누락이 걱정된다면: sitemap과 robots 설정
• 중복 URL이 많다면: canonical URL 정리

함께 읽으면 좋은 글

• Next.js window is not defined 오류 해결: 브라우저 API를 안전하게 쓰기
• Next.js hydration failed 오류가 나는 이유와 해결 방법
• Next.js Dynamic server usage 오류 해결: cookies headers 사용 위치 확인하기
• Next.js params should be awaited 오류 해결: App Router params 처리 기준
• Next.js metadata가 적용되지 않을 때 확인할 7가지
• Next.js Server Actions + React Hook Form 검증 기준
• shadcn/ui 설치 오류 해결: components.json과 import alias가 맞지 않을 때

함께 확인하면 좋은 기준

이 글과 관련해 실제 작업에서 같이 확인하면 좋은 기준입니다.

• Next.js Docs: 적용 전 현재 문서의 권장 API, 설정 옵션, 제한 사항이 글의 설명과 맞는지 확인합니다.
• 비슷한 오류를 구분할 때는 발생 위치, 실행 환경, 재현 조건을 먼저 분리해 확인합니다.
• 프로젝트에 적용할 때는 기존 코드 구조, 의존성 버전, 배포 환경에서 같은 기준이 유지되는지 확인합니다.

중복 URL 정책을 먼저 기록합니다

URL 유형	기대 정책	확인
공개 글 상세	200·자기 canonical·사이트맵 포함	본문·metadata·상태
추적 query가 붙은 같은 글	기본 글 canonical	utm 값이 대표 주소를 바꾸지 않음
삭제 글	404/410 정책	홈으로 일괄 redirect하지 않음
로그인 전용 화면	인증·noindex 정책	robots.txt만으로 접근 통제하지 않음

robots.txt는 크롤링 제어이고 인증 장치가 아닙니다. robots 메타의 noindex는 봇이 페이지를 읽어야 발견하므로 robots.txt 차단과 무조건 함께 적용하지 않습니다. 실제 색인 여부는 Search Console에서 별도 확인하며 사이트맵 포함만으로 색인을 보장하지 않습니다.

공식 기준과 확인 범위

확인일: 2026-09-12. API 설명은 Next.js 16 App Router 기준이며 과거 릴리스 글은 본문의 태그 범위를 유지합니다. 부분 API 코드는 기존 프로젝트에 통합하는 예시입니다.

• https://nextjs.org/docs/app/api-reference/functions/generate-metadata
• https://developers.google.com/search/docs/crawling-indexing/block-indexing

공식 자료 재확인: 2026-09-12. 이 글의 실행하지 않은 브라우저/배포 점검은 독자 확인 과제로 구분합니다.