Twitter Cardsの設定！ツイートされた時、概要、アイキャッチを表示する方法

Twitterにブログ記事などがシェアされた時、アイキャッチ画像や概要が表示されることがあります。これは、Twitterの「Twitter Cards」が、設定されているサイトに起こるものです。

アイキャッチ画像や概要がツイートに表示されると、Twitterで他のツイートよりも存在感を放ち注目を集めることができるでしょう。

すると必然的にサイトの訪問者が増えることがのではないでしょうか、読んでもらいたいブログ、見てもらいたいコンテンツがあるなら必ず行っておきたい設定です。

以前、紹介したFacebookのOGPのTwitter版みたいなものですね。OGPをあらかじめ設定しておくと「Twitter Cards」の設定を一部省略することもできます。

そんな期待値の高い「Twitter Cards」について、どのように設定するのか、どんなことができるのか、調べたことをまとめます。

Twitter Cardsとは何か、

Twitter Cardsは、コンテンツのリンク付きツイートがタイムラインに投稿された時、そのリンク先の情報も表示されるようにする機能です。

Twitter Cardsが設定されているサイトとしてないサイトではリンク付きツイートが投稿された時、以下の画像のような違いがあります。

違いは一目瞭然です。設定されていないサイトはただのリンク付きツイートですが、設定されているツイートには、タイトル、概要、アイキャッチ画像が表示されています。

ユーザーにとってもリンク先に、どんな内容が表示されるかプレビューを見ることができるので嬉しい機能です。

これをどのように表示させているかは、リンク先のWebサイトのHTMLのソースを確認してみると、謎を解くことができます。

@millkeyweb

<head>...</head>内に以下のような<meta>要素がありませんか？

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@millkeyweb">
<meta name="twitter:creator" content="@millkeyweb">
<meta name="twitter:domain" content="millkeyweb.com">

この<meta>タグを書いて、Twitterに申請することによってTwitterのクローラーがその情報を取得してくれるのです。TwitterのクローラーについてどのようなことをしているかはTwitter Developersを参照してみてください。

Getting Started with Cards | Twitter Developers

リッチ表示するTwitter Cardsの種類

リッチに表示するTwitter Cardsには、7種類あります。「設定されている画像」は7種類の1つ「Summary Card」が設定されています。その他にも以下のような種類があります。

それぞろの表示例はリンク先で確認してみてください。リンク先はTwitter Developersの「Documentation」にリンクしています。

Summary Card: Twitter CardsのデフォルトのCardが「Summary Card」になります。これは製品やレストラン情報、ブログ記事など、Webコンテンツの多くに使うことができます。

Summary Card with Large Image: Summary Cardの画像が大きく表示されるCardです。画像は説明文の上に表示されます。画像は最小でも280×150の大きさで1MB未満のサイズが必要です。

Photo Card: 写真が表示されるCardです。現在GIFアニメーションはTwitterでサポートしていないようです。

Gallery Card: 異なる写真が4つ表示させることのできるCardです。リンク先に単一の写真でなく関連する複数の写真があることを伝えることができます。

App Card: ツイートしたアプリの詳細情報を表示できます。このCardは現在、iOSとAndroidでのみ使用できます。WebやモバイルWebでは使用できません。

Player Card: プレイヤーは特別な承認が必要のようです。オーディオ、ビデオ、スライドショーをストリーミング再生できます。Player Cardにはいくつかのルールがあります。詳しくは「Documentation」を参照してください。

Product Card: 製品情報を表示することができます。画像は160×160以上の大きさが必要で、正方形を推奨しています。そのほか在庫情報、価格など製品の細かいことが表示できます。

「Card」の種類を指定している<meta>要素は以下の部分です。

<meta name="twitter:card" content="summary">

name属性にTwitter独自のプロパティtwitter:cardを指定して、content属性に種類を指定します。これでTwitterのタイムラインの表示が変わります。例えば、contentの値content="summary_large_image"にした場合、大きい画像で概要を表示する「Summary Card with Large Image」になります。

その他の「Card」の値は以下のようになっています。

種類	twitter:card
Summary Card	`summary`
Summary Card witd Large Image	`summarysummary_large_image`
Photo Card	`photo`
Gallery Card	`gallery`
App Card	`app`
Player Card	`player`
Product Card	`product`

Twitter Cards のプロパティ

Twitter Cards のプロパティについて少し解説したいと思います。もっともよく使われるであろう「Summary Card」も例に挙げて解説してみます。

プロパティ

サイトを複数人で運営している場合は、twitter:creatorを使うといいでしょう。

Getting Started with Cards | Twitter Developers

Summary Cardのプロパティ

Summary Cardにはどういったプロパティがあるか確認してみましょう。

下記のリンク、Twitter DevelopersのTwitter CardsからSummary Cardを開いて、下へスクロールするとプロパティの表があります。Requiredが「Yes」の項目は必須のプロパティです。

Summary Card | Twitter Developers

プロパティ

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-article.jpg">

Twitter Cards の設定方法

Cardの設定にはサイトのHTMLにコードをドキュメントを見ながら直接書き込んでいってもいいですが、Twitterのツールの「Card Validator」を使うと便利です。このツールを使うと以下のことができます。

Cardの種類を選ぶことで簡単に必要なコードが分かる
タイムラインでのプレビューを確認しながらコード生成ができる
サイトにコードを貼り付けたら記入漏れがないか確認することができる
Twitter CardsのTwitterへの申請ができる

プレビューを確認しながらコードを出力してくれるので、自分の思い通りにコードができたらコピーして貼り付けるだけです。さらにその確認までできるので使わない手はないですね。

Card Validator の使い方

Card Validator を使って設定するまでは5ステップです。

「Cardの種類を選ぶ」
プレビューを見ながら値を入れる
metaタグをコピー＆ペースト（Wordpressに対応させる場合は改変）
WebサイトのTwitter Cardsの確認
Twitterへ申請し承認をもらう

Card ValidatorにアクセスしたらTwitterアカウントでログインします。するとCardの種類を選択するウィンドウが現れるのでサイトに埋め込みたいCardを選びます。今回は例として、ブログに「Summary Card」を設定すると仮定します。

Card Validator | Twitter Developers

すると、左側にTry Cardsの「Standard Tags」右側に「Card Preview」と「Sample Embed Code」が表示されます。今回はオプションの「Mobile App Integration」は省略させていただきます。

すでに先ほど選択したCardの種類はtwitter:cardの項目に表示されています。変更したい場合は「Choose Card…」をクリックして変更してください。試しにこの状態で「Try Cards」の下にある「Update Preview」を押してみましょう。

「Update Preview」を押したあとの表示:

「Card Preview」と「Sample Embed Code」の表示が変わり、「Standard Tags」の入力していない部分で一部左側の丸が赤ランプになっているのが分かると思います。これは、このCardの必須の項目になります。

Summary Cardの場合、twitter:titleとtwitter:descriptionですね。この項目は必ず入力しましょう。下図のように入力したら「Update Preview」を押しましょう問題がなければ「Standard Tags」が緑ランプになります。

「Sample Embed Code」にコードが表示されています。しかし、contentが空の余分なコードも含まれているので、contentの入力された必要な部分をコピーして、サイトのHTMLの<head>...</head>内に貼り付けましょう。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@millkeyweb">
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="ページの概要や要約">
<meta name="twitter:creator" content="@millkeyweb">
<meta name="twitter:image:src" content="http://example.com/example.png">
<meta name="twitter:domain" content="millkeyweb.com">

これで静的サイトの場合は設定は完了ですが、Wordpressなどのブログでは動的に値を入力されるようにしたいところです。

WordPress への対応

WordPressに対応させるには前にOGPを設定する方法を紹介したのでその方法を参考にしてみてください。

SNSでリッチ表示してくれるOGPをWordPressに、プラグインを使わず設定する

例として以下のコードをfunctions.phpに書くと実装できると思います。

function twitter_cards() {
  if (!is_admin()) {

    global $post;
    $format = '<meta name="%1$s" content="%2$s" />';
    $card = 'summary';
    $site = '@millkeyweb';
    $title = esc_attr(get_option('blogname'));
    $description = esc_attr(get_option('blogdescription'));
    $image = 'http://example.com/example.png';
    $creator = '@millkeyweb';
    $domain = 'millkeyweb.com';

    if (is_singular()) {
      $title = esc_attr($post->post_title);
      $description  = strip_tags($post->post_excerpt ? $post->post_excerpt : $post->post_content);
      $description  = mb_substr($description, 0, 90) . '...';
      if (function_exists('has_post_thumbnail') AND has_post_thumbnail($post->ID)) {
        $attachment = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
        $image = esc_url($attachment[0]);
      } elseif (preg_match('/<imgs[^>]*src=["']?([^>"']+)/i', $post->post_content, $match)) {
        $image = esc_url($match[1]);
      }
    }

    $args = array(
      'twitter:card'  => $card,
      'twitter:site'   => $site,
      'twitter:title' => $title,
      'twitter:description' => $description,
      'twitter:creator' => $creator,
      'twitter:image:src' => $image,
      'twitter:domain'      => $domain
    );
    foreach ($args as $key => $value) {
      printf($format, $key, $value);
    }
  }
}
add_action('wp_head', 'twitter_cards');

Twitter Cards コードの確認をする

Card Validatorの「Validate & Apply」のタブをクリックして、コードを設定したサイトのURLを入力して「Go!」をクリックしましょう。

するとうまく確認できた場合、「Standard Tags」と「Card Preview」「Sample Embed Code」が表示されます。問題がなければ「Standard Tags」は緑ランプが表示されます。赤ランプが表示していたり、何か警告がでていたらその箇所を修正しましょう。

そして、確認したURLには現段階ではまだ申請していないので「黄ランプ」が表示されます。

Twitter への申請

サイトにエラーがなければ、Twitterに申請して承認してもらいましょう。するとTwitterでシェアされた時に、Twitter Cardsの情報が表示されるようになります。

確認した際に、黄ランプがでていた場合「Request Approval」とボタンが表示されます。これをクリックしましょう。これで申請は終了です。承認は比較的早く反映されると思います。

承認されたページを確認すると「緑ランプ」が表示されます。

承認されたら自分のTwitterアカウントでページをツイートして、Twitter Cardsの情報が表示されるか確認してみるといいでしょう。

表示速度を上げるTwitter CardsとOGPの関係

OGPはSNSでシェアされた時に、リッチに表示されるmeta要素と前の投稿で説明しました。詳しくは一度こちらの投稿を読んでみてください。

Facebookなどでサイトが共有された時、リッチ表示するOGPの設定

このOGPは、Twitterでも有効です。「Twitter Cards コードの確認をする」で表示した画像を見てください。画像が荒くて見づらいかもしれませんが、タイトルにog:title、画像にog:imageが読み込まれています。

Twitterはまず、Twitter Cardsのタグを探し、それが見つからなかった場合、バックサポートとしてOGPのタグを認識します。

これはどんないいことがあるかというと、例えば、ブログ記事をシェアされたとします。伝えたい情報は、タイトル、概要や要約、アイキャッチ画像になるでしょう。

するとTwitter CardsとOGPの値が重複する箇所ができます。サイトに余分な記述があるとサイトのサイズが大きくなり、表示速度を低下させ、SEOに影響を与えることになるかもしれません。なるべくサイズを小さく保ちたいところです。

この時、Twitter Cardsのタグを省略するればいいのです。するとOGPの情報を読み取ってくくれるので、重複部分をなくす事ができます。コードにすると以下のようになります。

重複したコード(Line 14, 15, 17)

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<!-- OGP -->
<meta property="article:publisher" content="https://www.facebook.com/millkeyweb">
<meta property="og:type" content="article">
<meta property="og:url" content="https://millkeyweb.com/">
<meta property="og:title" content="Twitter Cardsの設定！ツイートされた時、概要、アイキャッチを表示します">
<meta property="og:image" content="http://example.com/example.png">
<meta property="og:site_name" content="MILL KEY WEB">
<meta property="og:description" content="Twitterにブログ記事などがシェアされた時、アイキャッチ画像や概要が表示されることがあります。 これは、Twitterの「Twitter Cards」が、設定されているサイトに...">
<meta property="fb:app_id" content="000000000000000">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@millkeyweb">
<meta name="twitter:title" content="Twitter Cardsの設定！ツイートされた時、概要、アイキャッチを表示します">
<meta name="twitter:description" content="Twitterにブログ記事などがシェアされた時、アイキャッチ画像や概要が表示されることがあります。 これは、Twitterの「Twitter Cards」が、設定されているサイトに...">
<meta name="twitter:creator" content="@millkeyweb">
<meta name="twitter:image:src" content="http://example.com/example.png">
<meta name="twitter:domain" content="millkeyweb.com">
...

まとめたコード

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<!-- OGP -->
<meta property="article:publisher" content="https://www.facebook.com/millkeyweb">
<meta property="og:type" content="article">
<meta property="og:url" content="https://millkeyweb.com/">
<meta property="og:title" content="Twitter Cardsの設定！ツイートされた時、概要、アイキャッチを表示します">
<meta property="og:image" content="http://example.com/example.png">
<meta property="og:site_name" content="MILL KEY WEB">
<meta property="og:description" content="Twitterにブログ記事などがシェアされた時、アイキャッチ画像や概要が表示されることがあります。 これは、Twitterの「Twitter Cards」が、設定されているサイトに...">
<meta property="fb:app_id" content="000000000000000">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@millkeyweb">
<meta name="twitter:creator" content="@millkeyweb">
<meta name="twitter:domain" content="millkeyweb.com">

コードを3行も省略できました。OGPを設定している場合はまとめておくとよいでしょう。前述したWordpressへのコードはOGPを設定していたら、重複した部分をコメントアウトまたは削除しておけばいいでしょう。

以下のドキュメントの「Twitter Cards and Open Graph」も参照してみてください。

Getting Started with Cards | Twitter Developers

Twitterアナリティクが使えるようになる

Twitter Cardsを設定するとTwitterのアナリティクスが使えるようになります。今回はTwitter Cardsの設定方法とは少し内容がずれるので、少し触れるだけにしておきます。

Twitterアナリティクは多くのサードパーティのTwitter解析ツールとは違います。その違いは以下の点です。

多くのサードパーティの解析ツールは、このブログで紹介した「Buffer」やBufferに時間を設定できる「followerwonk」なんかがあたると思います。

このどちらもうまく使えばサイトをより良く改善できると思います。Twitterアナリティクスの使い方はまたの機会に書いてみたいと思います。

Twitter Card analytics

まとめ

Twitter Cardsはタイムラインでの表示をリッチにする
Twitter Cardsには、7種類の表示がある
7種類のCardにはそれぞれ必須のプロパティがある
画像は1MB未満に抑える
設定、確認、申請には「Card Validator」を使うといい
Twitter CardsはOGPをバックサポートするので省略して設定できる
Twitterアナリティクスが使えるようになる

あとがき

Twitter Cardsは設定したら承認してもらうのを忘れないようにしましょう。OGPとTwitter Cardsを簡単にWordpressに設定するなら、定番のプラグイン「All in One SEO Pack」を使うといいと思います。

プラグインを有効にしたら「All in One SEO」→「Feature Manager」で「Social Meta」を有効にしてください。すると「All in One SEO」に新たに項目が追加されるのでそこから設定が行えます。

全体的に画像が荒くてすいません。間違いや分かりづらい点があったらご指摘ください。修正させていただきます。

Twitter Cardsの設定！ツイートされた時、概要、アイキャッチを表示する方法

Twitter Cardsとは何か、

リッチ表示するTwitter Cardsの種類

Twitter Cards のプロパティ

Summary Cardのプロパティ

Twitter Cards の設定方法

Card Validator の使い方

WordPress への対応

Twitter Cards コードの確認をする

Twitter への申請

表示速度を上げるTwitter CardsとOGPの関係

Twitterアナリティクが使えるようになる

まとめ

あとがき

関連

関連記事

プロフィール

tadashi1105

認証済みサービス

フォローする

カテゴリー

タグ

Twitter Cardsとは何か、

リッチ表示するTwitter Cardsの種類

Twitter Cards のプロパティ

Summary Cardのプロパティ

Twitter Cards の設定方法

Card Validator の使い方

WordPress への対応

Twitter Cards コードの確認をする

Twitter への申請

表示速度を上げるTwitter CardsとOGPの関係

Twitterアナリティクが使えるようになる

まとめ

あとがき

記事を共有する

関連

関連記事

プロフィール

tadashi1105

認証済みサービス

フォローする

カテゴリー

タグ