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

• 문제 상황 요약
• 관련 오류 목록
• Next.js SEO 해결 순서
• 개별 글 링크
• 실무 체크리스트
• 자주 묻는 질문

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

이 글은 Next.js SEO 실무 점검의 대표 허브입니다. metadata 문법, SSR 구조, 이미지·색인·배포 확인처럼 세부 주제가 겹치지 않도록 아래 순서대로 상세 글을 연결합니다.

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, 301/302 상태 코드	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에서 재크롤링을 요청하는 흐름이 안전합니다.