[WordPress]インパクトのあるツイッターカードを作る方法（Twitter Cardsプラグイン設定）

WordPressプラグインのTwitter Cardsプラグインを用いたツイッターカード作成方法の紹介です。

Twitter Cardsプラグインは、基本的にインストール＆申請するだけでツイッターカードを使用できるようになります。

けれど、設定画面などがないので、Wordpress上からはデフォルトのオーソドックスなツイッターカードしかつくれません。今回は、そのデフォルト状態のカードを、ちょこっとコードをいじってカスタマイズする方法です。

photo by 13. Stock Online Relations

ツイッターカードとは

ツイッターカードとは、ツイートの「概要を表示」をクリックすると出てくるリンク先情報のカードです。

誰がつぶやいたかは関係なく、リンク先にツイッターカード情報が埋め込まれていると、以下のようにツイートの下に表示されます。

WordPressでTwitter Cardsプラグインをインストールし、Twitterにカード申請すれば、基本的に上記のように表示されるようになります。（Twitter Cards申請方法についてはこちらを参照してください）

ただ、Twitter Cardsプラグインでは、デフォルトのツイッターカードしか利用できません。

今回は、それを以下のような大きな画像を使ったインパクトのあるツイッターカードに変更する方法です。ついでにドメイン情報や作者情報も設定します。

こうすることで、わざわざ「概要を表示」をクリックして開いてくれた人に、よりわかりやすいページ情報を提供できると思います。

Twitter Cardsプラグインの設定方法

プラグインの設定方法を調べてみたら、日本語での情報が見当たらなかったので、いろいろ調べていくうちに結局Twitter CardsプラグインのFAQに行き着きました。灯台下暗し。

ということで設定方法なんですが、Wordpressテーマのfunctions.phpに以下のように記入します。

function twitter_custom( $twitter_card ) {
    if ( is_array( $twitter_card ) ) {
        $twitter_card['card'] = 'カードタイプ';
        $twitter_card['domain'] = 'ドメイン';
        $twitter_card['creator'] = 'コンテンツ製作者のTwiterID';
        $twitter_card['site'] = 'サイトオーナーのTwiterID';
    }
    return $twitter_card;
}
add_filter( 'twitter_cards_properties', 'twitter_custom' );

function twitter_custom( $twitter_card ) {

if ( is_array( $twitter_card ) ) {

$twitter_card['card'] = 'カードタイプ';

$twitter_card['domain'] = 'ドメイン';

$twitter_card['creator'] = 'コンテンツ製作者のTwiterID';

$twitter_card['site'] = 'サイトオーナーのTwiterID';

}

return $twitter_card;

}

add_filter( 'twitter_cards_properties', 'twitter_custom' );

僕のサイト情報で設定すると以下のようになります。

function twitter_custom( $twitter_card ) {
    if ( is_array( $twitter_card ) ) {
        $twitter_card['card'] = 'summary_large_image';
        $twitter_card['domain'] = 'nelog.jp';
        $twitter_card['creator'] = '@MrYhira';
        $twitter_card['site'] = '@MrYhira';
    }
    return $twitter_card;
}
add_filter( 'twitter_cards_properties', 'twitter_custom' );

function twitter_custom( $twitter_card ) {

if ( is_array( $twitter_card ) ) {

$twitter_card['card'] = 'summary_large_image';

$twitter_card['domain'] = 'nelog.jp';

$twitter_card['creator'] = '@MrYhira';

$twitter_card['site'] = '@MrYhira';

}

return $twitter_card;

}

add_filter( 'twitter_cards_properties', 'twitter_custom' );

このように設定することで、デフォルトのツイッターカードと比べて以下のような違いが出ます。

デフォルト（Summary）

ほとんどの人が使用しているシンプルなもの。

HTMLソースでいうとこんな感じで設定されています。

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://nelog.jp/windows-live-writer-plugins-2014-6">
<meta name="twitter:title" content="【改訂版】WindowsブロガーのためのWindows Live Writerプラグイン15選">
<meta name="twitter:description" content="僕のようなWindowsでブログを書いている者にとっては、ブログエディターのWindows Live Writerは欠かせません。 Windows L">
<meta name="twitter:image" content="http://nelog.jp/wp-content/uploads/2014/06/Windows.jpg">

Summary Large Image

設定情報を変更したり追加して、少しリッチになったツイッターカード。通常のものとは以下のような違いがあります。

こちらのHTMLソースはこんな感じになります。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="http://nelog.jp/windows-live-writer-plugins-2014-6">
<meta name="twitter:title" content="【改訂版】WindowsブロガーのためのWindows Live Writerプラグイン15選">
<meta name="twitter:description" content="僕のようなWindowsでブログを書いている者にとっては、ブログエディターのWindows Live Writerは欠かせません。 Windows L">
<meta name="twitter:image" content="http://nelog.jp/wp-content/uploads/2014/06/Windows.jpg">
<meta name="twitter:domain" content="nelog.jp">
<meta name="twitter:creator" content="@MrYhira">
<meta name="twitter:site" content="@MrYhira">