분류: 개발 도구
오픈 그래프 미리보기
페이지의 링크 카드가 공유될 때 어떻게 보이는지 미리보기
페이지의 <head> 태그를 붙여넣으면 링크가 공유 카드로 어떻게 렌더링되는지, 그리고 누락된 오픈 그래프와 트위터 카드 필드가 무엇인지 체크리스트로 확인할 수 있습니다. 모든 파싱은 브라우저 안에서 이루어지며, 아무것도 가져오거나 업로드하지 않습니다.
링크 미리보기
uselocaltools.comLocalTools — Free Privacy-First Online ToolsFast, free browser-based tools for developers and everyday tasks.
체크리스트
og:title이 설정됨
og:description이 설정됨
og:image가 설정됨
og:url이 설정됨
twitter:card가 설정됨
설명이 200자 이하임
이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.
이 도구로 할 수 있는 일
링크가 소셜 미디어나 채팅 앱에서 공유되면, 미리보기 카드는 페이지 내용이 아니라 <head>에 있는 오픈 그래프 및 트위터 카드 메타 태그를 바탕으로 만들어집니다. 태그가 누락되거나 형식이 잘못되면 제목이 비거나, 이미지가 없거나, 아예 카드가 표시되지 않게 됩니다. 이 도구는 붙여넣은 태그를 읽어 공유 플랫폼이 실제로 렌더링할 카드를 보여주고, 그 옆에 어떤 항목이 존재하는지 체크리스트로 알려줍니다.
사용 방법
- 페이지의 <head> 영역이나 메타 태그만 복사하세요.
- 입력란에 붙여넣으세요.
- 렌더링된 미리보기 카드와 아래의 체크리스트를 확인하세요.
개인정보
이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.
자주 묻는 질문
- 실제 운영 중인 페이지를 가져오나요?
- 아니요 — HTML을 직접 붙여넣어야 합니다. 입력한 내용은 어디로도 전송되지 않으며, 태그는 브라우저에서 파싱됩니다.
- 왜 이미지가 표시되지 않나요?
- 미리보기는 og:image 태그의 URL을 브라우저에서 직접 불러오므로, 해당 URL이 공개적으로 접근 가능해야만 표시됩니다. 이미지 태그 자체가 없으면 카드도 비어 있게 됩니다.
- 오픈 그래프와 트위터 카드 태그를 둘 다 넣어야 하나요?
- 오픈 그래프(og:*)는 Facebook, LinkedIn, Slack을 비롯한 대부분의 플랫폼에서 쓰입니다. Twitter/X는 twitter:* 태그를 먼저 읽고 없으면 오픈 그래프로 대체하므로, 둘 다 설정하면 가장 일관된 결과를 얻을 수 있습니다.