구글 Blogger용 트위터 카드 태그

by hfkais | 2015. 8. 16. | 0 comments

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

 

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

 

트위터 카드 기본 메타태그

적용 방법은 생각보다 간단합니다. 블로그 템플릿의 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에 트위터 카드 메타태그를 적용해봤습니다. 오늘 글은 여기까지입니다.

 

관련 링크 모음

comment 댓글 없음:

댓글 쓰기

- 스팸 방지를 위해 보안문자(캡차) 확인을 사용하고 있습니다.
- 스팸댓글이 너무 많이 달려 댓글 검토 기능을 쓰고 있습니다. 입력하신 댓글이 당장 화면에 나타나지 않아도, 블로그 주인장은 댓글을 보고 있으니 안심하세요. 1~3일 내에 검토가 완료되면 댓글이 게시됩니다.

덧글 페이지로 이동합니다. 스팸방지를 위해 '단어확인'을 사용하고 있습니다.