Open Graph 태그란?

어떠한 사이트를 SNS로 공유 혹은 URL을 복사하여 전송할 때, 해당 사이트를 들어가기 전, 최적화된 데이터를 보여줄 수 있도록 하는 HTML 메타태그이다.

OP graph의 기본 태그

<!-- website type -->
  <meta property="og:type" content="website" />
  <!-- site name : Starbucks -->
  <meta property="og:site_name" content="Starbucks" />
  <!--  -->
  <meta property="og:title" content="Starbucks Coffee Korea" />
  <meta property="og:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
  <meta property="og:image" content="./images/starbucks_seo.jpg" />
  <meta property="og:url" content="<https://starbucks.co.kr>" />

op:title 컨텐츠의 타이틀

op:url 웹 페이지의 url

og:type 웹 페이지의 타입 (blog, website, 등)

og:image 표시되는 이미지

og:site_name 웹사이트 이름

og:description 설명

이 외에도, 트위터는 twitter:image, 안드로이드는 al:android iOS는 al:ios 등으로 표현하여 표시한다.

적용 예)