WordPressで『TwitterCard』を設定して、つぶやいた時にサイトの概要が表示されるようにする方法

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

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

TwitterCardとは？

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

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

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

TwitterCardを設定してみる

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

TwitterCard専用のタグを記述する

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

<meta name="twitter:card" content="画像の表示形式" />
<meta name="twitter:site" content="@ツイッターアカウント名" />
<meta name="twitter:title" content="自分のサイトのタイトル" />
<meta name="twitter:description" content="自分のサイトの紹介文" />
<meta name="twitter:image" content="表示される画像のURL" />
<meta name="twitter:url" content="自分のサイトのURL" />

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

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

<?php
    $_id = get_the_ID();
    $_post = get_post($_id);
    $_content = $_post->post_content;
    $_content = str_replace(array("\r\n", "\r", "\n"), '', $_content);
    $_content = strip_tags($_content);
    $_description = is_front_page() ? get_bloginfo('description') : mb_strimwidth($_content, 0, 100, "...", "utf-8");
    $_thumbnail = wp_get_attachment_url(get_post_thumbnail_id());
?>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ツイッターアカウント名">
<meta name="twitter:creator" content="@ツイッターアカウント名" />
<meta name="twitter:url" content="<?php echo("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>" />
<meta name="twitter:title" content="<?php if (is_front_page()) { bloginfo('name');} else { wp_title('');}?>">
<meta name="twitter:description" content="<?php echo $_description;?>">
<meta name="twitter:image" content="<?php if(has_post_thumbnail()) { ?><?php echo $_thumbnail;?><?php } else { ?>アイチャッチ画像が設定されていない場合代わりに表示するデフォルト画像のURL<?php } ?>">

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

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

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

Card Validatorに申請する

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

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

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

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

【おまけ】TwitterCardの表示形式

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

<meta name="twitter:card" content="画像の表示形式" />

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