WordPressに「Twitter Cards」を設置できるプラグイン「Twitter Cards Meta」を導入してみた

スポンサーリンク

Twitterでブログ記事のリンクいれてツイート(シェア)すると、ブログの概要とサムネイル画像を表示してくれる Twitter Cards を設置してみました。プラグイン「Twitter Cards Meta」で簡単に終了します。Twitterにお願い申請して数分~数日待てば表示されるようになります。

プラグイン「Twitter Cards Meta」

「Twitter Cards」って何?私がそれを知ったきっかけは自分のツイートでした。別のサイトの記事をリンク入りでツイートすると、我がブログのリンク入りツイートにはない「概要を表示」するボタンがあることに気づきました。

image

押してみると、ブログのタイトル、サムネイル画像、記事概要が表示されるではありませんか?

image

「これはカッコいい!」

さっそくググると「Twitter Cards」(ツイッターカード)という、Facebookでいうところの「Open Graph Protocol(OGP)」のようなもので、ブログの各記事に以下のようなタグを挿入して、ツイートに含めてくれる機能です。

<meta name=”twitter:url” content=”https://www.amamoba.com/pc/shindou-kayoko.html”>
<meta name=”twitter:title” content=”美人車いすブロガー 進藤加代子さんのブログ運営スタイルから学べる3つの点”>
・・・・・・

(⇒「WP-OGP」でフェイスブックからアクセス倍増方法とは!合計PVが2倍へ嬉しい悲鳴に!

果たしてフォロワーさんがリンク入りツイートの「概要を表示」をクリックして、どれほどブログへ来てくださるか分かりませんが、いいことがあるかもしれませんので、早速導入してみます。

WordPressへの導入はテーマへの手入力でもできそうですが、プラグインが手軽です。中でも Twitter Cards Meta というプラグインは良さそうです。インストールするだけで設定もなく使える Twitter Cards  ではできないブログトップの Twitter Cards タグを入れてくれますよ。

image

プラグイン「Twitter Cards Meta」をいつものようにWordPressダッシュボードの「プラグイン」「新規追加」からサーチしてインストール、有効化します。

設定は「設定」タグの「Twitter Cards Meta」から。

image

最初に、Twitterアカウントを入力します。あとはこのままでも良いのですが、ブログのトップページ(このブログならwww.amamoba.com)のシェアでも「サムネイル画像」や「ブログの概要」を入れたい場合には、「Default Image URL:」に画像のURL、「Description For Home page」に「ブログの概要」を記述します。

image

設定を「保存」したあとは、個別記事には以下のように<header>にタグが挿入されます。

image

Titterでシェアすると「概要の表示」には以下のように表示されます。

image

また、ブログのトップのタグは以下のように設定が反映されています。

image

そのURLをシェアした場合には以下のように「概要の表示」で表示されます。

image

さて、プラグイン「Twitter Cards Meta」の設定が終われば、Twitter申請する必要があります。

Twitterにログインして、https://dev.twitter.com/docs/cards/validation/validator へ行き「Summary」を選択します。

image

Card Validator(カード検証ツール)で、Validate & Apply(検証と申請)のタグをクリックし、ブログの任意の記事URLでプレビューさせます。失敗することが多々ありますので、繰り返します。

無事に表示確認できたら「Request Approval」(承認申請)

image

Request Domain Approval で利用申請します。Twitter Username までは自動入力です。

image

Website Information(ブログのプロフィール)を以下のように記入します。

image

最後に、Request Approval をクリックして申請手続きを終わらせます。

image

数日待てば、Twitterから承認メールがとどき、無事にTwitter Cards が機能開始します。私の場合は数分でした。

image

以上、プラグイン「Twitter Cards Meta」を利用したTwitter Cards 表示方法でした。

感想:こんなに記事を詳しく書いて、誰の役に立つのだろう?

スポンサーリンク

シェアする

フォローする

関連記事