OpenGraph 이미지

권장 사이즈는 1200 X 630

비율은 1:1.91 / 이미지 비율을 맞추지 않으면 잘림.

OpenGraph 프로토콜

OpenGraph 태그는 URL를 통한 메타정보에서 사이트의 미리보기, 제목, 설명, 이미지의 정체성을 썸머리 형태로 제공하는 기능 및 기법 이다.

페이스북이나, 네이버, 카카오등 요즘 차세대 사이트들에서는 이러한 정보를 기본적으로 제공하고 있다.
예를들어 페이스북에서 정의된 Meta Tag Protocol은 , URL로 Facebook에 공유될 때 콘텐츠가 표시되는 방식을 관리하기 위한 Markup 기법이다.
현재 표준안은 오픈소스로 http://ogp.me / 에 공개되어 있다.

최근 대거 서비스들이 오픈그래프 서비스를 지원하기 시작하면서 점점 더 이 미리보기 페이지에 들어가는 og:title, og:description, og:image를 넣는 것이 중요해지고 있다.
(네이버 스마트 에디터 3.0 출시 이후부터 오픈그래프 더욱 강조하기 시작)

og:title, og:description, og:image를 HTML의 head에 반드시 넣고, 제대로 반영되었는지를 "Sharing Debugger"를 통해서 확인한다.
실제로 카카오톡, 페이스북, 네이버 블로그 등 사용하고자 하는 마케팅 채널에 링크를 넣고 미리보기 화면을 확인한다. (실제 보여지는 이미지가 사이즈가 각 서비스마다 다르기 때문에 반드시 주의할 것)
가능하다면 A/B 테스팅을 통해서 어떤 문구나 이미지가 가장 좋은 효과를 보이는지 확인한다.

OpenGraph 메타정보

여기서 말하는 메타 데이터란 쉽게 말하면 해당 웹페이지를 구성하는 여러 구조화된 정보들 제목, 설명, 이미지 등을 명시적으로 웹페이지쪽에서 직접 정해서 표기해준 것을 말한다.
최근 카카오톡 및 기타 메신져 활용으로 인한 바이럴하게 공유되는 상황에서 링크를 통한 정보가 유용하게 쓰이고 있으며, 단순한 링크를 제공하는 것이 아닌 사이트의 기본적인 정보를 함께 제공함으로서 마케팅 활용에도 유용하게 사용되고 있다.
다음과 같이 주소 링크를 통하여 고객 또는 상대에게 공유 및 전달을 하게 될 경우 http://www.bbc.com/news/science-environment-40535631
아래와 같이 이미지, 제목, 간략설명 등의 명시적 썸머리 정보를 제공하여 보다 효율적으로 콘텐츠를 마케팅 할 수 있다.

크롤러도 하나의 소프트웨어 프로그램인지라 HTML 문서를 보면 자동으로 무엇이 제목인지, 무엇이 내용에 대한 3줄 요약인지, 무엇이 대표 이미지인지 100% 자동으로 판별하기 아주 어렵다.
따라서 웹사이트가 직접 저렇게 적어서 알려줘야 하는 것이다.
그리고 이런 메타 데이터를 표기하는 방법에 대한 기본 방법(기본 HTML5 title, description 태그 등)을 제외한 제 3의 방법 중 비교적 통일되고 인정된 방법으로서 우리가 알아보고자 하는 페이스북의 오픈그래프(Open Graph) 프로토콜이 있고, 이 오픈그래프 프로토콜이 우리가 보는 미리보기 화면의 실체를 구성하는 메타 데이터 표기방법이다.

결론적으로 우리가 미리보기를 통해 보는 제목, 설명, 이미지는 이렇게 HTML 문서의 head에 표기된 오픈그래프 프로토콜에 의해서 나타나고 있으며, 구체적인 작동 원리는 다음과 같다.

사용자가 링크를 입력창에 입력합니다.
페이스북, 네이버 블로그, 카카오톡은 입력창의 문자열이 "링크"라는 것을 파악합니다. (흔히 말하는 정규표현식으로 해당 문자열이 링크라는 것을 알아냅니다.)
링크라는 것이 파악되면 페이스북, 네이버 블로그, 카카오톡의 크롤러는 미리 그 웹사이트를 방문해서 HTML head의 오픈그래프(Open Graph) 메타 데이터를 긁어옵니다.
이중에서도 og:title, og:description, og:image가 각각 제목, 설명, 이미지의 정보를 나타냅니다.
그리고 그 정보를 바탕으로 미리보기 화면을 생성해주게 됩니다.

OpenGraph 기본소스

<head>
...
<meta property="og:type" content="website" />
<meta property="og:title" content="페이지 제목" />
<meta property="og:description" content="페이지 설명" />
<meta property="og:image" content="http://www.mysite.com/article/article1_featured_image.jpg" />
<meta property="og:image:width" content="이미지 가로폭" />
<meta property="og:image:height" content="이미지 가로폭" />
<meta property="og:locale" content="ko" />
<meta property="og:url" content="http://www.mysite.com/article/article1.html" />
<meta property="og:site_name" content=＂사이트 명" />
...
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="페이지 제목">
<meta name="twitter:description" content="페이지 설명">
<meta name="twitter:image" content="http://www.mysite.com/article/article1.html">
<meta name="twitter:domain" content="사이트 명">
...
</head>

오픈그래프 웹사이트에 가면 아래와 같이 오픈그래프에 대한 간단한 설명이 나와있다.

오픈그래프 프로토콜은 페이스북에서 처음 만들어졌으며, Dublin Core, link-rel canonical, Microformats, 그리고 RDFa로부터 영감을 받았습니다. 이 페이지의 설계서는 버전 0.9의 Open Web Foundation Agreement 아래에서 사용 가능합니다. 이 웹사이트는 오픈소스이며, 2014년 10월 20일에 최종 업데이트 되었습니다.

오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌다.
그 간편함으로 인하여 현재는 그 창시자인 페이스북은 물론이고, 네이버 블로그, 카카오톡 등에서도 널리 사용하고 있다.

위에서 보듯이 기본적인 메타 데이터로는 제목(title), 설명(description), 대표 이미지(image), 표준 링크(url) 등이 있으며, (여기서 canonicanl link, 즉 표준 링크란 같은 콘텐츠를 가리키는 여러 개의 URL 중에서 대표 하나의 URL을 말함. 이는 현실에 있는 실제 대상들을 가상의 그래프 기반 데이터베이스로 표현하려는 페이스북의 거대한 계획에서 중요한 요소, 하나의 대상은 원칙적으로 단 하나의 링크만으로 참조되어야 하기 때문) 이외에도 그 대상에 대한 구조화된(Structure) 데이터를 표현할 수 있는 여러 메타 데이터 표기용 태그들이 지원되고 있다.

우리 웹사이트의 오픈그래프 적용 여부, 어떻게 알아보나?

OpenGraph 디버깅

페이스북은 오픈그래프에 대한 개발자들과 마케터들의 디버깅을 지원하기 위해 "Sharing Debugger"를 지원하고 있다.

사이트에 들어가서 검사하고 싶은 링크를 입력하기만 하면 디버깅으로서 정보를 확인 하면 된다.

OpenGraph 사용성

오픈그래프는 웹의 세계에서 아주 높은 위상을 가지고 있으며 점차 그 수치가 오르고 있는 추세이다.
오늘날 웹페이지들이 어떤 기술을 가지고 만들어졌는지를 분석해주는 사이트 builtwith의 통계에 따르면 오픈그래프는 웹문서를 이루고 있는 여러 기술들 중에서 상당히 상위권에 포진하고 있다.

트위터만의 메타데이터

모두가 "페이스북"의 제목, 설명, 이미지 식의 오픈그래프 사용법에 동의하는 것은 아니다.
우리가 크게 많이 사용하는 페이스북, 네이버 블로그, 카카오톡 등 대다수의 서비스에서는 오픈그래프 프로토콜에만 준하여 미리보기를 보여주지만 트위터는 이에 더하여 자체적인 메타데이터 표기법을 가지고 있다.

Twitter Card

트위터에서 정의된 Meta Tag, Open Graph 대비 많은 옵션을 제공한다.
표준안은 https://dev.twitter.com/cards/overview 에 공개되어 있으며 많은 정보를 참조 하기 바란다.

만약 트위터에서 제공하는 메타데이터만 있을 경우 자사의 것을 먼저 참조하지만, 오픈그래프만 있을 경우 오픈그래프도 참조하고 있다.
그럼에도 불구하고 트위터의 메타 데이터 표기법도 결국에 오픈그래프를 참조한 것입니다.

OpenGraph 캐시

프로그래밍의 세계에서 캐싱(Caching)은 반복적으로 호출되는 특정한 데이터를 캐시 메모리에 일종의 "임시"로 저장하여 다음 번에 호출될 때 더 빨리 해당 데이터를 공급해주는 것을 말하며,
구체적으로는 데이터베이스에 저장된 어떤 정보를 한 번 불러온 후 캐시 메모리에 저장해놓거나, 어떤 HTML, CSS, JavaScript로 이뤄진 웹문서 전체 혹은 이미지 전체를 캐싱하기도 한다.
Memcached, Redis와 같은 시스템들 및 CDN 시스템을 이용하는 경우에도 속한다.

현재 우리의 모든 웹서비스들, 앱들에는 이러한 캐싱 시스템이 구축되어 있으면 나날이 발전되어가고 있을 것이다.
일반적으로 이런 캐싱에는 TTL(Time-to-Live)라는 소멸시효가 걸려있는데, 이 소멸시효가 지나지 않은 경우 계속적으로 이미 캐싱된 데이터를 참조해서 불러올 수 있다.
따라서 실제로 서버에서 내려주는 HTML 웹문서 상의 오픈그래프는 바꼈을지라도, 이미 캐시된 웹문서가 내려지고 있는 상황일 수 있으며, TTL이 만료되기 전까지는 아무리 본 서버에서 개발자가 다시 개발해줘도, 미리보기는 바뀌지 않을 것이다.단지 디버깅 도구를 통한 정확한 데이터가 표현이 된다면 현재로선 기다리는 수밖에 없다.
페이스북은 다행히 캐싱을 리로드할 수 있는 버튼을 "Sharing Debugger"를 통해서 지원하고 있다.