트윗 링크 미리보기, Twitter Cards 기능 블로그에 적용하기
언제부터인지 트위터에서 링크가 포함되어 있는 트윗을 클릭하면 링크의 내용 일부를 미리 보여주는 기능이 생겼다. 이미지나 동영상은 이전에도 미리보기가 있었던 것으로 기억한다. 그런데 링크는 미리보기가 나오는 경우보다 안 나오는 경우가 더 많아서 의식을 못 하고 있었던 듯하다.
트윗 링크 미리보기란?
예를 들어 뉴욕타임스의 트윗 계정에 들어가 보면 아래 그림과 같이 왼쪽 아래에 한쪽 모서리가 접힌 사각형 모양이 있는 트윗들이 있다. 이런 트윗은 클릭하면 링크 내용의 미리보기가 나온다. (아래 트윗 링크는 여기)
왼쪽 아래에 한쪽 모서리가 접힌 사각형 모양이 있는 트윗을 클릭하면 미리보기가 나온다.
웹 환경에서는 이런 식으로 미리보기가 나온다.
모바일 환경에서의 미리보기
이 기능을 정확하게 뭐라고 하는지 몰라서 구글에서 ‘twitter link preview’로 검색해 보니 트위터 공식 블로그의 관련 포스팅을 볼 수 있었다. 요약하면 2013년 6월 13일부터 파트너 웹사이트의 링크가 포함된 트윗을 펼쳐보면 내용 미리보기, 그림 보기, 동영상 재생 등이 가능하다는 것이다.
그렇다면 파트너 웹사이트는 어떻게 되는지, 사이트에 무언가를 따로 적용해야 하는 건지 등을 알고 싶었다.
트위터 카드를 사이트에 적용해야
이리저리 검색해 보니 해당 기능이 ‘Twitter Cards’라는 이름으로 제공된다는 것을 알 수 있었다. 그리고 트위터 개발자 지원 사이트에 관련 내용이 있었다.
트위터에서 제공하는 카드는 세 가지 종류가 있었다.
- summary: 기본 카드. 제목, 설명, 섬네일 그림과 트위터 계정 (위 뉴욕타임스 계정의 트윗과 같은 형식)
- photo: 트윗 크기의 사진 카드
- player: 트윗 크기의 동영상/음성/미디어 플레이어 카드
만약 내 블로그 포스트의 링크를 트윗했을 때 미리보기가 적용되게 하려면 해당 포스트에 관련 정보를 담은 메타 태그를 넣어주면 된다. 특이하게 트위터 카드를 위한 메타 태그뿐 아니라 페이스북 오픈 그래프를 위한 메타 태그도 함께 지원한다.
트위터 카드를 지원하는 다양한 워드프레스 플러그인
블로그 포스트마다 일일이 메타 태그를 설정하려면 쉬운 일은 아니겠지만, 워드프레스의 경우 다양한 플러그인이 있다. 블로그 관리자 페이지에서 ‘Twitter Cards’로 검색하거나 워드프레스 플러그인 사이트에서 검색하면 된다. 우선 세 가지 플러그인을 테스트해보았다.
- WordPress SEO by Yoast: 검색 최적화 플러그인. 페이스북 오픈그래프와 트위터 카드를 지원한다. 국내 워드프레스 사용자들이 많이 쓰는 ‘All in One SEO’나 그 밖의 검색최적화 플러그인의 설정을 클릭 한 번으로 가져올 수 있는 기능도 지원.
- Twitter Cards: 설치하고 활성화만 해주면 바로 각 포스트에 트위터 카드 메타 태그를 넣어준다. 상세한 설정이나 포스트별로 설정하는 기능은 없다.
- JM Twitter Cards: 별도 옵션을 통해 사이트의 트위터 계정과 필자의 트위터 계정을 별도로 설정할 수 있다. 예를 들면 슬로우뉴스 기사를 올리면서 트위터 카드에 슬로우뉴스 트위터 계정과 뗏목지기 트위터 계정을 모두 표시되게 할 수 있다. 옵션을 설정하면 각 포스트에 카드의 타입을 summary와 photo 중에 선택하여 설정할 수도 있다.
결과적으로 JM Twitter Cards를 우선 선택했는데, 각 포스트에 카드 타입을 설정하는 게 동작을 안 하더라. ㅡ,.ㅡ;; 이유는 좀 더 확인해봐야 할 듯.
트위터 카드 프리뷰 툴과 사용 신청
트위터 카드를 실제로 사용하려면 별도의 신청 절차를 거쳐야 한다. 그리고 신청 전에 프리뷰 툴을 이용해서 본인 사이트에 적용한 트위터 카드가 잘 작동하는지 테스트를 할 필요가 있다.
트위터 카드 신청 절차
신청 절차에는 신청할 사이트의 정보와 실제 카드가 적용된 포스트의 URL 샘플을 기록해야 한다. 위에서 말한 프리뷰 툴을 통해서 테스트해서 이상이 없는 URL을 사용하면 된다. 그리고 세 가지 종류의 카드 중 실제로 사용할 종류에 대해서만 URL을 쓰면 된다.
그런데… 내 경우 카드에 표시될 이미지의 URL에 한글이 포함되어 있으면 에러가 났다.
아, 왜… oTL
다른 사이트들은 이미지 URL에 한글이 있어도 정상적으로 표시되는 것으로 봐서 내 블로그를 호스팅 받고 있는 서버의 설정 등에 문제가 있는 것 같다. 역시 이 문제도 좀 더 확인이 필요하겠다.
트위터 카드 사용 승인 메일
우선 summary 카드에 대해 한글 URL이 없는 포스트의 주소를 넣고 신청을 했더니 몇 시간 만에 승인 메일이 왔다. 신청서 쓸 때는 몇 주 걸릴 거라고 안내가 나오더니 이렇게 빨리 나올 줄이야. 그런데 어쩐 일인지 나는 summary 카드만 신청했는데 photo 카드도 쓸 수 있다고 메일이 왔다. 그런데 이 포스트 링크를 트윗으로 올렸는데 안 나온다!! 라고 생각했는데 좀 지나니 나온다. 반영되는 데 약간 시간이 걸리는 듯.
