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

[caption id="attachment_1407" align="aligncenter" width="500"] By: Rosaura Ochoa[/caption]

こんにちは。

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

この様な表示が以下の表示になります。

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

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

設定手順

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

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

HTMLのタグをサイトに追加

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

<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="こんにちは。 Google Readerが７月１日で終了することになりました。利用者の減少により不要なサービスと判断されたようです。それを受けて、">
<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」サイトの情報入力が必要ですので、設定します。

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