Open Graph·메타 태그 미리보기

오픈 그래프 메타 태그 미리보기 사용 방법

1. 1

   링크 붙여넣기

   공개된 페이지의 주소를 입력하고 링크 미리보기를 누르면 제목, 설명, Open Graph 태그, X 카드 태그를 읽어 와요.

2. 2

   카드 확인

   Google 검색 결과와 Facebook, X, LinkedIn, Slack, Discord, iMessage 스타일 카드를 비교하고, 빠졌거나 부족한 태그 목록을 확인하세요.

3. 3

   태그 편집

   태그 편집을 누르거나 태그 작성 탭을 열어 제목, 설명, 이미지를 바꾸세요. 입력하는 대로 모든 미리보기가 바뀌어요.

4. 4

   페이지에 복사

   만들어진 메타 태그를 페이지의 head에 복사해 넣고 게시한 뒤, 실제 URL을 다시 확인하세요.

오픈 그래프 메타 태그 미리보기 소개

메타 태그 미리보기는 링크를 공유하기 전에 어떻게 보일지 알려 주는 도구예요. 링크 미리보기를 만드는 데 쓰이는 태그를 읽어 와요. HTML 제목과 메타 설명, og:title, og:description, og:image, og:site_name 같은 Open Graph 태그, twitter:card 같은 X 카드 태그, Discord가 임베드 띠 색으로 쓰는 테마 색상이 대상이에요. 그다음 Google 검색 결과, Facebook과 LinkedIn 링크 게시물, 큰 이미지 또는 요약 형식의 X 카드, Slack 언퍼, Discord 임베드, iMessage 스타일 말풍선까지 일곱 가지 미리보기를 보여 줘요.

빠진 항목이 있으면 대부분의 플랫폼처럼 og:title 대신 페이지 제목을 쓰는 식으로 대체해서 보여 주고, 어디서 가져왔는지는 경고에 표시해요. 이미지도 확인해요. 파일 헤더에서 픽셀 크기와 형식을 읽어, Facebook 최소 기준인 200 × 200보다 작은지, X의 5 MB 제한을 넘는지, 지원하지 않는 SVG인지, 2:1 큰 카드에 맞지 않는 비율인지 알려 줘요.

태그 작성 탭은 아무것도 가져오지 않고 바로 쓸 수 있는 메타 태그 묶음을 만들어 줘요. 미리보기는 실제와 비슷하게 보여 주는 것이라서, 플랫폼이 디자인을 바꾸거나 카드를 며칠씩 캐시하거나 로그인한 사용자에게 다른 텍스트를 보여 줄 수도 있어요. 이미 공유한 카드를 새로 고치려면 게시한 뒤 해당 플랫폼의 디버거를 이용하세요.

기능

오픈 그래프 메타 태그 미리보기: 자주 묻는 질문