Open Graph 미리보기
HTML을 붙여넣거나 Open Graph와 Twitter 메타데이터를 직접 입력해 브라우저 로컬에서 공유 미리보기 예시를 확인하세요. 외부 이미지는 불러오지 않으며 실제 플랫폼 화면이나 표시 결과를 재현·보장하지 않습니다.
HTML에서 추출하거나 직접 입력한 Open Graph·Twitter 메타데이터로 예시 공유 카드를 만들고 Twitter 값의 Open Graph 대체 사용 여부를 표시합니다.
소셜 메타데이터 미리보기 방법
- HTML 모드에서 소스를 붙여넣거나 Manual 모드에서 지원 필드를 직접 입력합니다.
- 분석하거나 값을 수정해 Open Graph와 Twitter 스타일의 예시 카드를 갱신합니다.
- 누락 필드와 Twitter 값이 Twitter 메타, Open Graph 대체값, 누락 중 어디에서 왔는지 확인합니다.
미리보기 동작
Open Graph title, description, image, image alt, URL, type, site name과 Twitter card, title, description, image, image alt를 지원합니다.
이미지 URL 자체는 불러오지 않고 URL과 메타데이터를 이용한 자리표시자를 표시합니다. Twitter title·description·image·alt가 비어 있으면 대응하는 Open Graph 값을 대체값으로 사용할 수 있습니다.
개인정보와 제한
붙여넣거나 직접 입력한 값만 브라우저에서 처리합니다. 실제 X·Facebook·LinkedIn·Discord 등의 정확한 렌더러가 아니며 페이지나 이미지를 외부에서 가져오지 않습니다.
Open Graph Preview 자주 묻는 질문
og:image를 실제로 다운로드하나요?
아니요. URL만 메타데이터로 표시합니다.
값을 직접 입력할 수 있나요?
네. Manual 모드에서 지원 필드를 입력할 수 있습니다.
Twitter 값이 없으면 Open Graph를 쓰나요?
제목·설명·이미지·이미지 alt는 구현된 규칙에 따라 Open Graph 대체값을 보여줍니다.
실제 SNS 화면과 똑같나요?
아니요. 플랫폼마다 크롤러, 캐시, 레이아웃, 말줄임 규칙이 다릅니다.
붙여넣은 HTML의 스크립트가 실행되나요?
분리 파싱 전에 실행성·리소스 로딩 마크업을 제거합니다.