구글 Blogger용 트위터 카드 태그

트위터를 하다 보면 어떤 트윗들의 하단에 큰 사진이나 동영상, 뉴스 요약 등이 딸려있는 것을 볼 수 있습니다. 바로 '트위터 카드'란 것인데요, 주로 웹 페이지의 링크를 트윗에 넣으면 자동으로 해당 페이지의 요약 등을 보여주게 됩니다. 만약 트윗에 유튜브 동영상 링크를 넣으면 아예 트윗 내에서 유튜브 동영상까지 바로 볼 수 있죠. 아래와 같이 트윗을 embed 형태로 다른 웹 페이지에 삽입해도 트위터 카드가 표시됩니다.

Everything you need to know about the Amazon Fire Phone http://t.co/uULA47di9M

— TechCrunch (@TechCrunch) 2014년 7월 23일

 

저도 블로그에 트위터 카드를 적용했는데요, 트윗을 임베드 하면 아래와 같이 보이게 됩니다.

http://t.co/Xdajo9pm4h 호오... 제 구글 Blogger 템플릿에 트위터 카드 메타태그를 적용시켰습니다. 그런데 매번 검색 설명을 넣어줘야 함... 귀찮...

— Kais (@hfkais) 2015년 8월 11일

 

트위터 카드 기본 메타태그

적용 방법은 생각보다 간단합니다. 블로그 템플릿의 head 부분에 메타태그를 넣어주면 되죠. 트위터 카드를 위한 메타태그들은 트위터 개발자 사이트에 잘 소개되어 있습니다.

 

<meta name="twitter:card" content="summary" /> // 트위터 카드 타입

<meta name="twitter:site" content="@flickr" /> // 게시자 트위터 ID

<meta name="twitter:title" content="Small Island Developing States Photo Submission" /> // 게시물 제목

<meta name="twitter:description" content="View the album on Flickr." /> // 게시물 설명

<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" /> // 게시물 썸네일

 

이걸 구글 Blogger에 적용하기 위해선 블로거의 복잡한 템플릿 구조도 어느 정도 알고 있어야 합니다. 허나 다행스럽게도 이미 Blogger용 코드를 만들어 둔 사람들이 있어, 그걸 참고하면 되지요. 트위터의 CMS 통합 가이드 페이지에서 관련 내용을 찾을 수 있었습니다. Blogger용 코드에 대해선 Blogger How란 사이트의 'How to implement twitter cards on blogger/blogspot blogs' 란 글을 참고하라고 하는군요.

 

Blogger에서 쓸 땐 이렇게

다음은 Blogger용 트위터 카드 메타태그입니다.

<!-- twitter cards -->

<meta content='summary_large_image' name='twitter:card'/>

<meta content='@twitter_id' name='twitter:site'/>

<meta content='@twitter_id' name='twitter:creator'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

  <meta expr:content='data:blog.url' name='twitter:url'/>

  <meta expr:content='data:blog.pageName' name='twitter:title'/>

  <meta expr:content='data:blog.metaDescription' name='twitter:description'/>

<b:else/>

  <meta expr:content='data:blog.homepageUrl' name='twitter:url'/>

  <meta expr:content='data:blog.metaDescription' name='twitter:description'/>

</b:if>

<b:if cond='data:blog.postImageThumbnailUrl'>

  <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>

  <meta expr:content='data:blog.title' name='twitter:title'/>

<b:else/>

  <meta content='WEBSITE_FAVICON_IMAGE_URL' name='twitter:image'/>

  <meta expr:content='data:blog.title' name='twitter:title'/>

</b:if>

 

위 코드를 복사해서 Blogger 템플릿의 </head> 태그 앞에 넣어주면 됩니다. 하나씩 설명을 해볼까요.

twitter:card는 카드의 형태를 지정합니다. 요약(summary), 큰 이미지 요약(summary_large_image), 포토(photo) 카드 등의 타입이 있지요. 흔히 '요약'과 '큰 이미지 요약'을 가장 많이 씁니다. 저는 사진을 자주 쓰므로 큰 이미지 요약 타입으로 골랐습니다. 카드 타입에 대해선 https://dev.twitter.com/cards/types 를 참고하세요.

twitter:site와 twitter:creator는 해당 웹 페이지가 서비스되는 사이트와 제작자의 트위터 ID를 표시해 줍니다.

다음엔 IF문이 하나 있는데요, 포스팅 본문 페이지인지, 인덱스(또는 아카이브) 페이지인지에 따라 각기 다른 메타태그를 표시해 줍니다. 본문 페이지인 경우 페이지 URL, 페이지 제목, 짧은 설명이 표시됩니다. 인덱스나 아카이브 페이지인 경우 페이지 URL과 설명만 표시해 줍니다.

그 다음의 IF문에선 이미지를 표시해 줍니다. 본문에 이미지가 있을 경우 그걸 표시해주고, 없을 경우 미리 지정된 이미지URL을 표시해 줍니다. WEBSITE_FAVICON_IMAGE_URL에 파비콘이나 프로필 이미지 URL을 넣어주면 되겠네요.

 

카드 유효성 검증

이렇게 템플릿을 수정한 다음, 트위터에서 제공하는 Card validator 툴에 각 포스팅의 URL을 넣어봐서 테스트합니다.

 

템플릿 수정이 제대로 되었다면 유효성 검증 툴에서 위와 같이 'Card loaded successfully' 메시지가 뜨게 됩니다.

 

검색 설명을 넣어주어야

위에서 메타태그를 넣을 때 'data:blog.metaDescription' 라는 Blogger 템플릿 코드를 사용했는데요, 이건 글을 입력할 때 '글 설정'에서 지정해 줄 수 있습니다.

 

위와 같이 태그, 게시 날짜, 영구 링크 설정 시에 같이 넣어주면 됩니다. 사실 전 검색 설명을 따로 쓰지 않고 그냥 패스했었는데, 그렇게 하면 트위터 카드 유효성 검증 시에 오류가 나더군요. 본문 첫 번째 단락에서 앞 몇 글자만 가져와 쓸 순 없을까도 생각해 봤지만 head 위치에서 그걸 구현하기는 쉽지 않은 것 같아 일단 넘겼습니다.

 

이렇게 해서 간단하게(?) 구글 Blogger에 트위터 카드 메타태그를 적용해봤습니다. 오늘 글은 여기까지입니다.

 

관련 링크 모음

• 트위터 개발자 사이트 : 트위터 카드 소개
• 트위터 개발자 사이트 : 트위터 카드 타입
• 트위터 개발자 사이트 : CMS 통합 가이드
• 트위터 개발자 사이트 : 트위터 카드 유효성 검증
• Blogger How : How to implement twitter cards on blogger/blogspot blogs