티스토리 뷰

웹사이트와 Facebook Open Graph

pilot376 2013. 7. 18. 00:10

Open Graph?

 

오픈 그래프는 사람들이 관심 있는 것들을 연결해주는 페이스북의 소셜 그래프이다. 사람들은 앱을 이용하여 음악을 듣고, 책을 보고, 영화를 보는 등 많은 활동을 하고 이야기를 만들어내는데, 오픈 그래프에 연결된 앱은 사람들의 활동들과 이야기들을 친구들과 공유할 수 있게 한다. 이런 활동들을 공유하게 되면 관심 있는 친구들은 앱을 다운받거나 참여하게 되는 기회를 갖게 되고, 이것은 개발자에게도 앱이 더 많이 배포되고 성장할 기회를 제공한다.

 

 

사람들이 앱을 타임라인에 추가하거나 오픈 그래프에 맞춰진 앱을 다운로드 하면, 앱은 오픈 그래프를 기반으로 페이스북에 공유하게 된다. 앱은 이런 활동들을 타임라인, 뉴스피드, 티커에 보여준다. 오픈 그래프는 달리기 앱에서는 “run” (action) a “route” (object), 읽기 앱에서는 “read” (action) a “book” (object), 레시피 앱에서는 “cook” (action) a “recipe” (object)처럼 “actions”과 “object”를 기반으로 사람의 활동을 정의할 수 있다. ‘좋아요’ 버튼을 사용할 때에는 ‘나는 무엇을 좋아한다.’라는 표현만이 가능했지만, 오픈 그래프를 통해서 ‘나는 무엇을 들었다.’, ‘나는 무엇을 요리했다.’ 와 같은 내용을 공유할 수 있다.

 

출처 : http://developers.facebook.com/docs/concepts/opengraph/overview/

 

웹사이트와 Open Graph Image

페이스북 뉴스피드에 웹사이트 링크를 공유하면, 웹사이트의 정보를 오픈 그래프 형식으로 공유하게 된다. 이때 공유되는 정보를 설정하는 방법은 두 가지가 있다.

 

HTML tag

첫째는 html의 기본 태그를 이용하는 설정하는 방법이다. <head> 태그 내에 <title> 태그, <link> 태그, <meta> 태그를 이용하여 페이지의 정보를 공유할 수 있다.

 

<title>웹 사이트의 제목</title>
<link rel="image_src" href="대표 이미지 URL" /> (이미지를 여러 개 지정할 수 있음)
<meta name="description" content="페이지 설명" />

 

Open Graph protocol

둘째는 오픈 그래프 프로토콜을 이용하는 방법이다. 아래의 코드를 <head> 내에 작성하면 위와 같은 결과를 공유할 수 있다.

<meta property="og:title" content="웹 사이트의 제목" />
<meta property="og:image" content="대표 이미지 URL" /> (이미지를 여러 개 지정할 수 있음)
<meta property="og:description" content="페이지 설명" />

오픈 그래프 프로토콜을 이용하면 좀 더 다양한 활동들을 정의할 수 있다. (더 자세한 내용 : http://ogp.me/)

 

og:image 규칙

  1. 이미지의 사이즈는 최소 50×50 이상이어야 한다.
  2. 이미지의 가로세로 혹은 세로가로 비율이 3:1이 넘지 말아야 한다.
  3. 이미지 포맷은 png, jpeg, gif를 지원한다.

 

디버그

페이스북에서는 개발자가 작업한 혹은 공유하고자 하는 페이지의 정보들을 디버깅해볼 수 있는 페이지를 제공한다. 그리고 페이지를 한 번 공유하게 되면 페이스북에서는 해당 페이지를 캐쉬 처리하여 업데이트된 내용을 못 불러오는 경우가 있는데, 이전 캐쉬를 삭제하고 최신의 정보로 불러오는 일도 이 페이지에서 할 수 있다.

URL : https://developers.facebook.com/tools/debug/og/object/

 

 

인풋 창에 디버깅하고자 하는 URL을 입력하고 디버그를 누르면 og:url, og:type, og:title, og:image 등 그 웹사이트의 최신정보를 불러오게 된다. 그리고 이 과정에서 캐쉬를 타고 있던 페이지도 최신의 정보로 업데이트하게 된다.

 

이슈사항

  1. <link> 태그 혹은 og:image 메타 태그를 이용하여 대표 이미지를 설정했어도, 뉴스피드 공유 시 <body> 태그 내에 이미지(전혀 의도치 않은)가 우선순위로 보일 수 있다. (버그인 것 같다.) 관련 정보 : http://developers.facebook.com/bugs/408831372539043?browse=search_511239f3a6e2b8d28300524
  2. og:image를 여러 개 설정했을 때 대표 이미지는 해상도를 기준으로 우선순위가 정해진다. 또한, 1번과 같은 이슈가 발생했을 때도 이미지 우선순위의 기준은 해상도이다. (테스트 결과 og:image보다 해상도가 높은 이미지가 <body> 태그에 있으면 그 이미지가 우선으로 보인다.) 관련 정보 : http://stackoverflow.com/questions/8365156/how-to-set-priority-order-to-open-graph-images-for-links-that-are-inserted-in-co
  3. 디버그 페이지에서 해당 사이트에 대한 캐쉬를 날리고 최신 정보를 받아온다고 해도 이미지는 캐쉬를 탄다. 예를 들면 이미지의 사이즈 및 색상을 바꾸고 업로드를 해도 같은 파일명이면 최신 수정내용이 반영되지 않는다. 이미지가 바뀌면 이름도 바뀌어야 한다.


댓글