OG 미리보기 시뮬레이터

Open Graph(OG) — 한 줄 요약

Open Graph는 2010년 Facebook이 만든 메타데이터 규약으로, URL이 공유될 때 어떤 카드로 표시될지를 페이지 작성자가 직접 지정할 수 있게 합니다. 카카오톡·Facebook·LinkedIn·Slack·Discord는 모두 OG 태그를 읽고, X(Twitter)만 자체 twitter:* 태그를 먼저 참조합니다(없으면 OG로 대체). Open Graph 명세(ogp.me)가 필수로 정한 속성은 og:title·og:type·og:image·og:url 네 가지입니다.

• og:title — 카드 헤드라인 (필수)
• og:type — website·article·video.movie 등 (필수 — 이 도구의 코드 생성은 값이 없으면 website로 채움)
• og:image — 카드 썸네일 (필수, 1200×630 권장)
• og:url — 이 페이지의 대표(canonical) URL (필수)
• og:description — 카드 본문 한두 문장 (선택이지만 권장)
• og:site_name — 사이트 이름, 플랫폼에 따라 카드에 출처로 표시 (선택)
• og:locale — 언어_지역 형식, 기본값 en_US이므로 한국어 페이지는 ko_KR (선택)

이 도구의 검증은 명세 필수 여부보다 실제 카드 표시를 기준으로 합니다. 제목·이미지가 없으면 오류, og:title·og:image 없이 <title>이나 twitter:image로 대신 표시되는 경우는 경고로 알리고, 제목은 60자·설명은 160자를 넘으면 잘릴 수 있다고 표시합니다. 이 글자 수 기준은 플랫폼이 공개한 값이 아니라 카드 폭에서 흔히 잘리는 길이를 잡은 실무 기준입니다.

카카오톡 OG 가이드 — 가장 까다로움

한국에서 가장 중요한 공유 채널이면서, 캐시 때문에 수정이 바로 반영되지 않아 가장 자주 문의가 생기는 곳이 카카오톡입니다. 다음 규칙을 알고 있으면 대부분의 문제를 피할 수 있습니다.

플랫폼별 카드 차이 한눈에

같은 태그를 넣어도 플랫폼마다 이미지 비율, 캐시 기간, 수정 반영 방법이 다릅니다. 캐시 기간은 각 플랫폼 공식 문서에 적힌 값만 적었고, 공개되지 않은 곳은 비공개로 표시했습니다.

1200×630 안전 영역 — 제목 텍스트, 어디까지 잘리나

1200×630 한 장으로 통일해도 플랫폼마다 표시 비율이 달라 가장자리가 잘립니다. X는 카드 비율에 맞춰 이미지를 잘라 표시하고, Facebook은 “1.91:1에 가깝게 유지해야 피드에서 크롭 없이 전체가 표시된다”고 공식 문서에 명시합니다. 1200×630 원본이 각 비율에서 잃는 픽셀을 계산하면 이렇습니다(중앙 크롭 기준 — 크롭 위치는 앱 버전에 따라 달라질 수 있으니 중앙 배치가 안전).

상하 15px 크롭은 여유가 있지만, 진짜 위험은 정사각 썸네일 — 좌우 폭의 절반 가까이가 사라집니다. 제목 텍스트·로고는 중앙 80% 영역(가로 960×세로 504px) 안에 두고, 정사각 크롭까지 버텨야 한다면 핵심 요소를 중앙 630px 폭 안에 배치하세요. Facebook 공식 기준으로 이미지는 최소 200×200px 이상이어야 하고, 600×315px 이상이어야 큰 이미지 카드로 표시되며, 파일 용량은 8MB를 넘을 수 없습니다.

프레임워크별 삽입 위치 — 순수 HTML·Next.js·워드프레스

검증이 끝났으면 실제 코드에 넣을 차례. 순수 HTML이라면 <head> 안에 명세 필수 4개(og:title·og:type·og:image·og:url)에 og:description·twitter:card를 더한 아래 6줄이 최소 세트입니다 — 이 도구의 코드 생성 결과와 같은 골격이에요.

<meta property="og:title" content="글 제목" />
<meta property="og:description" content="한 줄 설명" />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />

OG 태그는 property 속성, 트위터 태그는 name 속성을 쓰는 것이 각 명세의 표기입니다. 이 도구의 HTML 분석은 두 속성을 모두 읽지만, 일부 크롤러는 한쪽만 읽으므로 명세대로 적는 편이 안전합니다.

Next.js(App Router)는 메타태그를 직접 쓰지 않고 page.tsx의 metadata 객체로 선언합니다. 같은 라우트 폴더에 opengraph-image.png(또는 ImageResponse를 반환하는 opengraph-image.tsx)를 두면 og:image 태그가 자동 생성됩니다. 아래처럼 이미지에 상대 경로를 쓰려면 루트 layout에 metadataBase를 지정해야 절대 URL로 바뀌어 출력됩니다.

// app/blog/[slug]/page.tsx
export const metadata = {
  openGraph: {
    title: '글 제목',
    description: '한 줄 설명',
    url: 'https://example.com/blog/1',
    siteName: '사이트 이름',
    images: [{ url: '/og.png', width: 1200, height: 630 }],
    type: 'article',
  },
  twitter: { card: 'summary_large_image' },
}

• 워드프레스 + Yoast SEO — 글 편집 화면의 Yoast SEO 박스에서 소셜(Social) 탭을 열면 게시물별 OG 이미지·제목·설명을 지정할 수 있고, 여기 입력한 이미지가 대표 이미지보다 우선 적용됩니다.
• 워드프레스 + Rank Math — 메타박스의 Social 탭에서 Facebook용·X용 이미지를 따로 설정하고, X 카드 타입(summary / summary_large_image)도 선택합니다.
• 어느 쪽이든 발행 후 이 도구에 URL을 넣어 실제 출력을 확인하고, 수정했다면 카카오·Facebook 캐시를 초기화하세요.