개발
OG 카드 미리보기
제목·설명·이미지·URL을 입력하면 카카오톡·네이버·페이스북·X 4채널의 공유 카드를 동시에 미리봅니다. HTML을 붙여넣으면 og:* 메타 태그를 자동으로 인식합니다.
메타 정보 입력
이미지 (og:image)
권장 1200×630 (1.91:1) · 미리보기는 채널별 비율로 자동 자릅니다
표시 채널
공유 카드 미리보기
카카오톡채팅방 공유 미리보기
domain.com
네이버검색·공유 미리보기
N
사이트페이스북피드 공유 미리보기 (1.91:1)
domain.com
X (Twitter)summary_large_image (16:9)
사용 방법
- 좌측 폼에 페이지 URL·제목·설명·이미지·사이트명을 입력합니다.
- 이미지는 외부 URL을 입력하거나 파일 업로드로 직접 올릴 수 있습니다 (파일은 브라우저 안에서만 처리).
- 우측에서 카카오톡·네이버·페이스북·X 4채널 카드를 동시에 확인하고, 채널 토글로 일부만 비교할 수 있습니다.
- 제목·설명 글자수가 채널별 권장값을 넘으면 카드에서 자동 잘림 표시됩니다 — 잘림 위치를 보고 길이를 조정하세요.
- 메타 태그 생성기에서 만든 HTML 블록을 워크스페이스로 흘려보내면 og:* 태그가 자동으로 미리보기에 채워집니다.
OG 카드 미리보기 자세히 알아보기
OG 카드 미리보기는 블로그·랜딩 페이지·뉴스레터를 SNS에 공유했을 때 어떤 모습으로 노출되는지 미리 확인할 수 있는 도구입니다. 카카오톡 채팅방 공유, 네이버 검색·블로그 공유, 페이스북 피드, X(트위터) summary_large_image 카드를 한 화면에서 동시에 비교할 수 있어, 메타 태그를 한 번 작성하고 4번 다른 곳에서 테스트하는 번거로움 없이 카피와 이미지 자르기 위치를 즉시 검증할 수 있습니다. 다른 OG 검사기들이 실제 URL을 호출해 메타 태그를 가져오는 것과 달리, 본 도구는 **외부 호출 없이 브라우저 안에서만** 미리보기를 렌더링합니다. 아직 배포되지 않은 글의 카드를 미리 확인하거나 사내망·이미지 CDN 인증 환경처럼 외부 크롤러가 접근할 수 없는 경우에도 동작합니다. 채널별로 카드 비율(카카오 1.91:1, X 16:9), 자르기 위치, 제목·설명 라인 수를 정확히 재현하므로 단순 메타 검사기보다 디자인 검증에 적합합니다.
이럴 때 사용하세요
- •블로그 글을 발행하기 전에 카카오톡 공유 시 잘림 위치 확인
- •이미지 1장으로 페이스북·X 양쪽이 모두 깔끔한지 동시 검증
- •이미지 CDN이나 인증벽 뒤에 있어 외부 크롤러가 접근 못하는 페이지의 카드 미리보기
- •서비스 카피·썸네일 A/B 테스트 — 후보 2종을 빠르게 4채널 시뮬레이션
- •타사 OG 검사기에 캐시된 옛 이미지 대신, 새 이미지로 카드가 어떻게 보일지 즉석 확인
OG 카드 미리보기 자주 묻는 질문
다른 OG 미리보기 도구와 무엇이 다른가요?
대부분의 OG 디버거(opengraph.xyz, FB Sharing Debugger 등)는 실제 URL을 호출해 메타 태그를 가져옵니다. 본 도구는 호출 없이 입력값만으로 미리보기를 그리므로 ① 아직 배포 전 ② 인증벽 뒤 ③ 사내망 페이지에서도 동작하며, 페이스북·X 공식 도구가 캐시한 옛 이미지가 아닌 지금 입력한 새 이미지를 즉시 비교할 수 있습니다.
왜 채널별로 자르기 위치가 다른가요?
각 SNS가 OG 이미지를 표시하는 비율이 다르기 때문입니다. 페이스북과 카카오톡은 1.91:1(가로 대 세로), X는 16:9, 네이버 검색은 정사각형(1:1)으로 표시됩니다. 같은 이미지라도 위·아래가 잘리는 위치가 달라지니 1200×630 원본을 만들 때 텍스트나 핵심 요소를 가운데에 두는 것이 안전합니다.
메타 태그 생성기에서 만든 HTML도 인식되나요?
네. 워크스페이스에서 메타 태그 생성기를 og-preview 노드 앞에 연결하면 og:title·og:description·og:image·og:url·og:site_name이 자동으로 인식되어 폼이 채워집니다. 직접 HTML을 복사해 붙여넣어도 같은 방식으로 동작합니다 (twitter:* 태그와 <title>·<meta name="description">도 fallback으로 인식).
글자수 제한은 채널별로 어떻게 되나요?
권장값은 제목 50~60자, 설명 110~160자입니다. 카카오톡은 제목 1줄·설명 2줄, 페이스북은 제목 2줄·설명 1줄, X는 제목 1줄(설명 없음)로 표시됩니다. 본 도구는 채널별 줄 수에 맞게 자동 잘림 처리하므로, 잘리는 위치를 보면서 카피를 다듬으면 됩니다.
이미지를 업로드하면 어디로 전송되나요?
어디에도 전송되지 않습니다. 업로드된 이미지는 브라우저의 FileReader로 dataURL로 변환되어 그 자리에서 미리보기에만 사용됩니다. 페이지를 새로고침하면 사라지며 utilbox 서버로 올라가지 않습니다.