Open Graph 미리보기

URL의 OG·트위터 카드 메타태그를 가져와 공유 카드 미리보기를 보여줍니다.

Open Graph 미리보기는 페이지의 URL을 입력하면 서버가 해당 HTML을 가져와 og:title·og:description·og:image 등 Open Graph 메타태그와 트위터 카드(twitter:*) 태그를 추출해, 페이스북·카카오톡·슬랙·링크드인 등에서 링크를 공유할 때 실제로 보이게 될 카드 모양을 미리 보여줍니다. 디자인을 배포 전에 점검하기 좋습니다.

공유 카드가 깨지거나 썸네일이 안 뜨는 가장 흔한 원인은 og:image 누락·잘못된 절대 URL·og:title 미설정입니다. 이 도구는 실제 SNS 크롤러처럼 페이지를 한 번 가져와 어떤 태그가 비어 있는지 한눈에 보여주므로, 무엇을 고쳐야 하는지 바로 알 수 있습니다.

페이지 URL예: https://example.com/article (전체 URL을 입력하세요)

핵심 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 태그 생성기로 필요한 메타태그를 한 번에 만들 수 있습니다.

이미지 사양·잘림 기준 (플랫폼별)

같은 og:image라도 플랫폼마다 권장 크기와 잘림 비율, 캐시 갱신 도구가 다릅니다. 카드가 위아래로 잘리거나 흐릿하게 나오는 문제는 대부분 비율·해상도가 권장값과 다르기 때문입니다.

플랫폼	권장 이미지	우선 태그	캐시 갱신
Facebook / 카카오톡	1200×630 (1.91:1)	`og:image`	Sharing Debugger / 카카오 캐시 초기화
X (Twitter)	1200×628 (large) / 144×144↑ (summary)	`twitter:image` → `og:image`	Card Validator
LinkedIn	1200×627	`og:image`	Post Inspector
Slack / Discord	1200×630 권장, 정사각형도 허용	`og:image`	URL 뒤 `?v=2` 등 쿼리 변경

크롤러가 보는 것: 실제 예시

예를 들어 <meta property="og:image" content="/images/cover.png"> 처럼 상대 경로를 넣은 페이지를 조회하면, 크롤러는 도메인을 붙이지 못해 /images/cover.png라는 깨진 주소로 이미지를 찾습니다. 결과 카드에는 썸네일 자리가 비고 og:image는 “상대 경로” 경고로 표시됩니다. 이를 content="https://example.com/images/cover.png" 로 바꾸면 동일 페이지에서 정상 카드가 렌더링됩니다. 또한 og:title이 비어 있으면 미리보기는 자동으로 <title> 태그 텍스트로 대체해 보여주므로, 카드 제목과 브라우저 탭 제목이 다르게 나오는 원인도 함께 확인할 수 있습니다.

흔한 실수 / 함정

og:image에 로그인·핫링크 차단이 걸린 이미지를 쓰면, 브라우저에선 보여도 크롤러는 받지 못해 카드가 빕니다. 로그아웃 상태에서 이미지 URL을 직접 열어 확인하세요.
태그를 name= 대신 property=로 써야 합니다. OG는 property="og:image", 트위터는 name="twitter:image"로 속성 이름이 서로 다릅니다.
미리보기가 멀쩡한데 실제 SNS만 옛 카드를 보인다면 도구 문제가 아니라 플랫폼 캐시 문제입니다. 위 표의 디버거에서 직접 갱신해야 합니다.

자주 묻는 질문

왜 실제 SNS와 카드 모양이 조금 다른가요?

플랫폼마다 사용하는 태그 우선순위와 글자수 잘림, 이미지 비율이 다릅니다. 이 미리보기는 페이스북식 카드를 기준으로 보여주며, 실제 표시는 각 플랫폼 정책에 따라 달라질 수 있습니다.

썸네일(og:image)이 비어 있다고 나옵니다.

페이지에 og:image 메타태그가 없거나 값이 절대 URL이 아닐 수 있습니다. https로 시작하는 공개 이미지 절대 URL을 og:image에 넣으세요.

입력한 URL이 외부로 전송되나요?

조회는 우리 서버가 대신 수행하며, 결과만 브라우저로 돌려줍니다. 사내·내부 IP 등 접근이 차단된 주소는 보안상 조회하지 않습니다.

변경했는데 옛 카드가 보입니다.

이 도구는 결과를 약 120초 캐싱하고, 각 SNS도 자체 캐시를 둡니다. 잠시 후 다시 시도하거나 해당 플랫폼의 공식 디버거에서 캐시를 갱신하세요.