編集長ブログ―安田英久
Twitter Cardsを設定して自社サイト情報をツイートに出す2つの手順(OGP済みなら10分でOK)

Twitterが本格的に展開を進めている「Twitter Cards」を表示するための、サイトの変更方法

今日は、Twitterが本格的に展開を進めている「Twitter Cards(ツイッターカード)」を表示するための、サイトの変更方法を解説します。Facebookでシェアされたときの表示を指定する「OGP」を設定しているサイトなら、10分で完了するような内容です。

2012-09-06: 申請後しばらくしたら、自分のアカウントでカードが表示されるようになり、Web担のサイトのURLでカードが表示されるようになりました。

Twitter Cards(カード)とは?

Twitter Cardとは、Twitterが進めているツイート表示のリッチ化の仕組みのこと。ツイート内にURLが含まれている場合に、ツイートの詳細表示でそのページのタイトルや概要、アイコン写真などを表示するものです。

Twitter Cardの表示例

このカード表示は6月にスタートしたのですが、まだすべてのTwitterアカウントで有効になっているわけではなく、カード表示できるアカウントはゆっくりと増えていっているようです(私のアカウントでもまだ表示されていません)

また、Twitterはツイート表示が一貫性をもったものになるように進めており、さまざまなTwitterクライアントを使っている場合でも、Webでの閲覧時と同様にカードが表示されるようになっていくようです。

自社サイトのURLがツイートされた際に
Twitter Cardが表示されるようにするための手順

Facebookでシェアされた際にOGPが設定されているのといないのとで見え方がかなり違うように、今後は、Twitterでもカードがちゃんと表示されるのとされないのとでは、ツイートを見た人への印象が大きく変るようになるはずです。

では、自社サイトのURLがツイートされた際に、ちゃんとカードが表示されるようにするにはどうすればいいのでしょうか?

全体としては、以下の2つのステップです。

  1. カードが表示されるようにサイトのHTMLにタグを入れる
  2. カードを表示したいサイトをTwitterに登録する

それぞれ解説していきましょう。

Twitterカード表示のためのサイトでのHTML指定

Facebook用のOGPを設定していれば、非常に簡単です。各ページのHTML内に、次の2行を追加するだけです。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@webtanforum">

1行目はカードのタイプを示すもので、ふつうのWebページでは「summary」で大丈夫です(画像・写真のページや動画のページ向けのカードもあるのですが、そちらは後述)。

2行目はそのサイトに対応するTwitterアカウント名を「@」込みで入れます。

実際には2行目は任意なので、1行目だけでも大丈夫です。これを記載しておけば、あとはOGPの「og:url」「og:title」「og:description」「og:image」を参照してくれます。

注意点は、OGPは<meta property="~" content="~">という特殊な属性名なのに対して、Twitterカードは<meta name="~" content="~">という標準的なHTMLの属性になっている点ですね(だからhtml要素の名前空間属性も追加不要です)。


もしまだOGPを設定していない場合は、以下のページにある資料を参考に、Twitterカード用のHTMLタグを実装します。

ただ、どうせ設定するならTwitter Card専用タグだけではなく、OGP+Twitter Cardの形式にしておくほうが良いと思います。

Twitterカードを表示したいサイトをTwitterに登録

現在、Twitterカードが表示されるのは一部のパートナーサイトだけで、上記の設定をすればどのサイトでもカードが表示されるわけではありません。

上記の設定を済ませたら、以下の登録フォームからサイトを登録しましょう。現在、フォーム送信から承認まで数週間かかるようです。

フォームを表示する前にTwitterアカウントへのログインフォームが表示されます。通常のTwitterサイトにログインしていても、こちらでは改めてログインする必要があるようです。


Web担でもHTMLタグは設定したのですが、現在、承認待ちです。積極的にカードを活用してTwitterユーザーに「良い体験」を提供したいサイトは、早めにタグを実装してフォームから登録しておくといいでしょう。

カード用HTMLタグの注意点や補足

Twitter Card用のHTMLタグに関して、注意するべき点や補足をメモしておきます。

  • タイトルは70文字を超える部分は省略されます。

  • 説明文は、200文字を超える部分は省略されます。

  • アイコン画像は、120px四方を超える場合はリサイズのうえ正方形に切り抜かれます。60px四方未満の場合は表示されません。

  • 写真や画像中心のコンテンツのサイトや動画コンテンツのサイトでは、twitter:cardに「photo」を指定すると画像中心のカードが、「player」を指定するとその場で再生できる動画プレイヤー付きのカードが表示されます。それぞれ基本のカードとは異なるタグを追加する必要がありますので、技術資料を参考に実装してください。

※実装の際に参照する資料(リンク再掲、いずれも英語):

この記事が役に立ったらシェア!
tweet255このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

CPA
顧客獲得単価を意味する略語。新規顧客を獲得するのに、1人あたりいくらかかったかを ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore