ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

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

      2015/02/16

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

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

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

これを押すと、

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

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

スポンサーリンク

OGP とは

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

 

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

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

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

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

TwitterCarsの利用申請

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

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

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

サインインするとこのような画面が表示されます。<br />
WordPress[TwitterCards] ツイッターに概要を表示させる方法

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

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

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

スポンサーリンク

 - WORDPRESS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

WordPress Popular PostをStinger5と同じ表示にカスタマイズ
WordPress Popular PostをStinger5と同じ表示にカスタマイズ
WordPress[Acunetix WP Security] テーブル接頭辞を簡単に変更する
WordPress[Acunetix WP Security] テーブル接頭辞を簡単に変更する
WordPress[Stinger5] プラグインなしで背景を画像にする
WordPress[Stinger5] プラグインなしで背景を画像にする
WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法
WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法
WordPress[Table Press] 表を作成してブログに表示
WordPress[Table Press] 表を作成してブログに表示
WordPress[さくらサーバーでCloudFlare] 管理画面にログイン出来ない問題
WordPress[さくらサーバーでCloudFlare] 管理画面にログイン出来ない問題
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress[Stinger3] LINEで送るボタンを設置
WordPress[Stinger3] LINEで送るボタンを設置
wordpress初心者でも出来る、劇的に読み込みが速くなる3つの方法
wordpress初心者でも出来る、劇的に読み込みが速くなる3つの方法
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示