개발자
OG 미리보기 시뮬레이터
카카오톡·페이스북·X·LinkedIn·Slack에서 공유했을 때 어떻게 보일지 한 화면에. 메타태그 검증 + 코드 생성까지.
본 도구는 참고용입니다
- 입력값·환경에 따라 결과가 달라질 수 있으며 정확성을 보장하지 않습니다.
- 중요한 의사결정에는 전문가 조언을 받으세요.
- 미리보기는 실제 카드에 가깝게 시뮬레이션한 결과이며, 각 플랫폼의 알고리즘·캐시 정책에 따라 다르게 표시될 수 있습니다. 카카오톡은 한번 캐시되면 약 48시간 유지되므로 변경 후 카카오톡 캐시 초기화 도구에서 새로고침 권장.
ⓘ 서버를 통해 페이지를 받아와 메타태그를 추출합니다. 일부 사이트는 봇 차단으로 실패할 수 있으니, 그럴 땐 HTML 붙여넣기 모드를 사용하세요.
위 입력칸에 URL이나 HTML을 넣으면 5개 플랫폼 미리보기가 표시됩니다
지원: 🇰🇷 카카오톡 · Facebook · X(Twitter) · LinkedIn · Slack
Open Graph(OG) — 한 줄 요약
Open Graph는 2010년 Facebook이 만든 메타데이터 규약으로, URL이 공유될 때 어떤 카드로 표시될지를 페이지 작성자가 직접 지정할 수 있게 합니다. 카카오톡·Facebook·LinkedIn·Slack·Discord는 모두 OG 태그를 따르고, X(Twitter)만 자체 twitter:* 태그를 우선 참조(없으면 OG로 폴백).
- og:title — 카드 헤드라인 (필수)
- og:description — 카드 본문 (권장)
- og:image — 카드 썸네일 (필수, 1200×630 권장)
- og:url — 페이지 canonical URL
- og:site_name — 사이트 이름 (카드 하단 도메인 영역에 표시)
- og:type — website / article / video.movie 등
- og:locale — ko_KR 등 언어 코드
🇰🇷 카카오톡 OG 가이드 — 가장 까다로움
한국에서 가장 중요한 공유 채널이면서 가장 까다로운 곳이 카카오톡입니다. 다음 규칙을 모르면 카드가 표시되지 않거나 깨집니다.
이미지 비율
2:1 또는 1.91:1
1200×630px 권장. 정사각 1:1은 작게 표시.
이미지 용량
5MB 이하
jpg / png / webp 권장. gif는 첫 프레임만.
캐시
약 48시간
한 번 캐싱되면 변경이 반영 안 됨 — 캐시 초기화 도구 필수.
HTTPS 필수
http는 무시
og:image도 https URL이어야 표시.
문자 인코딩
UTF-8
한글 깨짐 방지 — Content-Type charset 명시.
리다이렉트
직접 URL 권장
단축 URL·리다이렉트 체인은 카드 표시 실패 사례 많음.
💡 메타태그 수정 후 즉시 반영하려면 developers.kakao.com/tool/clear/og 에서 캐시를 초기화하세요(URL 입력 → 조회 → 캐시 삭제).
플랫폼별 카드 차이 한눈에
| 플랫폼 | 이미지 비율 | 캐시 | 특이사항 |
|---|---|---|---|
| 🇰🇷 카카오톡 | 2:1 (1200×630) | 48시간 | HTTPS·og 태그만, 캐시 초기화 도구 필수 |
| 1.91:1 | 24시간~ | Sharing Debugger로 강제 새로고침 가능 | |
| X (Twitter) | 2:1 또는 1:1 | 7일 | twitter:card 별도 — summary_large_image 권장 |
| 1.91:1 | 7일 | Post Inspector로 캐시 초기화 | |
| Slack | 제한 없음 | 1시간 | unfurl_links 옵션 영향, 봇 정책 적용 |
| Discord | 카드 형태 다양 | 재요청 시 | embed.color 등 추가 옵션 지원 |
1200×630 안전 영역 — 제목 텍스트, 어디까지 잘리나
1200×630 한 장으로 통일해도 플랫폼마다 표시 비율이 달라 가장자리가 잘립니다. X는 카드 비율에 맞춰 이미지를 중앙 기준으로 잘라내고, Facebook은 “1.91:1에 가깝게 유지해야 피드에서 크롭 없이 전체가 표시된다”고 공식 문서에 명시합니다. 1200×630 원본이 각 비율에서 잃는 픽셀을 계산하면 이렇습니다(중앙 크롭 기준 — 크롭 위치는 앱 버전에 따라 달라질 수 있으니 중앙 배치가 안전).
| 표시 비율 | 대표 사례 | 잘리는 픽셀 | 살아남는 영역 |
|---|---|---|---|
| 1.91:1 | Facebook·LinkedIn 큰 카드 | 상하 각 약 1px | 사실상 원본 그대로 |
| 2:1 | X 큰 카드·카카오톡 기본형 | 상하 각 15px | 중앙 1200×600 |
| 1:1 | X summary·리스트형 작은 썸네일 | 좌우 각 285px | 중앙 630×630 |
상하 15px 크롭은 여유가 있지만, 진짜 위험은 정사각 썸네일 — 좌우 폭의 절반 가까이가 사라집니다. 제목 텍스트·로고는 중앙 80% 영역(가로 960×세로 504px) 안에 두고, 정사각 크롭까지 버텨야 한다면 핵심 요소를 중앙 630px 폭 안에 배치하세요. Facebook 공식 기준으로 이미지는 최소 200×200px 이상이어야 하고, 600×315px 이상이어야 큰 이미지 카드로 표시되며, 파일 용량은 8MB를 넘을 수 없습니다.
프레임워크별 삽입 위치 — 순수 HTML·Next.js·워드프레스
검증이 끝났으면 실제 코드에 넣을 차례. 순수 HTML이라면 <head> 안에 아래 5줄이 최소 세트입니다 — 이 도구의 코드 생성 결과와 같은 골격이에요.
<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 name="twitter:card" content="summary_large_image" />
Next.js(App Router)는 메타태그를 직접 쓰지 않고 page.tsx의 metadata 객체로 선언합니다. 같은 라우트 폴더에 opengraph-image.png(또는 ImageResponse를 반환하는 opengraph-image.tsx)를 두면 og:image 태그가 자동 생성됩니다.
// 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 캐시를 초기화하세요.
자주 묻는 질문 (FAQ)
Q1. 메타태그를 수정했는데 카카오톡 카드가 그대로예요.
카카오톡은 URL당 약 48시간 캐시가 적용됩니다. 카카오 개발자 도구의 "공유 디버거" 또는 "캐시 삭제" 메뉴에 URL을 넣고 캐시를 갱신하세요. Facebook은 Sharing Debugger, X는 Card Validator(deprecated 됐으나 일부 동작), LinkedIn은 Post Inspector를 사용합니다.
Q2. og:image는 어느 크기·비율이 가장 안전한가요?
1200×630px (2:1)이 가장 보편적입니다. Facebook 권장 1.91:1, 카카오톡 2:1, X 2:1(summary_large_image) — 1200×630 한 장이면 모든 플랫폼에서 잘림 없이 표시됩니다. 파일 형식은 jpg(사진) 또는 png(텍스트·로고), 용량은 5MB 이하 권장. 절대 URL(https://example.com/og.png)을 사용해야 하며 상대 경로는 일부 플랫폼에서 표시 실패합니다.
Q3. URL 입력 모드에서 "페이지를 불러올 수 없다"고 나옵니다.
대상 서버가 봇/스크래퍼를 차단했거나(쿠팡·일부 쇼핑몰), Cloudflare 등 WAF가 우리 요청을 막은 경우입니다. HTML 붙여넣기 모드로 전환해 브라우저 페이지 소스(Cmd+U / Ctrl+U)의 <head> 부분을 복사해 붙여넣으면 동일하게 동작합니다.
Q4. twitter:card는 꼭 따로 넣어야 하나요?
X(Twitter)는 twitter:* 태그를 우선 사용하며, 없으면 og:*로 폴백합니다. 다만 twitter:card 선언이 없으면 카드 표시 자체가 안 되는 경우가 있으므로 <meta name="twitter:card" content="summary_large_image"> 한 줄은 필수에 가깝습니다. summary_large_image는 큰 이미지 카드, summary는 작은 정사각 썸네일 카드.
Q5. og:image에 동적 이미지(서버에서 생성)를 써도 되나요?
됩니다. Next.js의 opengraph-image.tsx, Vercel OG, Cloudflare Workers의 OG 이미지 생성 등이 흔합니다. 단 응답 속도 < 3초, Cache-Control 적용, 안정적인 도메인 사용은 필수. 카카오톡은 응답이 느리면 캐시 갱신을 포기하고 빈 카드를 보여줍니다.
Q6. 같은 페이지를 SNS별로 다르게 보이게 할 수 있나요?
가능합니다. og:*는 공통 폴백으로 두고, twitter:title·twitter:description·twitter:image를 별도 지정하면 X에서만 다른 카드가 표시됩니다. Slack은 og:site_name이 큰 영향을 미치므로 브랜드명 명시 권장. LinkedIn은 og:type=article일 때 더 풍부한 카드를 보여줍니다.
Q7. 검색엔진(SEO)에는 OG 태그가 영향을 미치나요?
직접적인 검색 순위 영향은 없지만, 간접 효과는 큽니다. SNS 공유 → 카드가 매력적 → 클릭률 ↑ → 트래픽 ↑ → 백링크 자연 발생. Google은 title·meta description을 우선 보지만, 일부 검색 결과(Discover 등)에서는 og:image를 썸네일로 사용하므로 둘 다 정성껏 작성하세요.
Q8. 검색이 안 되는 사이트에서도 메타태그가 보이나요?
검색 노출 여부와 OG는 무관합니다. robots.txt나 noindex 메타로 검색은 차단해도, SNS 공유 카드는 정상 표시됩니다. 반대로 검색은 잘 되는데 OG 카드가 비어 있는 경우도 많으니 — 이 도구로 한 번 확인하시는 게 좋아요.