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

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

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

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

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

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

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

Twitter Cardsとは何か、

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

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

Twitter Cardsのありとなしの違い

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

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

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

<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を参照してみてください。

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

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

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

「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を使うといいでしょう。

Summary Cardのプロパティ

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

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

Summary Card プロパティ

プロパティ

<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 Validatorの使い方

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

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

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

Card Validator の使い方

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

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

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

Summaryの選択

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

「Standard Tags」「Card Preview」「Sample Embed Code」

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

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

必須プロパティ

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

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

card Validatorに値を入れる

「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を設定する方法を紹介したのでその方法を参考にしてみてください。

例として以下のコードを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!」をクリックしましょう。

Card Validatorで確認

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

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

Twitter への申請

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

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

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

Cardの申請・承認

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

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

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

この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」も参照してみてください。

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

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

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

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

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

まとめ

  • 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」に新たに項目が追加されるのでそこから設定が行えます。

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