[必須]ツイートを華やかにするTwitter Cardsの設定方法 for WordPress

By: Rosaura Ochoa

こんにちは。

Twitterでサイトをシェアされた際に、リッチなサイト情報を表示するツイート内容に含める「Twitter Cards」の設定を行なってみました。
FacebookやGoogle+でシェアされると画像つきで表示されます。イメージとしてはあのような形式です。
これは「OGP (Open Graph Protocol)」と呼ばれるプロトコルのようです。

スクリーンショット 2013-03-17 15.07.52
この様な表示が以下の表示になります。
スクリーンショット 2013-03-17 15.17.22

プロトコルと言われたら、プロトコル好きの私としては調べないわけに行きません。
別途、調べて見たいと思います。

ではTwitter Cardsの設定を行なってみたいと思います。

設定手順

  1. HTMLのタグをサイトに追加
  2. Twitterに当該サイトの登録

手順としてはたったこれだけです。簡単ですね。

HTMLのタグをサイトに追加

WordPressならばプラグインの導入でさらに簡単です。
今回は「Twitter Cards」にて設定したいと思います。
このプラグインをインストールすると、投稿ページに以下のようなタグが追加されています。

  • <meta name=”twitter:card” content=”summary”>
  • <meta name=”twitter:description” content=”こんにちは。 Google Readerが7月1日で終了することになりました。 利用者の減少により不要なサービスと判断されたようです。 それを受けて、”>
  • <meta name=”twitter:image” content=”http://i2.wp.com/tetoatom.com/wordpress/wp-content/uploads/2013/03/20130315-215533.jpg?resize=640%2C426″>
  • <meta name=”twitter:title” content=”なんやかんやゆうとりますが、Google Readerの代替は今のところ、これが有力みたいだな。”>
  • <meta name=”twitter:url” content=”http://tetoatom.com/2013/03/15/1276/”>

これがTwitter Cardsの為のタグになります。

Twitterでプレビュー用のツールが用意されているので、確認してみましょう。
「Preview Tool」

Twitterに当該サイトの登録

以下のページアクセスしてサイトのTwitter Cards登録をしましょう。
「Participate in Twitter Cards」
サイトの情報入力が必要ですので、設定します。
スクリーンショット 2013-03-17 15.20.06

  • Website domain:サイトのドメインを入力します。
  • Website description:サイトの説明を入力します。
  • Twitter Username associated with that domain:サイトに関連させているツイッターユーザー名を入力です。私の場合はtetoatomです。
  • Example Summary Card URL:
  • Example Photo Card URL:
  • Example Player Card URL:

 

3つあるExampleのうち、どれかに参考の情報を設定しておきます。
今回は、Example Summary Card URL:にどれか設定済みの投稿のサイトを登録しておきます。

上記の入力が完了すれば「Submit」を押下して完了です。
数日後に「Your request to be included in Twitter Cards has been approved」というメールが届くようです。

完了までしばらく待ちましょう!!
楽しみだ〜!!

あわせて読む

“[必須]ツイートを華やかにするTwitter Cardsの設定方法 for WordPress” への1件の返信

  1. ピンバック: WordpressなどでTwitterCards導入に苦戦された方は必見! | ブルマンぶるぶる

コメントを残す