TwitterCards（ツイッターカード）でツイッター→ブログ連携をより効果的に

1年以上前の記事です。内容が古い可能性があります。

いやぁ。これ知らなかったなぁ。。

□ 【ツイートした時にブログの概要などを表示させよう】自分のサイトをTwitterCards（ツイッターカード）に対応する方法
□ ブログをTwitterに最適化。Twitter Cards 登録方法　wordpressなら簡単に設定できるよ！ | A!@attrip

できるポケット Twitterをスマートに使いこなす基本＆活用ワザ100 ［できる100ワザ ツイッター 改訂新版］

posted with ヨメレバ

コグレマサト,いしたにまさき,堀 正岳,できるシリーズ編集部 インプレスジャパン 2011-03-30

Amazon

Kindle

楽天ブックス

7net

honto

ブックオフ

e-hon

1. まずは以下のサイトにアクセスしてデザインベースを選択。
   □ Card Validator | Twitter Developers
   
2.  ここで、自分のサイトを入力してツイッターカードに対応しているか調べてもらいます。
   「Validata & Apply」タブをクリックして「Enter URL to validate」に自分のブログのURLを入れて「Go!」
   大概のサイトは以下のようにエラーになってしまいます。
   
3. で、サイトにメタ情報を書き込むわけです。
   自分（livedoor Blog）の場合は取り急ぎ以下のようにしておきました。
   
   念のためテキストでも起こしておきます。
   <meta name=”twitter:card” content=”summary”>
   <meta name=”twitter:site” content=”@Norisa”>
   <meta name=”twitter:domain” content=”webdirector.livedoor.biz”>
   <meta name=”twitter:creator” content=”@Norisa”>
   <meta name=”twitter:title” content=”<$ArticleTitle ESCAPE$>”>
   <meta name=”twitter:description” content=”<$BlogDescription$>”>
   <meta name=”twitter:image” content=”http://webdirector.livedoor.biz/blog.jpg”>

   これをヘッダー部に書き込むわけです。
   細かい部分に関してはこのあたりを参考に。

4. あらためて確認してみると以下のように表示が変わります。
   右側にプレビューも出てきます。
   写真は後で差し替えることにしてとりあえずこれで「Requeest Approval」をクリックしてツイッター側に申請します。
   
5. 基本的な部分は全て埋まっていますが一部（description等）入力して「Requeest Approval」をクリック。
   
6. 比較的早い段階で認証されました。
   認証されると以下のように「approved」と表示が変わります。
   

あとはブログから連携されるのを待つだけ。

以下、適応前のブログ連携ツイートと適応後のブログ連携ツイートです。

■ 適応前 

ブログ更新： 放射能の次は電波？世の中怖いものがありすぎる webdirector.livedoor.biz/archives/52608… #fb

— Norio Sugama – のりささん (@Norisa) 2013年5月30日

■ 適応後

ブログ更新： 「イオン銀行」と「ゆうちょ銀行」、他行だったら「イオン銀行」の方がお得 webdirector.livedoor.biz/archives/52608… #fb

— Norio Sugama – のりささん (@Norisa) 2013年5月30日

適応させるとツイートボタンでツイートされる内容も同じように概要表示が付くようになります。

テストです。 / 「イオン銀行」と「ゆうちょ銀行」、他行だったら「イオン銀行」の方がお得 webdirector.livedoor.biz/archives/52608… @norisaさんから

— Norio Sugama – のりささん (@Norisa) 2013年5月31日

写真がちょっとあれですが後で修正することにして、ひとまずはこれで行こうと思います。