Webデザイナーとして活動しているサブローのブログです。
  • HOME
  • WordPressで『TwitterCard』を設定して、つぶやいた時にサイトの概要が表示されるようにする方法
2016 6 30

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

この記事は7分ほどで読めます
この記事をSNSでシェアする方はこちら

どうも、サブロー(@saburo_design)です。

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

せっかくツイッターのつぶやきを不特定多数の人に見てもらうなら、少しでもインパクトのあるつぶやきにしたいですよね?それなら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のサイトにアクセスし、

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


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

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


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

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

【おまけ】TwitterCardの表示形式

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

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

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

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

コメント

  1. Pingback: Twitterカードを作成してみる2(忘れちゃいけないこと) | Masa-P

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Profile

Web・グラフィックデザイナー
Webデザイナーやってます。WordPressの技術録やプラグインの紹介、ブログを運営して分かったことからプライベートな事まで、興味ある事・気になる事を色々書いて行こうと思います。ツイッターとかインスタグラムもやってますのでよければフォローしてください。
PAGETOP
Copyright © SABURO DESIGN All Rights Reserved.