utilbox
텍스트2단계쉬움

OG 메타 태그 → 4채널 공유 카드 미리보기

메타 태그를 만들고 카카오·네이버·페이스북·X에서 어떻게 보일지 한 번에 확인.

워크스페이스 캔버스는 데스크톱 전용입니다. 아래 도구 카드의 단독 사용 링크로 모바일에서도 개별 도구를 사용할 수 있습니다.

흐름 단계 (2단계)

1

메타태그 생성기

단독 페이지

제목과 설명만 입력하면 Open Graph, Twitter Card, SEO 메타태그 HTML을 자동으로 생성합니다.

시작 노드출력텍스트
2

OG 카드 미리보기

단독 페이지

제목·설명·이미지·URL을 입력하면 카카오톡·네이버·페이스북·X 4채널 공유 카드를 동시에 미리봅니다. HTML을 붙여넣으면 og:* 메타 태그를 자동 인식.

입력텍스트입력URL종착 노드

블로그 글이나 랜딩 페이지를 발행하기 전, OG 메타 태그가 SNS에서 정확히 어떻게 보일지 확인하지 못한 채 배포한 경험은 누구나 있습니다. 이 템플릿은 메타 태그 생성기로 og:title·og:description·og:image·og:url HTML 블록을 만들고, 그 결과를 OG 카드 미리보기 노드로 바로 흘려 보내 카카오톡 채팅 공유·네이버 검색 카드·페이스북 피드·X(Twitter) 카드 4채널을 한 화면에서 동시에 미리봅니다.

실제 URL을 호출하지 않으므로 아직 배포 전 페이지나 인증벽 뒤에 있는 글의 카드도 미리 검증할 수 있습니다. 채널마다 이미지 자르기 비율(1.91:1·16:9·1:1)과 제목·설명 줄 수가 다르므로, 4개 카드를 한 번에 보면서 카피와 썸네일을 다듬을 수 있습니다.

이런 상황에서 활용하세요

  • 글 발행 전에 SNS 공유 카드가 의도대로 보이는지 한 번에 검증
  • 썸네일 후보 2종을 빠르게 4채널에 시뮬레이션해 비교 결정
  • 메타 태그를 직접 작성하면서 글자수 잘림 위치를 즉시 확인
  • 이미지 CDN·인증벽 뒤에 있어 외부 OG 디버거가 못 가져오는 페이지의 카드 미리보기

관련 템플릿

열기