Twitter Cardsとは?Bloggerに対応させる方法

Twitter logo

けっこう前からやってたのですが。メモ。

Bloggerブログは、デフォルトではTwitter Cardsに対応していません。おそらく。(2014/02/06現在)

なので、対応させてみました。

「Twitter Cardsってなに?」

こういうやつです↓


投稿記事のサムネイル画像、説明文などが、Twitter上で表示されます。

Twitterを普段利用されている方なら、一度は見かけたことがあるのではないでしょうか。

ではそのやり方を。



BloggerにTwitter Cardsを対応させる



以下、私が行った手順。

  1. テンプレートにタグを埋め込む
  2. Card ValidatorからPreviewチェック
  3. Request Approvalから申請


1. テンプレートにタグを埋め込む


私の場合は、以下のmetaタグを<head>の中に埋め込みました。

<!-- twitter cards -->
<meta content='summary' name='twitter:card'/>
<meta content='@ryotaism' name='twitter:site'/>
<meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' name='twitter:title'/>
<meta expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url' name='twitter:image'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>



赤字の箇所にご自身のTwitterIDを記入してください。



2. Card ValidatorでPreviewチェック


埋め込んだら、下記サイトで見た目を確認します。


まずは自身のTwitterアカウントでログイン。

「summary」
を選択 → 「Validate & Apply」タブをクリック

ご自身のブログ記事をどれかひとつ選び、そのURLを記入、GO!!。

Twitter上での見た目、「Card Preview」がでます。

Card Validator | Twitter Developers

※私だけかもしれませんが、FirefoxではなぜかPreviewが見れませんでした。ブラウザをChromeにしたら見れました。

※サムネイル画像がPreviewにでないときがありますが、更新ボタンを何度かクリックするとでます。



3. Request Approvalから申請


Previewチェックし、これでOKなら、「Request Approval」をクリック。

Twitter Cards

「Wesite Description(サイトの説明)」「Twitter Username」の二箇所を記入する。

Twitter Cards
他の記入欄はすでに入力されているものでよい。

念のためメールアドレスや名前が正しいかを確認し、大丈夫そうなら、最後に「Register Domain」をクリック。

※[Mark my cards as containing sensitive content]は通常はチェック不要。アダルトサイトなどはチェック必要。


以上、完了です。

数日中に、Twitter登録アドレスに確認メールが届きますので、

一度、Twitterに反映されているか確認してみましょう。

ちなみにブログ記事をシェアした過去のツイートにも反映されているはずです。


***


今回のせたmetaタグは、あくまで私好みのものであり、いろいろカスタムができます。今回のは参考程度に思ってくれれば。

それではまた。@ryotaismでした。