Open Graph 미리보기
URL의 OG·트위터 카드 메타태그를 가져와 공유 카드 미리보기를 보여줍니다.
Open Graph 미리보기는 페이지의 URL을 입력하면 서버가 해당 HTML을 가져와 og:title·og:description·og:image 등 Open Graph 메타태그와 트위터 카드(twitter:*) 태그를 추출해, 페이스북·카카오톡·슬랙·링크드인 등에서 링크를 공유할 때 실제로 보이게 될 카드 모양을 미리 보여줍니다. 디자인을 배포 전에 점검하기 좋습니다.
공유 카드가 깨지거나 썸네일이 안 뜨는 가장 흔한 원인은 og:image 누락·잘못된 절대 URL·og:title 미설정입니다. 이 도구는 실제 SNS 크롤러처럼 페이지를 한 번 가져와 어떤 태그가 비어 있는지 한눈에 보여주므로, 무엇을 고쳐야 하는지 바로 알 수 있습니다.
핵심 OG 태그
- og:title: 공유 카드의 제목. 없으면 og:title 대신 페이지 title이 쓰이기도 합니다.
- og:description: 카드 본문 설명. 대략 2~4줄로 잘립니다.
- og:image: 썸네일 이미지. 절대 URL 권장(권장 비율 1.91:1, 최소 1200x630).
- og:url: 정규 URL(canonical). 추적 파라미터가 붙은 주소 대신 깨끗한 주소를 넣습니다.
- og:type: website / article 등 콘텐츠 유형.
트위터 카드
트위터(X)는 twitter:card·twitter:title·twitter:image 등 별도 태그를 우선합니다. 다만 이 태그가 없으면 대부분 og:* 값으로 대체(fallback)되므로, OG 태그를 잘 갖추면 대부분의 플랫폼을 한 번에 커버할 수 있습니다. 요약 카드는 twitter:card=summary, 큰 이미지 카드는 summary_large_image 입니다.
썸네일이 안 보일 때
og:image가 상대 경로이면 일부 크롤러가 인식하지 못합니다. 반드시 https로 시작하는 절대 URL을 쓰고, 이미지가 공개적으로 접근 가능한지(로그인·핫링크 차단 없음) 확인하세요. 캐시 때문에 옛 카드가 보일 수 있으므로 각 플랫폼의 디버거에서 캐시를 갱신하는 것도 도움이 됩니다. OG 태그 자체를 처음부터 만들고 싶다면 Open Graph 태그 생성기로 필요한 메타태그를 한 번에 만들 수 있습니다.