WordPress[TwitterCards] ツイッターに概要を表示させる方法

2014/03/052015/02/16

Twitter（ツイッター）でよく見る「概要を表示」ボタン。

これを押すと、

このようにURL先のページの概要が表示されます。デフォルトの設定ではURLをTwitterに貼付けただけでは表示されませんが、WEBサイトにOGP(Open Graph Protocol)の設定をして、Twitterに申し込みをすれば表示が可能となります。今回はTwitter用のOGP設定をプラグインの「TwitterCards」を導入してやってみたいと思います。

[adsense]

OGP とは

簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別することが難しいのです。なので、決まった OGP という書き方で HTML に情報を付加しておくことで、プログラムからも意味を理解しやすいウェブページを作っていこうってことです。IT戦記さんより引用させて頂きました。

 

WordPressに「TwitterCards」をインストール

管理画面　→　プラグイン　→　新規追加　→　「Twitter Cards」と検索してインストールしてください。

インストール後「プラグインを有効化」してください。TwitterCarsの設定は以上です。

TwitterCarsの利用申請

ツイッターカードを利用する為にTwitterのサイトに行って利用申請をします。下記のリンクからデベロッパーページに飛んでください。

デベロッパーページの右上「Sign in」よりサインインしてください。

表示したいカードの種類を選択します。dmgadget（ディーエムガジェット）では左上の「Summary」を選択しています。

選択後、「Card Validator」という名前のページに行きます。タイトルの下に「Validate & Apply」というタブがあるのでクリック。

次のページでTwitterのOGPの設定が出来ているかどうかチェックが出来ます。トップページのURLではなく、ブログの記事のURLを「ENTER URL to Validate」のボックスの中にペーストして「GO」をクリックします。WordPressにインストールした「Twitter Cards」が正しく動作していれば下記のように正しく表示されます。

dmgadget（ディーエムガジェット）のブログはすでに登録出来てしまっているため、管理ページの方でやってみました。読み込みが終わって左上に「Request Approval」と表示されるのでそちらをクリックして申請します。次に「Request Domain Approval」というページに行きます。名前とE-Mailアドレス、ツイッターのアカウント名を確認してスクロールして下へ移動します。

[adsense]

次にサイトのURL、ディスクリプション（サイトの説明文）ツイッターのユーザー名を入れたらもう一度「Request Approval」をクリックします。

認証メールが到着すればツイッターガードの使用が出来ます。読んで頂いてありがとうございました。

[adsense]