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に以下のように記入します。
1 2 3 4 5 6 7 8 9 10 | 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' ); |
僕のサイト情報で設定すると以下のようになります。
1 2 3 4 5 6 7 8 9 10 | 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ソースでいうとこんな感じで設定されています。
1 2 3 4 5 | <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ソースはこんな感じになります。
1 2 3 4 5 6 7 8 | <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"> |
設定完了後は
設定を完了した後は、Card Validatorなどで設定情報の確認をすることをお勧めします。
その他のtwitter:cardタイプ
今回は、「summary」と「summary_large_image」のみ紹介しましたが、ツイッターカードは全部で7種類のカードタイプを選択できます。
Summary、Product、Photo、Summary Large Image、Player、App、Galleryの7つです。
主な特徴を以下にまとめておきますので自分のサイトにあったカードタイプを選択してください。
詳しくはTwitter Cards | Twitter Developersを参照してください。使用するカードによっては、書式が違ってきます。
Summary Card
通常のツイッターカード。左がPCで、右がモバイルです。
Summary Card | Twitter Developers
Product Card
製品情報を表示するときに指定します。
Product Card | Twitter Developers
Photo Card
写真などがメインのページに使用します。
Photo Card | Twitter Developers
Summary Large Image Card
大きな写真を利用してブログ記事などを紹介したいときなどに使用します。
Summary Card with Large Image | Twitter Developers
Player Card
動画などを紹介しているページで使います。
Playerカード | Twitter Developers
App Card
スマホのアプリ紹介などに。
Gallery Card
多数の画像などをツイッターカードに含めたい時に。
Gallery Card | Twitter Developers
まとめ
Twitter Cardsプラグインをインストールして、Wordpressテーマのfunctions.phpをいじれば、いろいろなタイプのツイッターカードも利用することができます。
他の人が使っていないような、ツイッターカードを使って人目を引きたい時などには、結構有効な方法ではないかと思います。