언제 쓰나
블로그·랜딩·뉴스레터를 발행하기 직전, 카카오톡·X·Slack 으로 공유될 때 링크 카드가 어떻게 보일지 확인할 때 씁니다. 특히 미공개 staging URL, 사내 페이지, localhost 처럼 외부에서 접근할 수 없는 페이지의 카드를 미리 검증할 때 유용합니다.
두 입력 모드
- 필드 모드 — og:title · og:description · og:image · og:url 등을 직접 입력. 메타태그 작성 전 단계에서 어떤 값을 박을지 미리 그려보는 용도.
- HTML 붙여넣기 모드 — 작성한 head 영역의 메타태그 (또는 페이지 HTML 전체) 를 붙여넣으면 og:* · twitter:* · 표준 태그를 자동 추출.
7 플랫폼 동시 미리보기
카카오톡 · X / Twitter · Facebook · LinkedIn · Discord · Slack · iMessage. 각 플랫폼은 카드 모양·제목 길이·이미지 비율이 다릅니다.
- 카카오톡 — 정사각 썸네일 + 짧은 제목. 한국 트래픽의 큰 비중이 카톡 공유에서 옵니다. 글로벌 도구 대부분이 안 다루는 형식.
- X (구 Twitter) —
twitter:card="summary_large_image"시 1.91:1 큰 이미지 카드. 제목 ~70자. - Facebook · LinkedIn — 1.91:1 이미지 위 메타 영역.
- Discord · Slack — rich embed 스타일, 좌측 컬러 바.
- iMessage — 둥근 모서리 카드, 큰 이미지 + 제목 + 도메인.
URL 을 fetch 하지 않습니다
기존 OG 미리보기 도구 (opengraph.xyz · share-preview.com 등) 는 사용자가 입력한 URL 을 서버에서 가져와 메타태그를 추출합니다. 이는 미공개 URL · 사내망 · localhost 에는 부적합. 본 도구는 사용자가 직접 메타태그를 붙여넣거나 필드로 입력 — 페이지 자체를 가져오지 않습니다.
og:image URL 은 미리보기 표시를 위해 브라우저가 직접 로드합니다 (서버 경유 없음). public URL 이거나 CORS 가 허용된 경우에만 표시되며, 비공개 이미지는 카드 안에 "이미지 없음" 자리로 표시됩니다.
이럴 땐 안 맞습니다
- 공개된 URL 의 기존 메타 검증 — opengraph.xyz 같은 도구가 더 편합니다 (URL 만 입력하면 자동 fetch).
- 이미지 자체의 자동 압축 — 본 도구는 미리보기만. 이미지 크기를 줄이려면 image-compress · image-resize 로 흘려 보내세요.
- 실제 SNS 캐시 갱신 — 페이스북 · 카카오의 share debugger 에서 cache 무효화는 별도 처리. 본 도구는 발행 전 미리보기까지.
URL 을 fetch 하지 않습니다
기존 OG 미리보기 도구 대부분은 사용자가 입력한 URL 을 서버에서 가져와 메타태그를 추출 — 미공개 URL · 비공개 페이지엔 부적합. 본 도구는 사용자가 직접 붙여넣은 HTML 또는 입력한 필드만으로 7 플랫폼 카드 mockup 을 그립니다. og:image URL 은 미리보기 표시를 위해 브라우저가 직접 로드합니다 (서버 경유 없음).