⌘

Twitter Card on Google Blogger(블로거에 트위터 카드 적용하기)

hahwul

트위터 공유하면서 의아했던게 하나 있느데, 트위터에선 og태그가 먹지 않습니다..

별 신경 안쓰고 있다가 혹시나 하고 좀 찾아보니 별도의 포맷을 가지고 있더군요. 간략하게 정리해봅시다.
결과는 이런거에요 :)

Twitter Card

트위터에선 og태그와 비슷한 기능을 하는 것을 카드라고 부릅니다. 포맷은 이런 형태입니다.

  • twitter:card - card type
  • twitter:url - url
  • twitter:title - 제목
  • twitter:description - 내용 일부
  • twitter:image - 대표 이미지

여기서 card type이 뭘까 하실 수 있는데, 아래 링크 보시면 대충 알 수 있습니다. https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards.html

  • summary. : 일반적인 웹 사이트 카드
  • summary-large : 이미지 큰 버전
  • player : 비디오 재생 가능한 카드
  • app : Download app 같이 기능 담을 수 있는 카드

정도가 있고 용도에 맞게 사용해주시면 됩니다. meta 태그 예시는 이렇습니다.

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://www.hahwul.com">
<meta name="twitter:title" content="제목제목">
<meta name="twitter:description" content="내용 요약">
<meta name="twitter:image" content="혹시나 있다면 이미지!">

다른 Card 적용하기

카드 Type별 예시: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards.html 카드 문법: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup

Twitter card on Google Blogger

예전에 og태그랑 카카오링크 공유하기 적용한거랑 거의 비슷합니다. Blogger 문법으로 적용 가능합니다. (Javascript로 처리할수도 있지만, 웹에서 <meta> 태그를 먼저 읽기 떄문에 정확하게 적용될지는 모르겠네요)

Title: 
 - Blogger: <data:post.title/>
 - Javascript: document.title
Image:
 - Blogger: <data:post.firstImageUrl>
 - Javascript: document.images[0].src
Url: 
 - Blogger: <data:post.sharePostUrl>
 - Javascript: document.location.href
Description: 
 - Blogger: <data:post.metaDescription>, <data:post.snippet>
 - Javascript: X

Blogger에 적용하기엔 Blogger 태그가 편하니깐 이쪽으로 작성해보겠습니다. 우선 data:post가 post 영역 하위에서만 먹히기 때문에 아래 부분을 찾기로 찾아줍시다 Ctrl+F - 입력

<b:includable id='post' var='post'>

그다음 하위에 아래와 같이 코드를 넣어줍니다.

<meta content='summary' name='twitter:card'/> 
<meta content='@hahwul' name='twitter:site'/>
<meta content='@hahwul' name='twitter:creator'/>
<meta content='www.hahwul.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
 <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
 <meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>

그러고 validator(https://cards-dev.twitter.com/validator)로 테스트해보면..

와우 잘 되네요!

테스트하면서 삽질좀 했었는데, 혹시나 도움되실 가능성도 있으니 추가해놓습니다.

A waste of time..

post 이외에서 작성하는 방법입니다. 처음에 최상단에 적용하려고 이렇게 헀었다가 이미지 불러올 방도가 없어서 포기..

<head>
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" expr:content='data:blog.url' />
    <meta name="twitter:title" expr:content='data:blog.pageTitle' />
    <meta name="twitter:description" content="내용 요약" />
    <meta name="twitter:image" content="혹시나 있다면 이미지!" />
</head>

Javascript를 이용한 동적 구성인데, 코드상으로 반영은되나 twitter가 제대로 못불러왔던 것 같습니다. (이건 좀 테스트 해봐야 정확하게 될지 안될지 나올 것 같네요..

<head>
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://www.hahwul.com" />
    <meta name="twitter:title" content="제목제목" />
    <meta name="twitter:description" content="내용 요약" />
    <meta name="twitter:image" content="혹시나 있다면 이미지!" />
</head>

<script>
  $("meta[name='twitter:url']").attr("content", document.location); 
  $("meta[name='twitter:title']").attr("content", document.title); 
  $("meta[name='twitter:description']").attr("content", "abcd"); 
  $("meta[name='twitter:image']").attr("content", "abcd");
</script>

Reference

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards.html https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup

#develop