BizVektorでTwitter Cardsを表示する

TwitterCardsサンプル

Twitter Cards というのは、この上の画像のようにリンクがついたツイートに「概要を表示」ボタンが現れて、クリックすると、タイトル・画像・内容が展開される機能です。

将来的には、何もしなくても出るようになるかもしれませんが、今のことろ、Twitter Cards 用の設定をしないと表示されません。

WordPressテーマ「BizVektor」でこの設定をするための方法です。

なぜ、Twitter Cards ?

ツイートした時に内容も表示できるので、ユーザーにわかりやすい。リンクのクリック率が増える。など、いろいろあります。

が、僕の場合は、「かっこいい」から!です。。。

もっと詳しく知りたい方は、【エンゲージメント率150%UPも!?】注目機能Twitter Cards!内容詳細と導入方法まとめをご覧ください。

BizVektorのカスタマイズ

BizVektorは標準でFacebookのOGPタグを出力してくれますので、Twitter Cards 用の改造は簡単です。

基本的に、twitter:card、twitter:siteの2つのMETAタグを追加すれば完成になります。

子テーマの「functions.php」に以下を追加してください。フィルターフックで実現できます。@PrimaryTextの部分は、ご自分のTwitterアカウントを入れてください。

function my_bizVektorOGPCustom($bizVektorOGP) {
$bizVektorOGP .= '<meta name="twitter:card" content="summary" />' . "\n";
$bizVektorOGP .= '<meta name="twitter:site" content="@PrimaryText" />' . "\n";
return $bizVektorOGP;
}
add_filter('bizVektorOGPCustom','my_bizVektorOGPCustom');

Twitterへ申請

一度、ソースで出力されているか確認して、ちゃんと反映されてたら、Twitter Cards | Twitter Developersへ行って、申請してください。

僕の場合は、約一日くらいすると、Twitterから承認されたとメールが来ました。

Twitter card is ready

ツイートしてみてみると、ちゃんと反映されます。

コメントを残す

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