851576_212044268946425_283574163_n

경향신문 홈페이지, (제발) 고쳐주세요.

– 웹 페이지가 페이스북에서 더 예쁘게 공유되기 위한 페이스북 Open Graph 설정하기

 

요즘 경향신문 페이스북 페이지를 보면 운영에 꽤 신경을 쓰는 것 같습니다. 기사에 관심이 가도록 대화를 건네는 모습이 좋습니다.

그런데, 경향신문의 기사를 페이스북에 공유하려고 링크를 입력하면 아래와 같이 민망한 상황이 연출됩니다.

image

기사는 북한 관련 뉴스임에도 불구하고, 사진은 좀 민망합니다. (클릭율이 높아지긴 할 듯 합니다!) 뭐, 의도된 것이다! 라고 하시면 별로 할 말이 없습니다만, 그럴리야 없겠구요.

한겨레신문 기사의 경우에는 아래와 같이 기사에 맞는 사진이 자동으로 추천됩니다.

image

조선닷컴도 볼께요.

image

사실 이렇게 하기 위해서 대단한 기술이 필요한 것이 아닙니다. 페이스북에서 기사 링크를 입력하면, 페이스북은 그 링크 페이지에서 정보를 확인하게 됩니다. 그 때 가장 먼저 참조하는 메타 데이터가 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 메타 태그 적용 상황

(순서는 아무런 의미가 없습니다! 생각나는대로. 잘 되어 있는 곳은 *표. 물론 이미지 크기 등 더 챙길 것도 있지만, 국내 언론사들이 신경 쓰는 것만으로도 일단 칭찬!)

  • 한겨레 *: 잘 되어있습니다! (왠 일이야~!!) type 만 article로 바꿔주세요!
  • 경향신문 : 엉엉 ㅠㅠ
  • 오마이뉴스 * : 아주 잘 되어있습니다. 나이스~
  • 미디어오늘 : 전혀 안되어 있습니다. ㅠㅠ 미디어오늘은 NDSOFT 의 솔루션을 쓰고 있는 것으로 알고 있는데요. 총대 메시고 고쳐달라고 하세요. 다른 NDSOFT 사용 언론사들도 덕보게.
  • 프레시안 : 전혀 안되어 있습니다. ㅠㅠ
  • 조선일보/조선닷컴 : description과 title 을 같게 해두었습니다. 더 줄 수 있는 정보가 있으니, description 은 바꾸는 게 좋을 것 같네요.
  • 중앙일보 :  아주 잘 되어있습니다. 나이스~
  • 동아일보/동아닷컴 : og:image 만 적용해두었습니다. 아마도 위에서  “이미지가 왜 이게 나오냐! 얼른 고쳐!” 라고 하셔서 이미지 부분만 해놓으신 듯.
  • 한국일보 : 전혀 안되어 있습니다. ㅠㅠ
  • 블로터 : 워드프레스로 구축되어 있는 서비스들은 대체적으로 플러그인 등을 써서 쉽게 처리합니다. 블로터 역시 잘 되어있습니다.
  • 매일경제 * : 아주 잘 되어있습니다. 나이스~
  • 한국경제 : 동아일보와 같이 og:image 만 적용되어 있습니다.
  • 머니투데이 * : 아주 잘 되어있습니다. 나이스~
  • 아이뉴스24 * :  아주 잘 되어있습니다. 나이스~
  • ZDNET : type이 들어가있지 않고, og:title 부분이 주석 처리되어 있습니다. 특이하네요.

자, 그럼, 기다려보도록 하겠습니다. (2013.04.11. 요이땅! – 이 때 쓰고 지금 공개하는거라… 달라졌을 수 있음)

16. 7월 2013 by yuno815
Categories: 미디어와 사회 | Comments

댓글

  1. 홍유니말하길

    안녕하세요, 옥셔노리 마케팅팀 인턴입니다.
    페이스북에 지인분이 좋아요를 눌러 공유된 것을 보고 들어오게 되었어요.
    옥셔노리는 번역회사가 무조건 갑인 폐쇄적인 번역 서비스 산업을 바꾸고자 번역경매서비스를 준비하고 있는 스타트업 입니다. 이번에 개발자분을 새로 뽑고있는데 올려주신 포스팅 내용이 너무 흥미로워 댓글남깁니다.ㅎㅎ
    혹시 관심있으시면 메일 부탁드릴게요!

    1. yuno815말하길

      안녕하세요. 유저스토리랩 정윤호입니다. 제가 개발자가 아닌데다, 회사를 운영하고 있습니다. 하시는 일 잘 되시길 기원하겠습니다. 감사합니다.

  2. 최진순말하길

    뉴스 미디어를 생각하는 정윤호 대표에게 항상 감사한 마음 갖습니다.

    1. yuno815말하길

      아이쿠. 최진순 기자님, 아주 간단한 거라서… ㅎㅎ 한국경제도 고쳐달라고 해주세요! ㅎㅎ