– 웹 페이지가 페이스북에서 더 예쁘게 공유되기 위한 페이스북 Open Graph 설정하기
요즘 경향신문 페이스북 페이지를 보면 운영에 꽤 신경을 쓰는 것 같습니다. 기사에 관심이 가도록 대화를 건네는 모습이 좋습니다.
그런데, 경향신문의 기사를 페이스북에 공유하려고 링크를 입력하면 아래와 같이 민망한 상황이 연출됩니다.
기사는 북한 관련 뉴스임에도 불구하고, 사진은 좀 민망합니다. (클릭율이 높아지긴 할 듯 합니다!) 뭐, 의도된 것이다! 라고 하시면 별로 할 말이 없습니다만, 그럴리야 없겠구요.
한겨레신문 기사의 경우에는 아래와 같이 기사에 맞는 사진이 자동으로 추천됩니다.
조선닷컴도 볼께요.
사실 이렇게 하기 위해서 대단한 기술이 필요한 것이 아닙니다. 페이스북에서 기사 링크를 입력하면, 페이스북은 그 링크 페이지에서 정보를 확인하게 됩니다. 그 때 가장 먼저 참조하는 메타 데이터가 Open Graph 라는 형식입니다.
Open Graph 에 대해서 좀 더 알고 싶으시다면, Open Graph Protocol 페이지 http://ogp.me/ 를 참조하세요.
경향신문처럼 Open Graph 메타 태그를 입력하지 않으면, 페이스북에서 ‘적당히’ 가져갑니다. 페이스북에서는 어떤 이미지가 중요한 지 모르기 때문에 종종 다른 이미지를 가져가게 되는 것입니다.
한겨레의 Open Graph 메타 태그를 볼께요.
정보기관에서 전투조직으로 미 드론전쟁, CIA 성격 바꾸다
http://www.hani.co.kr/arti/international/international_general/581680.html
이 페이지에서 소스 보기를 하면, 아래와 같은 코드가 <head> </head> 코드 안에 있는 것을 확인할 수 있습니다.
<meta property=”fb:app_id” content=”262286613837221″>
<meta property=”og:type” content=”website”>
<meta property=”og:url” content=”http://www.hani.co.kr/arti/international/international_general/581680.html”>
<meta property=”og:description” content=”뉴욕타임스, ‘극비공작’ 비화 폭로 2004년 파키스탄과 비밀협약으로CIA 본부서 컴퓨터로 조종·공격무고한 민간인 포함 수천명 사망“정보업무 복귀해야” 목소리 커져”>
<meta property=”og:image” content=”http://img.hani.co.kr/imgdb/resize/2013/0408/1365334403_00451665101_20130408.JPG”>
<meta property=”og:title” content=”정보기관에서 전투조직으로 미 드론전쟁, CIA 성격 바꾸다”>
자, 그럼. 한 줄씩 보겠습니다. *가 있는 것은 Open Graph 를 적용한다면 필수로 있어야 하는 메타 태그입니다. property 는 필드명 (항목) 이라면, content 는 그 값입니다. (경향신문 담당자분은 경향신문 홈페이지를 담당하시는 개발자분께 전달하시면 됩니다. 어렵지 않아요!)
###
<meta property=”fb:app_id” content=”262286613837221″>
필수 값은 아닙니다만, 페이스북 개발자 사이트에 웹사이트를 어플리케이션으로 등록하면 얻을 수 있습니다.
<meta property=”og:type” content=”website”> *
공유한 이 페이지가 어떤 종류의 페이지인지를 나타내는 정보입니다. 한겨레의 경우에도 잘못되어 있습니다. 이 경우에는 article 이 되어야 합니다. type은 http://ogp.me/#types 페이지를 참조하시면 됩니다.
<meta property=”og:url” content=”http://www.hani.co.kr/arti/international/international_general/581680.html”> *
공유한 페이지의 URL 입니다. 하나의 컨텐츠가 여러개의 URL 로 접근이 가능한 경우가 있습니다. 특히나 우리나라 언론사들의 URL 은 …. 정말… 답이 안나올정도로 다양하게 접근할 수가 있습니다. 통계 등을 위해서 그렇게 하는 경우가 많습니다만, 사실 그렇게 하지 않고도 할 수 있는 방법은 정말 많습니다. 어쨌든. 이렇게 공유되는 URL 이 많아지면 좋아요 숫자를 뽑는다거나 하는 경우에도 기준점이 없어지게 됩니다. 그래서, 저기에 이 페이지로 접근한 경우, 다 저 URL 로 잡아주세요! 라고 하는 것이라고 보시면 됩니다.
<meta property=”og:description” content=”뉴욕타임스, ‘극비공작’ 비화 폭로2004년 파키스탄과 비밀협약으로CIA 본부서 컴퓨터로 조종·공격무고한 민간인 포함 수천명 사망“정보업무 복귀해야” 목소리 커져”>
해당 페이지에 대한 설명입니다. 기사의 경우, 소제목이나 발문 등이 들어가면 좋겠지요. 아니면 기사 앞부분 일부를 보여주셔도 좋습니다.
<meta property=”og:image” content=”http://img.hani.co.kr/imgdb/resize/2013/0408/1365334403_00451665101_20130408.JPG”>
해당 페이지를 대표하는 이미지입니다. 기사에 첫번째로 등장하는 이미지 등을 사용하면 되겠죠. 이걸 넣어두지 않으면 페이스북이 일단 해당 페이지에 있는 이미지 중에서 ‘적당히’ 가져갑니다.
<meta property=”og:title” content=”정보기관에서 전투조직으로 미 드론전쟁, CIA 성격 바꾸다”> *
해당 페이지에 대한 제목입니다.
###
실제 개발 코드상으로도 몇 분 안걸리는 작업입니다. 페이스북에 기사를 공유하고 민망해하는 독자가 없도록 해주세요.
아래는 국내 언론사의 Open Graph 메타 태그 적용 상황
(순서는 아무런 의미가 없습니다! 생각나는대로. 잘 되어 있는 곳은 *표. 물론 이미지 크기 등 더 챙길 것도 있지만, 국내 언론사들이 신경 쓰는 것만으로도 일단 칭찬!)
자, 그럼, 기다려보도록 하겠습니다. (2013.04.11. 요이땅! – 이 때 쓰고 지금 공개하는거라… 달라졌을 수 있음)
인용구까지 담기엔 너무 길어져서, 구글 Docs에 인용구 부분을 포함해서 발행했습니다. (구글 Docs 버전 바로가기) 리뷰. 블리츠스케일링은 비효율을 감내하고서라도 급격한 성장을 통해 퍼스트-스케일러 우위에 기반한 해자 Moat 를 만들어내는 것을 말합니다. 블리츠스케일링은 업종, 규모, 지역과 관계 없이 할 수 있지만 (Part 5) … Continue reading
계속 읽기모든 기업이 블리츠스케일링을 할 수도, 할 필요도 없습니다. 시장으로 진입하는 속도가 결과를 내는 데 대단히 중요한 역할을 하는 비즈니스 모델을 가지고 있을 때, 블리츠스케일링이라는 ‘비상식적’ 실행이 필요합니다. 블리츠스케일링하기 좋은, 해야만 하는 비즈니스 모델의 특징 중 하나는 네트워크 효과를 기반으로 한다는 … Continue reading
계속 읽기제가 공동대표를 맡고 있는 해빗팩토리는 보험 분석 / 관리 앱 시그널플래너를 만들고 있습니다. 현재 (2022.09.21일 기준) 5점 만점 기준으로 안드로이드는 4.9점, iOS는 4.8점의 평점을 유지하고 있습니다. 그것이 가능한 이유는 저희의 목표가 다른 회사들과는 다르기 때문이라고 생각합니다. 해빗팩토리의 목표는 정확한 데이터 … Continue reading
계속 읽기