WebサイトにTwitter Cards(Twitterカード)を設定する

harada 418views 更新:2014年1月14日

Twitter Cardsを設定すると、Twitter上で該当のURLを入力した際に概要として画像や説明が表示できるようになります。

表示形式が複数あるため、Card Validatorから表示形式を選択して、タグを生成するのが一番分かりやすいと思います。
こちらはsummary_large_imageという表示形式のタグです。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@aipocom">
<meta name="twitter:title" content="無料グループウェア「アイポ」">
<meta name="twitter:description" content="無料で使えるクラウドとオープンソースから選べるグループウェア「アイポ」です。コミュニケーション向上で組織力をつくります。">
<meta name="twitter:image:src" content="画像URL">

生成されたタグをサイトのヘッダーに挿入してアップしてから、先ほどのCard Validatorのタブを「Validate & Apply」に変更し、URLをチェックします。
「not approved」という表示になるかと思いますので、そうしたら「Request Approve」をクリックして申請すると、大体 2~3分で指定のメールアドレスに申請認証のメールが届き、TwitterでURLを入力した時に概要が表示されるようになります。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません