App Router

정적 OG는 layout, 데이터별 OG는 generateMetadata에 둔다

Next.js는 라우트 계층의 metadata 값을 합쳐 최종 head 태그를 만든다. 공통값과 상세 페이지 값을 분리하면 공유 카드가 반복되지 않는다.

1. 기본값 app/layout.tsx 사이트 전체 OG
  • siteName, locale, 기본 이미지
  • 모든 하위 라우트가 물려받음
2. 섹션값 app/blog/layout.tsx 섹션별 기본 OG
  • 문서, 블로그, 상품군의 기본 문맥
  • 하위 page가 덮어쓸 여지 유지
3. 상세값 generateMetadata() 데이터별 OG
  • slug, id, 검색어로 title과 image 생성
  • 본문 데이터와 같은 조건으로 조회
브라우저가 받는 최종 head
og:title상품명 또는 글 제목 og:image절대 URL 대표 이미지 og:urlcanonical과 같은 공유 대상
판단 기준 반복되는 브랜드 정보는 layout, 페이지 데이터가 필요한 값은 generateMetadata

상세 페이지 title까지 루트에 고정하면 모든 공유 카드가 같은 링크처럼 보인다.