Next.js SEO 체크리스트: metadata·초기 HTML·OG 이미지 점검

학습 목표·선수 지식: 검색 제목 문제를 응답·DOM·색인 단계로 분리합니다. 선수 지식: HTML·metadata.

증상부터 나누면 확인할 파일이 보입니다

1. 브라우저 화면이 아니라 실제 metadata부터 확인합니다

먼저 배포 URL의 페이지 소스에서 <title>, description, canonical, robots를 확인합니다. 개발자 도구의 Elements 탭은 클라이언트 실행 후 바뀐 결과를 보여줄 수 있으므로, 검색 엔진이 받는 초기 응답을 확인하려면 페이지 소스나 HTTP 응답 HTML을 같이 봐야 합니다.

검색 결과는 Google이 다시 작성할 수도 있습니다. 그렇더라도 모든 상세 URL에서 동일한 title과 description이 나오거나 값 자체가 비어 있다면 애플리케이션 설정부터 고쳐야 합니다.

2. 정적 metadata와 generateMetadata 위치를 구분합니다

변하지 않는 소개 페이지는 정적 metadata로 충분합니다. 게시글·상품 상세처럼 slug마다 값이 달라지는 페이지는 generateMetadata에서 실제 데이터를 읽어 제목과 설명을 만듭니다. 같은 route segment에서 두 방식을 동시에 export할 수는 없습니다.

app/products/[slug]/page.tsx에 적용하는 generateMetadata 부분 코드입니다. getProduct는 자신의 서버 데이터 모듈에서 import하고 name·summary 필드를 반환하게 합니다. 없는 상품은 notFound로 처리하며 기존 default page export는 유지합니다.

type ProductPageProps = {
  params: Promise<{ slug: string }>;
};

export async function generateMetadata({ params }: ProductPageProps) {
  const { slug } = await params;
  const product = await getProduct(slug);

  return {
    title: product.name,
    description: product.summary,
  };
}

루트 layout의 title template, 하위 page의 title, 절대 제목이 필요한 화면을 구분하세요. 코드 기준은 Next.js Metadata API 완전 정리에서 자세히 확인할 수 있습니다.

3. SSR이라는 이름보다 응답 HTML의 내용을 확인합니다

App Router에서는 Server Component가 기본이지만, 그것만으로 모든 페이지의 검색 노출이 보장되는 것은 아닙니다. 핵심은 검색에 필요한 제목, 요약, H1, 주요 본문이 실제 응답 HTML에 포함되는지입니다.

페이지 전체에 'use client'를 적용하고 마운트 후에만 데이터를 가져오면 초기 HTML이 빈 껍데기에 가까울 수 있습니다. 반대로 서버에서 데이터를 읽어 주요 콘텐츠를 만들고 필요한 버튼이나 필터만 Client Component로 분리하면 검색 콘텐츠와 상호작용을 함께 유지하기 쉽습니다.

4. canonical·robots·사이트맵이 같은 URL을 가리키는지 봅니다

페이지가 정상이어도 canonical이 다른 URL을 가리키거나 robots가 noindex이면 원하는 주소가 색인되지 않습니다. 다음 네 값이 같은 방향인지 확인하세요.

• 브라우저에서 열린 최종 URL
• alternates.canonical로 생성된 canonical
• 사이트맵에 포함된 URL
• 내부 링크가 사용하는 URL

www 유무, http·https, 마지막 슬래시 규칙이 섞이면 같은 콘텐츠의 주소가 여러 개로 보일 수 있습니다.

5. 본문 Image와 OG 이미지를 따로 점검합니다

next/image로 본문 이미지를 표시하는 설정과 카카오톡·메신저 공유에 사용하는 OG 이미지는 다른 항목입니다. 원격 본문 이미지는 images.remotePatterns 허용 범위를 확인하고, 공유 이미지는 openGraph.images, metadataBase, opengraph-image 파일 규칙을 확인합니다.

OG 이미지 URL을 브라우저에서 직접 열어 200 응답, 공개 접근, 이미지 형식과 크기를 확인하세요. 본문 이미지 오류는 Next.js Image remotePatterns 오류 해결에서 별도로 점검할 수 있습니다.

6. 배포 환경과 캐시를 마지막에 확인합니다

로컬에서 metadata를 바꿨는데 배포 페이지가 그대로라면 먼저 새 빌드가 반영됐는지 확인합니다. 그다음 브라우저 캐시, CDN 캐시, 검색 엔진이 보관한 이전 결과를 구분하세요. 배포 URL의 페이지 소스가 새 값이라면 애플리케이션 반영은 끝난 것이고 검색 결과 갱신에는 재크롤링 시간이 필요할 수 있습니다.

curl -L https://example.com/posts/sample | grep -E "title|description|canonical|robots"

최종 체크리스트

• 페이지별 title과 description이 실제 응답에 존재한다.
• 동적 상세 페이지가 slug별 metadata를 생성한다.
• H1과 주요 본문이 응답 HTML에 포함된다.
• canonical, 사이트맵, 내부 링크 URL이 일치한다.
• robots가 의도치 않은 noindex를 만들지 않는다.
• 본문 이미지와 OG 이미지를 각각 직접 열 수 있다.
• 프로덕션 배포의 페이지 소스에 최신 값이 반영됐다.

처음부터 설정 전체를 다시 만들기보다 이 순서대로 실패 지점을 좁히면 수정 범위를 줄일 수 있습니다. 전체 SEO 구조를 새로 설정해야 한다면 Next.js SEO 완전 가이드를 먼저 보고, metadata만 적용되지 않는다면 Next.js metadata 미적용 체크리스트로 이어가세요.

서로 다른 세 결과를 한 기록에 남깁니다

결과	확인 도구	증명 범위
원본 서버 응답	curl document 전체 저장	전송된 HTML·상태·헤더
실행 후 DOM	브라우저 Elements·탭	hydration/streaming 후 출력
검색 결과	Search Console URL 검사	검색 엔진이 최근 수집한 상태

동적 metadata는 스트리밍되어 UI 뒤에 전송될 수 있으므로 head-only 검사 결과를 전체 HTML과 혼동하지 않습니다. HTTP X-Robots-Tag의 noindex도 확인하세요. 본문 robots 태그가 index여도 응답 헤더가 충돌하면 원하는 색인이 되지 않을 수 있습니다. 스크립트의 문자열 안에 title이 있다는 것과 실제 title 요소가 있다는 것도 구분해야 합니다.

공식 문서

• Next.js Metadata and OG Images
• Next.js Server and Client Components
• Next.js Deploying

공식 기준과 확인 범위

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

• https://nextjs.org/docs/app/api-reference/functions/generate-metadata

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