【ツイートした時にブログの概要などを表示させよう】自分のサイトをTwitterCards（ツイッターカード）に対応する方法

Twitter このページをあとで読む

TwitterのTL（タイムライン）を眺めていると、たまに「文字＋画像」とか「文字＋動画」のツイートを見かけたことはありませんか。例えば、下のようなツイートです。

このような文字だけでなく、リンク先のウェブサイトの画像・タイトル・抜粋文などが表示されているツイートは「Twitter Cards（ツイッターカード）」に対応しています。文字だけのツイートよりも目立ちますよね。

というわけで、以下にTwitter Cardsの使い方を書きましたので、ご参考ください。

Twitter Cardsを使う方法

以前はTwitter Cardsを使うために申請が必要でしたが、最近ではウェブサイトがTwitter Cardsに対応していれば表示されます（サイトが対応しているかどうかを確認する方法は、このページの後半に書いてあります）。

というわけで、まずは公式ドキュメントを確認しましょう。

１．表示したいカードタイプを選ぶ

ツイートした際にどのように表示させるのか、カードタイプ（種類）が以下の4種類ありますので、一つ選びましょう。

例えば、画像を前面にアピールしたいようなツイートをしたい場合は、画像が大きく表示される「Summary with large image」でもいいと思います。ここは、お好みで選んでください。僕は今回「Summary with large image」を選びました。

２．タグを追加する

「Summary with large image」のカードタイプに必要なmetaタグを「<head>～</head>」内に入れます。下のコードは、このブログやTwitterアカウント名を例にしています。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@s56buya">
<meta name="twitter:domain" content="imamura.biz">
<meta name="twitter:creator" content="@s56bouya">
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="抜粋文">
<meta name="twitter:image:src" content="表示させたい画像">
<meta name="twitter:url" content="サイトのURL">

表示させたいカードタイプによって入れるmetaタグは若干違います。公式ドキュメントにそれぞれのカードタイプごとに案内されていますので、ご参考ください。

３．テストする

Card validatorのページを開いて、「Card URL」の入力欄にTwitter Cardsを表示したいウェブサイトのURLを指定し「Preview card」をクリックしてテストしましょう。

URLを指定する

しばらく待つと、下画像の右部分にテスト結果が表示されます。

特に問題がなかったので、緑文字で以下のように書かれています。問題があれば赤文字でエラー内容が表示されますので、修正しましょう。

INFO: Page fetched successfully
INFO: 21 metatags were found
INFO: twitter:card = summary_large_image tag found
INFO: Card loaded successfully

Twitter Cardsは目立つのでやってみよう

140文字以内で表現できることって限られているので「＋概要」が入っていると、「なんかおもしろそう。ちょっと見てみよう。」みたいに思ったことが過去何度かありました。ですので、例えばツイートで自分のブログの更新情報などを発信される方にとっては、「Twitter Cards」を導入することで、見てもらえる機会も増えるかもしれないですね。

面白いので、ぜひともお試しください。

著者:bouya Imamura