google blogger, blogspot 용 트위터 카드(twitter card)
구글 블로거를 쓰시는 분들을 위한 blogger 용 트위터 카드 메타 태그입니다.
트위터 카드 메타 태그 텍스트 파일 다운로드 --> twitter card
twitter cards.txt<!-- 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 == "item"'>
<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>
<!-- twitter cards -->
설정1.
<meta content='@twitter_id' name='twitter:site'/>
<meta content='@twitter_id' name='twitter:creator'/>
@자신의 트위터 ID 로 변경합니다.
설정2
<meta content='summary_large_image' name='twitter:card'/>
트위터 카드 타입 변경 요약(summary), 큰 이미지 요약(summary_large_image), 포토(photo) 중 하나로 변경합니다.
설정3
<meta content='WEBSITE_FAVICON_IMAGE_URL' name='twitter:image'/>
WEBSITE_FAVICON_IMAGE_URL 칸에 자신의 파비콘 URL을 넣어주시면 됩니다.
설정4
구글 블로그 -> 템플릿 -> HTML 편집 에 들어가셔서
<head>..</head> 사이에 첨부하여 주시면 됩니다.
중요!!
처음에 적용하고 계속 twitter:description에서 계속 에러가 뜨더군요.
왜 그런가 싶었더니, 구글 블로그는 포스팅 마다 메타 태그 형식으로 검색 설명을 넣을 수 있는데요.
위 사진의 검색 설명 란에 간략한 요약 문구를 넣어주셔야 트위터 카드가 활성화되더군요..
검색설명은 블로그스팟(blogspot)에서 설정란에서 메타태그 설정해주셔야 나옵니다.
참고 자료
[hfkais blog] 구글 Blogger용 트위터 카드 태그
좋은하루되세요^^