오픈그래프란? - SNS에 공유를 위한 META 태그

Open Graph 프로토콜

---

오픈그래프란?

SNS를 통해 사이트가 공유될 때, 사이트에 대한 메타정보를 보여주기 위한 태그

오픈그래프(Open Graph) 프로토콜은 HTML 문서내의 og:로 시작하는 메타태그를 찾아내여 보여주는 프로토콜(규율,약속)이며 페이스북에서 개발하였습니다.

 

SNS(카카오톡, 페이스북, 트위터, 인스타그램 등)에서 사이트의 정보를 표시할 떄 사용되는데, 만약 메타태그를 지정안할 경우 직접 크롤링하여 표시하게 됩니다. 그렇게되면 본 사이트의 의도와 다르게 표시될 가능성이 높으니 사이트를 만들때는 넣어주는 것이 좋습니다.

Title, Image 등을 표시하는 오픈그래프 예시

오픈그래프 종류

기본(Basic Metadata)

og:title	웹사이트 제목
og:type	웹사이트 종류
og:image	대표 이미지
og:url	웹사이트 정식 URL

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />

고급(Optional Metadata)

og:audio	함께 제공되는 오디오 파일 URL
og:description	오브젝트에 대한 설명
og:determiner	문장에서 오브젝트 앞에 나타낼 단어 (a,an,the,"",auto)
og:locale	사이트 언어
og:locale:alternate	페이지에 사용가능한 다른 언어
og:site_name	사이트의 세부이름 (Title보다 더 작은 개념)
og:video	오브젝트 보완을 위한 비디오 URL

<meta property="og:audio" content="https://example.com/bond/theme.mp3" />
<meta property="og:description" 
  content="Sean Connery found fame and fortune as the
           suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="https://example.com/bond/trailer.swf" />

구조화 속성(Structured Properties)

og:image:url	og:image와 동일
og:image:secure_url	https접속이 필요할 경우 이동할 https 주소
og:image:type	이미지 MIME 타입
og:image:width	width 크기
og:image:height	height 크기
og:image:alt	이미지에 대한 설명 (페이지를 og:image로 지정할 경우 필요)

<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

이외 Arrays와 music, video를 위한 속성들고 제공하고 있으니 필요할 경우 관련글에 있는 참고사이트를 확인하시면 됩니다.

---

※ 관련 글

• https://developers.facebook.com/docs/sharing/webmasters/

웹 마스터 - 공유 - 문서 - Facebook for Developers

• https://ogp.me/

Open Graph protocol

ⓒ 굿햄 2022. daryeou@gmail.com all rights reserved.