OG 태그 미리보기
📋 포맷/변환OG 메타 태그를 편집하면서 Facebook·Twitter·카카오톡 공유 화면을 미리 확인합니다.
OG 태그 설정
💬 카카오톡
내 웹사이트
내 웹사이트 제목
웹사이트에 대한 설명입니다. SNS에서 공유될 때 이 텍스트가 표시됩니다.
📘 페이스북
example.com
내 웹사이트 제목
웹사이트에 대한 설명입니다. SNS에서 공유될 때 이 텍스트가 표시됩니다.
𝕏 트위터/X
내 웹사이트 제목
웹사이트에 대한 설명입니다. SNS에서 공유될 때 이 텍스트가 표시됩니다.
🔗 example.com
메타 태그 코드
<meta property="og:title" content="내 웹사이트 제목" /> <meta property="og:description" content="웹사이트에 대한 설명입니다. SNS에서 공유될 때 이 텍스트가 표시됩니다." /> <meta property="og:image" content="https://placehold.co/1200x630/3b82f6/ffffff?text=OG+Image" /> <meta property="og:url" content="https://example.com" /> <meta property="og:site_name" content="내 웹사이트" /> <meta property="og:type" content="website" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="내 웹사이트 제목" /> <meta name="twitter:description" content="웹사이트에 대한 설명입니다. SNS에서 공유될 때 이 텍스트가 표시됩니다." /> <meta name="twitter:image" content="https://placehold.co/1200x630/3b82f6/ffffff?text=OG+Image" />
📱 카톡으로 링크 보낼 때 보이는 그 카드, 미리 만들어보기
SNS 공유 시 보이는 썸네일 카드를 결정하는 것이 바로 Open Graph 태그입니다. og:title, og:description, og:image, og:url을 입력하면 카카오톡·페이스북·X(트위터) 세 플랫폼에서 어떻게 보일지 실시간 시뮬레이션됩니다.<head>에 그대로 붙여넣을 수 있는 메타 태그 코드까지 자동 생성하며, 입력값은 브라우저 안에서만 처리됩니다.
📋 주요 OG 태그와 권장값
| 태그 | 설명 | 권장 값 |
|---|---|---|
| og:title | 페이지 제목 (카드 헤드라인) | 60자 이내 |
| og:description | 페이지 설명 (서브 텍스트) | 160자 이내 |
| og:image | 미리보기 이미지 URL | 1200×630px |
| og:url | 정식 URL (canonical) | 절대 경로 |
| og:type | 콘텐츠 유형 | website / article 등 |
| og:site_name | 사이트 이름 | 브랜드명 짧게 |
🖼️ 1200×630 이미지를 만들 때 챙겨야 할 것들
- 비율 1.91:1 — 1200×630px이 표준. 정사각형 이미지는 카카오톡에서 위/아래가 잘리는 일이 흔합니다.
- 파일 크기 — 5MB 이하지만, 빠른 캐시 보장을 위해 1MB 미만(보통 200~500KB)이 좋습니다. PNG보단 JPG 80% 품질이 가성비 우위.
- 중요 정보는 중앙 60% 안 — 플랫폼마다 크롭 영역이 미세하게 달라서 가장자리는 잘릴 수 있습니다.
- 텍스트는 이미지 면적의 20% 이하 — 페이스북이 옛날부터 권고해 온 룰. 현재도 노출 가중치에 영향을 줍니다.
- HTTPS 절대 URL — 상대 경로(/og.png)는 외부 크롤러가 해석하지 못합니다. 반드시 https://로 시작하는 전체 주소.
- og:image:width / og:image:height도 같이 적어주면 일부 메신저가 카드를 더 빠르게 그립니다.
⚠️ 캐시 함정
OG 태그를 수정해도 카카오톡·페이스북·X는 이전 정보를 길게 캐시합니다. 반드시 카카오 OG 캐시 초기화, 페이스북 Sharing Debugger, X Card Validator에서 강제 갱신을 거치세요.
💬 플랫폼별 동작 차이
카카오톡
og 태그를 그대로 사용. 캐시가 강해서 수정 후 카카오 디벨로퍼스의 "공유 디버거"로 초기화 필요.
페이스북
Sharing Debugger에서 "Scrape Again"을 눌러야 새 정보 반영. og:site_name이 카드 상단에 노출.
X (트위터)
twitter:card 태그가 우선. summary_large_image면 큰 카드, summary면 작은 카드.
자주 묻는 질문
OG 태그를 수정했는데 카카오톡 미리보기가 여전히 옛날 그대로예요▼
카카오톡은 og 정보를 자체 캐시에 길게 보관합니다. https://developers.kakao.com/tool/clear/og 에 URL을 넣고 캐시를 비우면 보통 30초 안에 새 이미지로 갱신됩니다. 페이스북은 Sharing Debugger, X는 Card Validator를 같은 방식으로 쓰면 됩니다.
og:image는 꼭 절대 URL이어야 하나요? /images/og.png는 안 되나요?▼
네, 외부 크롤러는 도메인 컨텍스트 없이 페이지를 가져오는 경우가 많기 때문에 반드시 https:// 로 시작하는 전체 URL이어야 합니다. CDN URL을 쓰는 게 캐시 안정성과 속도 면에서 가장 무난합니다.
twitter:card 태그와 og 태그를 둘 다 넣어야 하나요?▼
X(트위터)는 og 태그를 폴백으로 읽지만, twitter:* 태그가 있으면 그쪽을 우선합니다. 일관된 결과를 원한다면 og 태그 5개 + twitter:card / twitter:title / twitter:description / twitter:image 정도를 함께 적어두는 게 안전합니다.
동적으로 URL마다 다른 OG 이미지를 만들고 싶어요▼
Next.js라면 app/opengraph-image.tsx 또는 @vercel/og를 쓰면 페이지별 동적 이미지를 만들 수 있고, 다른 프레임워크에서는 Cloudflare Workers + satori 같은 조합이 흔합니다. 본 도구로는 미리 그려둔 결과물을 미리보기 시뮬레이션하는 용도로 사용하세요.