Twitterに画像付きで記事リンクを表示する:Twitterカードの実装法

デザインのあれやこれ

Posted on 2015/1/25 by Kentaro

Twitterに画像付きで記事リンクを表示する:Twitterカードの実装法

TwitterにWebページのリンクを貼った際、リッチ表示(タイトル・イメージ画像・説明がセットになって表示)されるようになる、Twitterカードの設定法について紹介します。

前回『facebookのリンク表示を四角いボックスにする方法』という題名の記事を書きましたが、今回はTwitterにリンクを貼った際にリッチ表示(タイトル・イメージ画像・説明がセットになって表示)されるようになるTwitterカードの設定法について紹介します。

Twitterカードってなに?

Twitterカード Summary Card 表示例

例えばブログ記事等へのリンクがTwitterでつぶやかれた際に、タイトルやイメージ画像・説明文等がセットでカッコよく表示される、いわゆるリッチ表示にしてくれるものをTwitterカードといいます。
facebookでよく見かけるような、画像と一緒に四角いボックスで表示される、あれのTwitter版ですね。

facebookなどの場合だとOGP設定をすれば自動的にリッチ表示にしれくれますが、Twitterカードの場合は+αの設定と申請が必要になります。

Twitterカードの表示形式は7種類あります。
ブログ記事に適したもの、画像を強調したもの、ギャラリー向け、アプリ紹介向け、製品紹介向け、等々…
どの種類のカードにするかを最初に決めて、選択したカードに必要なコードを記載し、カードの申請を行えば設定は完了です。

今回は最もスタンダードなSummary Cardの実装を例に挙げてみます。

Twitterカードの実装に必要なものは?

Twitterカードの実装には、以下のもの・手順が必要になります。

Twitterアカウント

申請時にTwitterアカウントが必要になるので、事前に取っておきます。

htmlファイルにコードを記述

リッチ表示させたいページに、Twitterカード用のコードを記述します。
OGPの設定と似たような…というより、OGP設定を流用できる部分もあって、ほとんど同じようなものです。すでにOGP設定がされていれば、1〜2行のコード追加で完成します。

Twiterカードの申請

Twitterアカウントでログインして、カードの申請を行います。
申請の際には、サイトにTwitterカード用のコードが記述されている必要があるので、先にコード記述を済ませてから申請を行います。

コードの実装

まずはhtmlファイルの<head>内に、以下のTwitterカード実装コードを記述します。
サンプルはSummary Card用の設定です。
(別の種類のカードは設定項目が変わります)


<meta name="twitter:card" content=“※カードの種類" />
<meta name="twitter:title" content="ページタイトル" />
<meta name="twitter:description" content="ページの説明文章" />
<meta name="twitter:image" content="ページのイメージ画像URL" />

OGP設定とよく似てますよね。
要するに『このページの内容はこれこれこうだから、こう宣伝してね』という指示書みたいなもので、やろうとしている事はOGPと全く同じなんです。
ゆえに(かどうかは定かでありませんが…)OGP設定の項目をそのまま流用できます

Twitterカード指定
代替OGP要素
twitter:title
og:title
twitter:description
og:description
twitter:image
og:image

ほとんどの項目がOGP設定を流用できるので、Twitterカードの設定(twitter:card)だけ記述を加えれば完成してしまうんですね。

他の種類のカードを使用する際には、上記の設定項目が変わります。
各カードの設定項目内容は、以下のページを参照してみてください。

Twitterカード | Twitter Developers (Twitter開発者向けページ)

Twitterカードの申請

コードを記述したら、Twitterカードの申請を行います。
申請ページでコードのチェックも行うので、何かエラーがあればここで発見できます。

Card Validator | Twitter Developers (Twitterカードバリデーター|Twitter開発者用ページ)

Twitterアカウントでログインをすると、チェック&申請用ページに飛びます。

Twitterカードバリデーター画面

Twitterカード申請可能画面

画面左のCard URLに、コードを実装したページのURLを入力してPreview cardをクリックすると、ページのチェックが行われます。
コードの記載に問題がなければ、画面右にプレビューが表示されて申請可能となるので、Request Approvalをクリックします。

Twitterカード申請情報入力画面

フォームに必要事項を記入していきます。
…が、ほとんどはTwitterアカウント情報の入力で、ログインしていれば自動的に入力されています。Description(サイトの説明文)を入力したら、フォーム下のRequest Approvalをクリックします。

Twitterカード申請完了画面

『whitelist request for 〜』と書かれた画面が表示されれば申請は終了で、あとは承認メールを待つだけです。
これは私の場合ですが、申請してから十数秒で承認メールが届きました。よほどの事がない限り申請は通り、承認メールもすぐに届くみたいですね。

どうせならOGP設定の時に一緒に設定

今回は代表的なSummary Cardの設定法を例に挙げましたが、OGP+1行で設定できるようなものなので、どうせなら一緒に記述してしまった方がお得だと思うんですね。
たとえ今はTwitterで宣伝する気が無くても、後でやっぱり…って時の保険にもなるので、是非この1行を追加しておく事をおすすめします。

Thank you for reading! 読んでくれてありがとう!