2013/11/21

Twitter Cards活用法!ツイートに「概要」を表示するチュートリアル

TwitterCards活用法!ツイートに「概要」を表示するチュートリアル

Twitterを利用していると↓のように「概要を表示」と表示されているツイートを見かけると思います。

Adobe Bridge

概要を表示出来るようにすると、いつものツイートより多くの情報を表示することが出来るようになります。これは専用のmetaタグを追加するだけで簡単に利用することができます。

今回はツイートに概要を表示する方法を解説していきたいと思います。

目次

Twitter Cards(ツイッターカード)

Twitter Cards(ツイッターカード)

Twitter DevelopersにあるTwitter Cardsからmetaタグを生成することができます。

概要以外にも、商品情報大きい画像を表示する概要、複数の画像を表示するギャラリーなど、様々な情報を追加することが出来ます。

Twitter Cardsの設定

手順

実際にTwitter Cardsの設定をしていきましょう。

Twitter Cardsのページ内「Four simple step」に手順が書かれています。

  • 1.Choose a card type! Try them out or read more about them.
  • 2.Found one? Then add the required meta tags to your page.
  • 3.To apply for the card you want, validate your meta tags.
  • 4.Once approved, tweet the URL and view your Card.

簡単に言えば、表示するカードの種類を選び、メタタグを生成し、表示をチェックして問題なければ利用認証してください。ということです。

Twitter Cards(ツイッターカード)の選択

それでは実際に一通りの流れをやってみましょう。

https://dev.twitter.com/docs/cards/validation/validator

URLから飛ぶとカードの種類を選択する画面が出てきます

カードの種類を選択

今回は概要を表示させますので、デフォルトで選択されているSummaryをクリックします。

metaタグの生成

metaタグの生成

カードの種類を選択するとmetaタグを発行するためのページが表示されます。

左側のカラムに情報を入力する欄が大きく分けて2つあり、それぞれ「Standard Tags」、「Mobile App Integration」と名前が付いています。

今回は上側の「Standard Tags」にのみ記入していきます。

Standard Tags

twitter:card 選んだカードの種別※必須項目
twitter:site サイト管理者のユーザーネーム
twitter:title 概要を表示するページのタイトル※必須項目
twitter:description 概要を表示するページの説明※必須項目
twitter:creator ページ製作者のユーザーネーム。サイト管理者とページ制作者が異なる場合
twitter:image:src 概要を表示するページのサムネイル
twitter:domain サイトのドメイン。www.abc.comなど

各項目に記入していきます。当サイトのブログページをサンプルに記入すると以下のようになります。

スタイルでの入力サンプル

Twitter Cardsの実際の表示を確認

記入が終わったら実際の表示サンプルを確認することが出来ます。入力欄下部にある青いボタンの「Update Preview」をクリックすれば、右側のプレビューに入力内容が反映された形で出力されます。

プレビュー

プレビューの表示に問題がなければ、プレビュー画面の下に生成されているmetaタグをコピーしてサイトの<head>~</head>内にペーストします。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@hp_stylelink">
<meta name="twitter:url" content="http://www.hp-stylelink.com/news/2013/07/20130716.php">
<meta name="twitter:title" content="スマートフォンからのアクセスでCSSを切り替える方法。レスポンシブwebデザインの作り方。">
<meta name="twitter:description" content="レスポンシブwebデザイン制作のためのチュートリアルです。">
<meta name="twitter:creator" content="@hp_stylelink">
<meta name="twitter:image:src" content="http://www.hp-stylelink.com/news/20130716_thumbnail.jpg">
<meta name="twitter:domain" content="www.hp-stylelink.com">

貼り付けるだけで設置は完了です。

利用申請

設置が終わったら正常に設置できているかのチェックが出来ます。

先程metaタグを生成したページの左上のタブを「Validate & Apply」に切り替えます。

Validate & Apply

当該ページのURLを入力し、「Go!」をクリックします。

バリデーション結果

表示に問題はありませんが、「not approved(承認されてません)」と表示されています。このままではまだ概要は表示できないので、利用申請を行う必要があります。

Request Approve」をクリックすると申請のための画面が出てきます。ほとんどの項目は入力されていると思いますが、記入漏れがあれば入力して「Request Approval」をクリックします。

登録されているメールアドレス宛に以下のようなメールが届きます。

利用開始のお知らせ

再度、チェックを行うと、

このように「approved(認証済み)」と変わっていれば利用申請手続きが完了です。これ以降のツイートには概要が追加されて投稿されます。

まとめ

実際にやってみると20~30分程で設置が完了します。タイトルとディスクリプション、画像が自動で表示出来るようになるのでより興味を持ってもらえる可能性が上がります。気になってた方はぜひ設置してみて下さい。