Next.js Metadata

App Router 정적 metadata

metadata export는 페이지 제목, 설명, canonical, Open Graph, Twitter 카드 속성을 라우트 계층에서 선언하게 해준다.

01

기본값 정의

root layout에 사이트명, 기본 설명, metadataBase, 공통 OG 이미지를 둔다.

global default
02

페이지 override

각 page는 검색 의도에 맞는 title과 description을 구체적으로 덮어쓴다.

route metadata
03

공유 미리보기

openGraph와 twitter 속성으로 소셜 카드 제목, 설명, 이미지를 맞춘다.

social preview
04

중복 방지

canonical과 alternates로 같은 콘텐츠의 대표 URL과 언어 변형을 정리한다.

canonical
layout
공통 metadata는 하위 페이지가 상속한다. 너무 구체적인 설명을 layout에 두면 모든 페이지가 같은 검색 요약을 갖는다.
inheritance
page
페이지별 핵심 키워드와 사용자 의도를 title/description에 반영한다. 질문형 일반 제목보다 실제 콘텐츠 명사가 더 강하다.
specificity
metadataBase
상대 OG 이미지와 canonical URL을 절대 URL로 해석하는 기준이다. 배포 도메인과 preview 도메인을 구분해 설정한다.
absolute URLs

메타데이터 QA

중복 제목 여러 페이지가 같은 title과 description을 반복하지 않는다.
이미지 크기 OG 이미지는 권장 비율과 접근 가능한 URL을 가진다.
검색 의도 description이 내부 구현보다 사용자가 찾는 내용을 설명한다.

정적 metadata

export const metadata = {
  title: "상품 목록",
  description: "카테고리별 상품을 비교합니다",
        overflow-wrap: break-word;
        word-break: keep-all;
      };