TwitterCardを設定してBOTのつぶやきをリッチに見せる
この記事で紹介すること
TwitterBotが呟いた記事に含まれているリンクを、カード表示にしてリッチに見えるようにする。
Before
After
このテックブログ.xyz/entries/44135をAfterのカード表示にしてくれるTwitterカードを今回はご紹介します。
Twitterカードを表示するメリット
- CTRが上がる
以上
Twitter Card Analytics — Twitter Developers
Twitterカードを表示する手順
facebookのOGP同様、サイトのメタタグに設置することで機能するので、メタタグをマークアップしていきます。
4つの中からカードの種類を選ぶ
- Summaryカード
- Summaryカード（画像大）
- Appカード
- 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カードの注意点
透過は背景灰色になるので、気になる人は白背景のロゴやサムネイルを用意しないといけないかもしれません。
公式
