おはようございます、サブロー(@saburo_design)です。

ワードプレスで記事を作成した時に拡散させるための手段としてツイッターを使用することが多いです。特にブログを運営したばかりの時はサイトへのアクセスも少なく、せっかく書いた記事を誰にも見てもらえないことなどしばしば・・・。

せっかくツイッターのつぶやきを不特定多数の人に見てもらうなら、少しでもインパクトのあるつぶやきにしたいですよね?それならTwitterCardは是非設定しておくべきです。ワードプレスならTwitterCard専用のプラグインもありますが今回はプラグインなしでの設定方法となります。

TwitterCardとは?

ツイッターカードはサイトのURL付きで何かしらつぶやいた時に、サイトの画像・タイトル・概要が自動的に表示されるシステムです。下記の画像のような感じです。

この部分が『ツイッターカード』で表示される

どうですか?文字だけのつぶやきより多少はインパクトが出ますよね?たったこれだけのことですが、毎日世界中の人達がつぶやくツイートという名の砂漠の砂の中から、自分のツイートをクリックしてもらおうと思ったら、こういうものは使わない手はないですよね?

自分のサイトを持っているあなたの特権みたいなシステムです。それに設定も簡単ですので少なくともやっておいて損はありません。

TwitterCardを設定してみる

TwitterCardを実装するには、まず自分のサイトのheadタグの中にTwitterCard専用のタグを記述し、Card Validatorに申請するだけです。申請といっても自分のサイトのURLを貼っつけてボタンを押すだけです。

TwitterCard専用のタグを記述する

TwitterCard専用のタグの基本はこうです。

サイトのheadタグの中に記述されたTwitterCard専用タグを基本としてつぶやきにTwitterCardを表示させることができます。

細かいことは置いといて先に完成形を見せます。↓

いきなりごちゃっとしてしまいましたがこれをヘッダーのテンプレートの中に記述しておけば、あなたのサイトのどのURLをつぶやいてもTwitterCardが表示されます。

ツイッターアカウントの部分(このサイトの場合@saburo_design)とアイチャッチ画像が設定されていない場合代わりに表示するデフォルト画像のURLの部分は各自設定してください。

ちなみに表示される画像は、ワードプレスでアイキャッチ画像として設定された画像が使われます。

Card Validatorに申請する

TwitterCard専用のタグを記述できたら、次に『Card Validator』に申請します。Card Validatorのサイトにアクセスし、

自分のサイトのURL貼るクリック


【Card URL】に自分のサイトのURL貼り、【Card URL】をクリックすると・・・。

アイキャッチ画像がTwitterCardとして表示される!


画像がちゃんと表示されたらTwitterCardの設定完了です!

※画像が上手く表示されない人は少し時間を置いてもう一度やってみてください。申請に時間が掛かる場合もあるそうです。

【おまけ】TwitterCardの表示形式

今回は一番オーソドックスなTwitterCardの表示形式を行いましたが、TwitterCard専用のタグの記述の仕方で表示方法を変えたりできます。このサイトではカスタムフィールドを使って、記事ごとにTwitterCardの表示のされ方を変えたりしています。

↑この部分を変えるとTwitterCardの表示の仕方が変わります。

TwitterCardの画像の表示形式一覧
summary デフォルトのカードで、タイトル、説明、サムネイル、Twitterアカウントの属性が含まれています。
summary_large_image Summaryカードに似ていますが、画像が目立つように使用されています。
photo 写真のみを含めたカードです。
gallery 4つの写真を集めて強調したカードです。
app モバイルアプリの詳細を含めて直接ダウンロードできるようにしたカードです。
product 製品情報のために最適化したカードです。