유스풀패러다임

Thoughts on web technology

Published on

페이스북 OpenGraph 프로토콜은 웹 상의 콘텐츠를 페이스북 속 소셜 그래프(social graph)와 연결할 때 사용하는 일종의 메타 데이터(meta data)라고 할 수 있다. 이 프로토콜을 사용하게 되면 웹 상의 어떤 콘텐츠에 대한 메타 정보들, 예를 들면 제목이라든지 URL, 또는 썸네일 이미지나 설명 같은 것들을 그대로 페이스북으로 전달할 수가 있는데, 실제 이런 정보의 전달은 사용자가 웹 페이지에 있는 ""좋아요(Like)" 버튼을 클릭할 때 일어나게 된다. 이 때 페이스북은 전달받은 URL의 페이지를 읽어서 OpenGraph 프로토콜에 맞는 메타데이터 정보가 있는지를 검사하게 되고, 있을 경우 이들 정보를 사용자의 프로파일(담벼락)  등에서 표시할 때 사용하게 된다(그림1).

뿐만 아니라 이렇게 OpenGraph를 통해 연결된 웹사이트의 콘텐츠가 업데이트될 경우 그 업데이트 정보가 해당 콘텐츠를 좋아요(Like)한 사용자에게 곧바로 알려지기 때문에 마치 실시간으로 PUSH를 보내는 것과 같은 기능을 만들어 낼 수도 있다. OpenGraph 프로토콜에 대한 자세한 내용은 페이스북 개발자 문서를 참고하길 바라며, 이 글에서는 이런 페이스북 OpenGraph 프로토콜을 오픈소스 CMS툴인 워드프레스(WordPress)에서 사용하는 방법만 간단히 소개한다.

[그림1] OpenGraph 프로토콜 소개

워드프레스에서 OpenGraph 프로토콜을 사용하는 것은 다른 통상적인 웹사이트에서 OpenGraph를 사용하는 것과 전혀 다를 것이 없다. 통상적으로 어떤 웹사이트에 OpenGraph 프로토콜을 적용하려면 다음과 같은 절차를 거치게 된다.

  1. 웹페이지의 <head> 영역에 페이스북 OpenGraph에서 필요로 하는 일련의 메타 태그를 삽입한다. 이 때 각각의 페이지마다 달라지는 정보들(예: 제목, URL, 썸네일, 설명 등)은 그에 맞게 동적으로 처리해 준다.
  2. 페이스북에서 제공하는 Like 버튼과 같은 플러그인을 웹페이지에 추가한다.
  3. 페이스북 개발자 페이지에 들어가서 웹사이트를 등록하고 app_id를 받아서 앞서 OpenGraph 메타 태그에 적어 준다.

이렇게 해서 만들어진 통상적인 OpenGraph 태그의 구조는 아래와 같다. (자세한 설명은 페이스북 문서 참조)

워드프레스라서 달라지는 점이 있다면 이 메타 태그들을 워드프레스의 템플릿 페이지(통상적으로는 header.php) 에 삽입한다는 정도일 것이다.

참고자료

  • OpenGraph 프로토콜을 적용한 후에는 페이스북에서 제공하는 URL Lint 도구를 이용하여 페이지에 OpenGraph 프로토콜이 제대로 설정되었는지 확인하는 것이 좋다.
  • Like 버튼 플러그인을 직접 적용하지 않고 AddThis 같은 소셜 버튼 위젯과 함께 사용해도 무방하다.
  • 워드프레스 플러그인 중에는 페이스북 OpenGraph 데이터를 직접 내장시켜 주는 여러 종류의 플러그인들이 이미 나와 있다. 이들 중 하나를 사용하면 위의 작업을 직접하는 수고를 덜 수 있어 편리하다. 그 중 Open Graph Pro를 추천함.

blog comments powered by Disqus