Open Graph 미리보기

Facebook, Twitter/X, LinkedIn, Slack, Discord에서 페이지가 공유될 때 어떻게 보이는지 미리봅니다. Open Graph 태그를 검증하고 실행 가능한 개선 제안을 받으세요.

Open Graph 미리보기는 무엇인가요?

Open Graph 미리보기 도구는 변경 사항을 게시하거나 배포하기 전에 소셜 미디어에서 누군가가 공유할 때 웹 페이지 링크가 정확히 어떻게 보일지 시뮬레이션합니다. Facebook이 개발하고 현재 사실상 모든 소셜 플랫폼에서 지원되는 Open Graph 프로토콜은 소셜 플랫폼이 풍부한 링크 미리보기 카드를 생성하기 위해 읽는 HTML 메타 태그 세트(og:title, og:description, og:image, og:url)를 정의합니다. 이 태그가 없으면 플랫폼은 페이지의 HTML에서 콘텐츠를 추측하여 이미지 없이, 잘린 제목과 관련 없는 설명으로 보기 흉하고 부정확한 미리보기를 종종 생성합니다. 매력적인 링크 미리보기 카드는 클릭률을 크게 높입니다. 모든 플랫폼 업데이트 후 각 플랫폼에서 테스트하는 것은 번거롭고 느립니다. 이 도구는 하나의 입력에서 다섯 개 플랫폼 미리보기를 모두 동시에 보여주므로 배포 전에 태그를 미세 조정할 수 있습니다.

Open Graph 미리보기 사용 방법

입력 양식에 페이지의 Open Graph 데이터를 입력하세요: og:title(페이지 표시 제목 - 60자 이하 목표), og:description(매력적인 요약 - 120~160자 목표), og:image(미리보기 이미지의 전체 HTTPS URL), 페이지의 정규 URL. 오른쪽 미리보기 패널이 입력하는 동안 실시간으로 업데이트됩니다. Facebook 링크 카드, Twitter/X의 요약 카드와 큰 이미지 요약 카드, LinkedIn 피드 게시물 미리보기, Slack과 Discord의 사이드바 표시에서 링크가 어떻게 보일지 확인할 수 있습니다. 플랫폼 탭 사이를 전환하여 각 미리보기를 개별적으로 검사하세요. 하단의 검증기 패널은 누락된 이미지, 비HTTPS 이미지 URL, 제목 길이, 설명 부족 등 일반적인 문제를 확인하고 구체적인 권장 사항을 제공합니다. 생성된 HTML 메타 태그 스니펫을 복사하여 페이지의 head 섹션에 붙여넣으세요.

자주 묻는 질문

Facebook에서 내가 설정한 것과 다른 미리보기를 보여주는 이유는 무엇인가요?

Facebook은 Open Graph 데이터를 공격적으로 캐시합니다. og: 태그를 업데이트한 후에도 Facebook은 몇 시간이나 며칠 동안 이전 미리보기를 표시할 수 있습니다. 강제로 새로고침하려면 Facebook의 공유 디버거(developers.facebook.com/tools/debug/)를 사용하고 '다시 스크랩'을 클릭하세요. 이렇게 하면 Facebook의 크롤러에게 페이지를 다시 가져와 캐시를 업데이트하라고 지시합니다. LinkedIn에도 유사한 게시물 검사기 도구가 있습니다.

모든 플랫폼에서 최상의 결과를 위해 어떤 이미지 크기를 사용해야 하나요?

1200×630 픽셀이 권장 범용 크기입니다. Facebook(1200×630 필요), Twitter/X(1200×628 권장), LinkedIn(1200×627 권장), Slack/Discord에서 잘 작동합니다. 이미지는 HTTP가 아닌 HTTPS로 제공되어야 합니다. 사진에는 JPEG, 투명도가 있는 그래픽에는 WebP/PNG를 사용하세요. 최소 크기는 200×200 픽셀이지만 600×315보다 작은 것은 큰 카드 형식 대신 작은 썸네일로 표시됩니다.

og:title과 HTML title 태그의 차이는 무엇인가요?

HTML title 태그(브라우저 탭과 검색 엔진 결과에 표시)와 og:title(소셜 공유 미리보기에 사용)은 다를 수 있으며, 종종 달라야 합니다. HTML title은 'JSON 포매터 - 무료 온라인 도구 | UtiliZest'(브랜드 이름이 있는 SEO 최적화)일 수 있고, og:title은 '무료 JSON 포매터 및 검증기'(브랜드 접미사 없이 소셜 공유에 더 매력적)일 수 있습니다. 별도 값을 가지면 각각을 독립적으로 최적화할 수 있습니다.

Twitter와 Facebook에 별도의 태그가 필요한가요?

Twitter는 Open Graph 태그와 별도로 자체 메타 태그 세트(twitter:card, twitter:title, twitter:description, twitter:image)를 가집니다. 그러나 Twitter는 트위터 전용 태그가 없을 때 자동으로 og: 태그로 대체합니다. 대부분의 사이트에서 og: 태그를 설정하면 Facebook, LinkedIn, Slack, Discord, 기본 Twitter에서 커버리지를 얻습니다. 최소한 twitter:card(큰 카드 형식을 위해 'summary_large_image'로 설정)를 추가하고 선택적으로 다른 값을 twitter: 태그로 중복 설정하여 최상의 Twitter 경험을 제공하세요.

링크 미리보기에 이미지가 표시되지 않는 이유는 무엇인가요?

일반적인 원인: og:image URL이 HTTPS 대신 HTTP를 사용(대부분의 플랫폼은 비보안 이미지를 차단), 이미지 URL이 404를 반환하거나 접근에 인증 필요, 이미지 파일이 너무 작음(200×200px 미만), 이미지 MIME 유형이 인식되지 않음(.jpg, .png, .webp 사용), og:image 태그 누락 또는 잘못된 형식. 또한 이미지가 외부 크롤러에게 접근 가능한지 확인하세요. localhost URL이나 VPN 또는 방화벽 뒤의 이미지는 소셜 플랫폼이 가져올 수 없습니다.