TwitterのTL(タイムライン)を眺めていると、たまに「文字+画像」とか「文字+動画」のツイートを見かけたことはありませんか。例えば、下のようなツイートです。
このような文字だけでなく、リンク先のウェブサイトの画像・タイトル・抜粋文などが表示されているツイートは「Twitter Cards(ツイッターカード)」に対応しています。文字だけのツイートよりも目立ちますよね。
というわけで、以下にTwitter Cardsの使い方を書きましたので、ご参考ください。
Twitter Cardsを使う方法
以前はTwitter Cardsを使うために申請が必要でしたが、最近ではウェブサイトがTwitter Cardsに対応していれば表示されます(サイトが対応しているかどうかを確認する方法は、このページの後半に書いてあります)。
というわけで、まずは公式ドキュメントを確認しましょう。
1.表示したいカードタイプを選ぶ
ツイートした際にどのように表示させるのか、カードタイプ(種類)が以下の4種類ありますので、一つ選びましょう。
- Summary Card: Title, description, and thumbnail.
- Summary Card with Large Image: Similar to the Summary Card, but with a prominently-featured image.
- App Card: A Card with a direct download to a mobile app.
- Player Card: A Card that can provide video/audio/media.
例えば、画像を前面にアピールしたいようなツイートをしたい場合は、画像が大きく表示される「Summary with large image」でもいいと思います。ここは、お好みで選んでください。僕は今回「Summary with large image」を選びました。
2.タグを追加する
「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タグは若干違います。公式ドキュメントにそれぞれのカードタイプごとに案内されていますので、ご参考ください。
3.テストする
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」を導入することで、見てもらえる機会も増えるかもしれないですね。
面白いので、ぜひともお試しください。
このページを共有する