open graph란 무엇인가?

 

 

open graph란?

open graph는 카카오톡 같은 sns에 내 웹사이트 링크를 붙여넣으면 프리뷰로 보여주는 이미지를 의미한다. 이미지, 제목, 설명글로 구성되는 open graph는 웹사이트 마케팅에 필수적인 요소다.

 

최근에는 웹사이트에 링크를 클릭하면 자동적으로 과금이 되거나 결제정보가 유출되는 사례가 빈번하게 일어나고 있다. 그만큼 인증되지 않은 불확실한 링크는 클릭을 저해하는 요소 중 하나다.

 

웹사이트를 카카오톡에서 보기 위해서는 meta open graph를 만들어야 한다. open graph protocol은 페이스북에서 처음 만들어졌다. 간편한 사용성 덕분에, 카카오, 네이버에서도 사용하는 기술로 자리 잡았다. 

 

open graph 구성 태그
og:url >> 링크될 URL
og:type >> 웹/앱 타입 설정
og:title >> 해당 링크 제목
og:description >> 해당 링크 설명
og:image >> 해당 링크 이미지

 

open graph 작동방식

SNS에 웹사이트 링크를 붙여 넣는 순간 빠르게 플랫폼에서 일하고 있는 크롤러가 작동한다. 해당 URL을 방문하여 먼저 웹사이트에 있는 meta open graph태그를 읽어와서 미리 보기 템플릿을 작성하여 사용자에게 디스플레이 해주는 것이다.

 

open graph 만드는 방법

기본적으로 웹에 설정해줘야 하는 open graph 태그는 다음과 같다.

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
/* open graph 이미지 적정 사이즈는 1200x630이다. */
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

 

open graph 이미지 설정

오픈그래프 권장 사이즈는 1200x630이다. 오픈 그래프에 들어갈 이미지를 설정해줘야 한다. 이미지 비율은 약 1:1.91이다. 이미지 비율을 맞춰주지 않으면 잘려서 이미지가 반영된다.