Twitter Cardsの設定をしました(metaタグ挿入とTwitter社への申請)

2013/03/24

先日、当サイトにOGPの設定をしましたが、続いてTwitter Cardsの設定をしました。

ステップは簡単です。

1.Twitter Cards用のmetaタグ挿入(全ての設定はhttps://dev.twitter.com/docs/cardsに掲載)

2.上記のページがどのように見えるかプレビューツールを使って確認

3.Twitter Cardsを有効化してもらえるよう、申請ページにて申請

あとは数日~数週間待って申請が受理されればTwitter Cardsが有効になります。

metaタグの挿入もOGPの設定が済んでいればあとは簡単で、以下の2行を挿入するだけ。他のタグはOGPの設定から自動的に取得してくれます。

<meta name="twitter:card" content="summary" />   /* ページの種類、通常はsummary */
<meta name="twitter:site" content="@kogurek1" /> /* サイト管理人のTwitter ID */

Twitter Cardsが有効になるとURLを埋め込んだツイートの「開く」が「概要を表示」に変わり、そこをクリックするとページの概要が表示されるようになります。

半分より下がTwitter Cards部分になります。やはりスクリーンショットが入るのが大きいですね。

OGPと同様にいくつか注意点がありますので以下に書いておきます。

タイトルは70文字まで、説明分は200文字まで。それ以上は省略される。
画像は120x120pxにリサイズされる。60x60px以下の画像は表示されない。

関連資料・記事