投稿日 2017-04-20
著者 staff

ツイートにページ情報を表示する「Twitterカード（Twitter Cards）」を設定してみた

Blogのカテゴリ Webサイトの作り方
Blogのカテゴリ制作ノウハウ

こんにちは、めぐたんです。
今回お届けするのは「Twitterカード（Twitter Cards）」の設定方法について！

Twitterカードとは下図のようなものです。ご覧のとおり、TwitterでURLをシェアしたときにページの情報が表示されるようになります。

特に流れの速いTwitterでは、このTwitterカードが設定されているか否かでツイートの注目度が大きく違ってきますよね。

グランフェアズでも、ブログを公開した後はいつも公式アカウントでシェアを行っています。せっかくだからこのTwitterカードを実装したい！…ということで早速試してみることにしました。

設定はたったの3ステップで完了します。さくさくと見ていきましょう。

設定してみよう

Twitterカードの種類を選び、アイキャッチ画像を作成する

実装できるTwitterカードは4種類。

Summaryカード
大きな画像付きのSummaryカード
Appカード
Playerカード

ブログ記事のシェアのように、シンプルにページのアイキャッチ、タイトル、説明文を表示させたいときには「Summaryカード」「大きな画像付きのSummaryカード」が適しています。

「Appカード」はアプリ用、「Playerカード」は動画やスライドショーを載せられるものです。今回実装したいものには該当しないので、本記事では割愛します。

「Summaryカード」「大きな画像付きのSummaryカード」でそれぞれ作成するアイキャッチ画像の仕様は下表のとおり。

カードの種類	画像の比率	最小サイズ(px)
Summaryカード	1:1	144×144
大きな画像付きのSummaryカード	1.91:1	600×314

とはいえ厳密にルールに沿って作成する必要はなく、これを超えるサイズの場合は自動で中央からトリミングしてくれます。

ちなみに、Twitterカードの画像はFacebook用の「og:image」と併用することができます。

og:imageの推奨サイズは1200px × 630pxですので、同じヨコイチである「大きな画像付きのSummaryカード」を実装する場合はこの1200px × 630pxで画像を作っておくのがよいでしょう。

metaタグ追加

画像が準備できたら、次は設定を<head>内に記述していきます。

<meta name="設定項目" content="設定値">

下表を参考に必要な設定項目を確認してください。

主な設定項目

必須	設定項目	意味	OpenGraphと併用可
〇	twitter:card	カードの種類	–
	twitter:site	WebサイトのTwitterID	–
	twitter:creator	コンテンツ作成者のTwitterID	–
〇	twitter:title	ページのタイトル	og:title
〇	twitter:description	ページの説明	og:description
〇	twitter:image	アイキャッチ画像のURL	og:image

設定値の一覧はこちら
Cards Markup Tag Reference — Twitter Developers

各項目の解説と設定例

twitter:cardは、「Summaryカード」ならsummary、「大きな画像付きのSummaryカード」ならsummary_large_imageと指定します。

<!-- 記述例：Summaryカード -->
<meta name="twitter:card" content="summary">
<!-- 記述例：大きな画像付きのSummaryカード -->
<meta name="twitter:card" content="summary_large_image">

twitter:site/twitter:creatorは、該当するアカウントを持っている場合のみでOK。

<!-- 記述例：WebサイトのTwitterID -->
<meta name="twitter:site" content="@granfairs">
<!-- 記述例：コンテンツ作成者のTwitterID -->
<meta name="twitter:creator" content="@granfairs_user">

twitter:title/twitter:description/twitter:imageの3つは、OpenGraphの項目と併用できます。すでにOpenGraphに設定されている項目がある場合は、Twitter側を省略できます。

<meta property="og:title" content="株式会社グランフェアズ">
<meta property="og:description" content="グランフェアズの強みは、実践型プロジェクト管理と精緻なサイト設計です。">
<meta property="og:image" content="http://www.granfairs.com/assets/img/fb-ogp-01.png">
<!-- 「twitter:title」「twitter:description」「twitter:image」は設定しなくてもOK！-->

グランフェアズサイトでは、og:imageを設定済みだったためTwitter:imageは省略。最終的にこのように記述することになりました！

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@granfairs">
<meta name="twitter:title" content="{ページのタイトル}">
<meta name="twitter:description" content="{ページの説明文}">

もちろんCMSで動的にコンテンツを生成している場合、twitter:title、twitter:description、twitter:imageにはページそれぞれに合ったものが出力されるような記述の仕方が必要です。