Open Graph 공유 카드

페이지 메타데이터

layout/page에서 metadata.openGraph를 정의하거나 generateMetadata로 동적 값을 만든다.

route segment 병합

정적 og 이미지, 동적 ImageResponse, fallback 이미지를 우선순위로 정한다.

1200x630 권장

Next.js가 og:title, og:description, og:url, og:image 태그를 렌더링한다.

source 확인

플랫폼이 URL을 긁어 카드로 저장하므로 수정 뒤 캐시 갱신 도구로 재수집한다.

debugger 필요

relative image

이미지 절대 URL 누락 metadataBase가 없으면 배포 환경에서 og:image가 잘못 해석될 수 있다.

metadataBase 확인

dynamic title

DB 조회 실패 시 빈 카드 generateMetadata는 notFound, fallback title, cache 정책을 함께 가져야 한다.

오류 기본값

wrong ratio

이미지가 잘리거나 작게 보임 플랫폼별 최소 크기와 1.91:1 비율을 기준으로 원본을 준비한다.

카드 캡처 테스트

stale cache

수정해도 SNS 카드가 바뀌지 않음 Facebook Sharing Debugger, X Card Validator류 도구에서 재스크랩한다.

크롤러 캐시

head 태그 배포 URL의 HTML에서 og:title, og:description, og:image가 실제로 존재하는지 본다.

절대 주소 og:url과 og:image가 운영 도메인의 절대 URL로 나오는지 확인한다.

fallback 동적 데이터가 없을 때도 브랜드/섹션 기본 이미지가 들어가야 한다.