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

ツイッターカード

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

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

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

photo by 13. Stock Online Relations

スポンサーリンク
レクタングル(大)広告

ツイッターカードとは

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

概要を表示

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

ツイッターカード summary

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

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

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

ツイッターカード summary_large_image

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

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

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

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

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

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

デフォルト(Summary)

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

summary

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

Summary Large Image

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

summary_large_image

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

設定完了後は

設定を完了した後は、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で、右がモバイルです。

web_summary_1ios_summary

Summary Card | Twitter Developers

Product Card

製品情報を表示するときに指定します。

web_productios_product

Product Card | Twitter Developers

Photo Card

写真などがメインのページに使用します。

web_photoios_photo

Photo Card | Twitter Developers

Summary Large Image Card

大きな写真を利用してブログ記事などを紹介したいときなどに使用します。

web_summary_largeios_summary_large

Summary Card with Large Image | Twitter Developers

Player Card

動画などを紹介しているページで使います。

web_player2ios_player

Playerカード | Twitter Developers

App Card

スマホのアプリ紹介などに。

ios_app

App Card | Twitter Developers

Gallery Card

多数の画像などをツイッターカードに含めたい時に。

web_galleryios_gallery

Gallery Card | Twitter Developers

まとめ

Twitter Cardsプラグインをインストールして、Wordpressテーマのfunctions.phpをいじれば、いろいろなタイプのツイッターカードも利用することができます。

他の人が使っていないような、ツイッターカードを使って人目を引きたい時などには、結構有効な方法ではないかと思います。