Twitterカードを導入して情報発信

コンテンツマーケティングの一環として、自社でブログを書いてツイッターで情報発信という流れをされているところも増えたので、ツイッターで拡散した記事を、よりクリックしてもらえるようになる「twitter（ツイッター）カード」の導入方法をメモ。

Twitterカードとは

Twitterカードとは記事等のツイートボタンを押した（ URLをシェア ）際に自身で入力したコメントは別に、自動的にツイートに組み込まれるページ情報のこと。

上のイメージのように、記事のURLのみでなく、タイトルや要約文、画像が一緒に表示されるので、ユーザーの目に留まりやすく、流れの速いツイートの中では、このTwitterカードが設定されているかどうかでツイートのクリック率も大きく変わる。

Twitterカードの概要と設定方法

Twitterカードの設定は、情報発信をするページのHTMLファイルのheadタグ内に専用のコードを直接記載することで可能。

<meta name="twitter:card" content="カード種類">
<meta name="twitter:site" content="@ユーザー名">
<meta property="twitter:title" content="記事のタイトル">
<meta property="twitter:description" content="記事の要約（ディスクリプション）">
<meta property="twitter:image" content="画像のURL">

「twitter:title」「twitter:description」「twitter:image」の3つは、OpenGraphの項目と併用可。
すでにOpenGraph（「og:title」「og: description」「og: image」）が設定されている場合は、Twitter側を省略可能。カードの種類は下記の通り。

カードの種類

種類	表示される内容
summary	タイトル、説明、およびサムネイルを表示できる。
summary_large_image	「summary」とほぼ同じ、表示される画像が大きくなる。
app	アプリを直接ダウンロードできるボタンを表示できる。
player	ビデオ/オーディオ/メディアを表示できる。

• About Twitter Cards

WordPress（ワードプレス）への導入

実際は、ワードプレス等のCMSに組みこんで自動取得する流れがメインになるので、ワードプレスへの導入方法もメモ。
「All in one seo」というプラグンでも実装はできるが、今回はソースを直にカスタマイズ。

記事の要約（ディスクリプション）を個別に設定できるように機能を追加する

初期状態では、ページの要約の部分が一律（キャッチフレーズ）になっていることが多いので、記事ページで個別に要約が設定できるよう変更。
使用しているテーマフォルダ内の「function.php」に下記のソースコードを追加。

//ディスクリプションの設定
function get_description() {
	if(is_single()) {
		$description = get_the_excerpt();
	}
	if(empty($description)) {
		$description = bloginfo('description');
	}
	return $description;
}

Twitterカードの更新される部分に該当部分を変更する

Twitterカードのソースコードを下記の内容に変更。

<meta property="twitter:title" content="<?php the_title(); ?>">
<meta property="twitter:description" content="<?php echo get_description(); ?>">
<meta property="twitter:image" content="<?php the_post_thumbnail_url( 'medium' ) ?>">

「twitter:title」の記載内容は記事タイトル。
サイト名なども記載したい場合は好みで変更。
「twitter:description」に表示される内容は各記事の「抜粋」に入力した内容。入力がなければ「キャッチフレーズ」になる。
「twitter:image」の記載内容は「アイキャッチ」で登録している画像。

「Card validator」表示内容を確認

ソースコードを追加したら、きちんと表示されるのかを「Card validator」で確認。「Card URL」に設定したページのURLを入力して「Preview card」をクリック。正しく表示されれば完了

• Card Validator | Twitter Developers