Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

Twitter Cards 사용하기

트위터에는 Twitter Cards라는 기능이 있다. 140자의 텍스트만 표현할 수 있는 트위터의 제약을 확장할 수 있는 기능으로 추가적인 이미지나 내용을 미리보기처럼 보여주는 기능이다. 트위터를 사용하는 사람이라면 다음과 같이 트위터의 글을 클릭했을 때 상세정보가 나오는 것을 본 적이 있을 것이다.(웹에서도 되고 클라이언트에서도 제공되는 기능이다.)

트위터사이트에서 본 TechCrunch의 트위터 카드

대표적으로는 Instagram의 이미지를 트위터에서 바로 볼 수 있도록 제공했었다.(지금은 막힌 기능이다. 트위터가 폐쇄적인 API 정책을 적용해면서 이 부분에서도 오해가 발생했었는데 이는 인스타그램쪽에서 미리보지 못하도록 막은 것이다.) 어쨌든 이 기능을 Twitter Cards라고 부른다.


Twitter Cards용 메타태그 설정
Twitter Cards에 대한 자세한 내용은 트위터의 개발자 문서에 자세히 나와있고 내용이 어렵지 않으므로 그냥 개발자 문서를 참고하는 것이 더 정확하고 쉬울 수 있다. 트위터 카드에는 summary, photo, player라는 3가지 종류의 카드가 있고 summary는 웹페이지에 대한 요약정보를 보여주는 카드로 우측에 썸네일을 보여주고 그 옆에 페이지의 제목과 요약 내용을 보여준다. photo는 이미지를 전체적으로 보여주고 player는 오디오나 비디오를 보여주는 카드이다.

트위터 카드를 사용하려면 자신의 웹페이지 혹은 웹서비스에 메타태그를 등록해야한다. 즉, 트위터에 해당 사이트의 퍼머링크가 공유되었을 때 퍼머링크의 페이지에 트위터 카드에 사용할 정보가 담긴 메타태그가 등록되어 있어야 한다. 지정해야 하는 메타태그는 다음과 같다.

  • twitter:card - 카드 종류로 앞에서 본대로 summary, photo, player의 값이다.
  • twitter:url - 트위터 카드를 사용하는 URL이다.
  • twitter:title - 카드에 나타날 제목
  • twitter:description - 카드에 나타날 요약 설명
  • twitter:image - 카드에 보여줄 이미지
나같은 경우는 각 글에 메타태그를 보여주기 위해서 간단한 텍스트큐브용 플러그인을 만들었다. 한페이지에 여러 글이 나오는 홈페이지나 목록페이지등은 메타태그가 필요없으므로 각 글의 퍼머링크로 글이 나타난 경우에만 메타태그가 보이도록 짰다. 스킨에 메타태그를 넣으려고 했는데 스킨에서 제어하는데 한계가 있어서 잘 모르는 PHP소스를 뒤져가면서 힘들게 짰다. ㅠㅠ

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://blog.outsider.ne.kr/921">
<meta name="twitter:title" content="Github의 입력 폼과 검색에 관련된 몇가지 팁">
<meta name="twitter:description" content="Github에서 사용할 수 있는 텍스트 에어리어에서 사용할 수 있는 여러가지 기능들이 좀 있는데 자주 사용하지 않다보니 매번 찾아봐야 해서 좀 잘 써보고자 정리를 해본다. 원래는 Github의 도움말 페이지에서 해...">
<meta name="twitter:image" content="http://blog.outsider.ne.kr/attach/1/1005720455.gif">

이제 각 포스팅의 헤더에는 위와 같은 메타태그가 붙게 되었다. 블로그 포스팅용이므로 summary 카드를 사용하고 description에는 글의 앞부분의 일부를 잘라와서 보여주었다. 이미지는 글의 첫 이미지를 보여주도록 했고 이미지가 없는 경우에는 기본 이미지를 사용하도록 했다. (추가적으로 페이스북의 오픈그래프도 비슷한 형태의 메타태그를 사용하고 있는데 전에는 스킨으로만 해결해 보려고 해서 메타태그를 다 못넣은 부분이 있었지만 이번에 플러그인으로 만들면서 오픈그래프 메타태그까지 한꺼번에 추가했다.)


미리보기
메타태그를 다 설정했다면 이제 트위터카드 메타태그 프리뷰 페이지로 다음과 같이 테스트를 해볼 수 있다.

트위터카드 미리보기 페이지에서 테스트한 화면

페이지에 메타데이터를 설정했다면 URL을 입력해서 카드가 원하는대로 나오는지 테스트해볼 수 있고 메타태그를 어떻게 설정하는지 모르면 HTML 부분에 메타태그를 직접 입력해서 테스트해볼 수 있다. 프리뷰테스트에서는 종종 기술적 이슈로 안된다는 카드가 나올때가 있는데 메타태그이 이상이 없다면 그냥 재시도하면 잘 나온다.(트위터봇이 해당 URL의 정보를 크롤링해가서 캐싱하는 구조이므로 robots.txt로 봇에 대한 제한을 하고 있다면 Twitterbot의 접근을 허용해 주어야 한다.)


Twitter Cards 신청
메타태그 설정이 정상적으로 되었다면 이제 트위터 카드 신청페이지에서 필요한 내용을 입력하고 신청을 하면 된다. 신청내용에 이상이 없다면(승인을 해주는 사이트에 대한 어떤 정책이 있는지는 잘 모르겠다.) 2-3일 후에 다음과 같이 승인되었다는 메일이 트위터로 부터 온다.

트위터에서 온 트위터 카드 승인 메일

이제 등록한 URL이 트위터에 링크로 들어간 글에는 다음과 같이 트위터카드가 함께 출력이 된다.

트위터에 등록된 내 블로그의 트위터 카드
2013/03/23 23:29 2013/03/23 23:29