読者です 読者をやめる 読者になる 読者になる

TwitterCardを設定してBOTのつぶやきをリッチに見せる

BOT Rails

この記事で紹介すること

TwitterBotが呟いた記事に含まれているリンクを、カード表示にしてリッチに見えるようにする。

 

Before 

f:id:kitahashi-ryoichi:20161223160003p:plain

After

f:id:kitahashi-ryoichi:20161223155520p:plain

このテックブログ.xyz/entries/44135をAfterのカード表示にしてくれるTwitterカードを今回はご紹介します。

 

Twitterカードを表示するメリット

  • CTRが上がる

以上

Twitter Card Analytics — Twitter Developers

 

Twitterカードを表示する手順

facebookのOGP同様、サイトのメタタグに設置することで機能するので、メタタグをマークアップしていきます。

 

4つの中からカードの種類を選ぶ

  1. Summaryカード
  2. Summaryカード(画像大)
  3. Appカード
  4. Playerカード

Webサイトの場合は1か2で、アプリダウンロードさせたければ3を選びます。4は動画コンテンツをやってる人向けです。今回はWebサイトなのですが、ナショナルジオグラフィックのような大きい写真コンテンツでもない限りは1のSummaryカードを選ぶのが妥当です。

 

metaを書く

<head>の中にTwitterカード用のmetaを書いていきます。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@tech_news_jp" />
<meta name="twitter:title" content="Webエンジニアのためのテックブログまとめ" />
<meta name="twitter:description" content="Webエンジニアのために参考になるテックブログをあつめて毎日更新!これであなたも一流のエンジニアに。" />
<meta name="twitter:image" content="http://xn--pckc9cl6fsg.xyz/images/common/logo.png" />

細かくは記事ページだったらtwitter:imageを、記事サムネイルにするなどのif分岐は必要になってきますが、今回はロゴ画像だけにして割愛します。 

 

TwitterカードValidatorでチェックする

ただ本家のValidatorは、公開されているURLしかチェックしてくれないので不便です・・・。

https://cards-dev.twitter.com/validator

 

Twitterカードの注意点

透過は背景灰色になるので、気になる人は白背景のロゴやサムネイルを用意しないといけないかもしれません。

 

公式

Twitterカード — Twitter Developers