ツイートした時にリンク先の概要や画像を表示する「Twitter Cards」の設定手順

Twitterを見ていると、たまにリンク先の概要やアイキャッチ画像がついたツイートを見かけますよね。こういうやつ↓

下の方に出てくる概要や画像がなぜ表示されるのかというと、Twitterアカウントに対してTwitter Cardsというものを設定しているからです。

今回は、このTwitter Cardsの設定手順について解説したいと思います。設定手順は、「カードタイプの選択」⇒「メタタグの追加」⇒「利用申請」という流れになっています。

ステップ1. カードタイプの選択

まずは、Twitter Cardsにアクセスし、「Four simple steps」の下にあるTry themというリンクをクリックします。

ログイン画面が表示されるので、Twitterアカウントにログインします。

ログイン後、表示させたいTwitter Cardsのカードタイプを選択します。

※今回はSummaryを選択します。

ステップ2. ヘッダーにメタタグを追加

カードタイプを選択したら、Card Validatorで必要な情報を入力していきます。

twitter:site – Twitterアカウント名を入力します。
twitter:title – リンク先のタイトルを入力します。
twitter:description – リンク先の概要を入力します。上限は200文字
twitter:creator – Twitterアカウント名を入力します。
twitter:image:src – 表示させる画像のURLを入力します。
twitter:domain – 概要や画像を表示させたいドメインを入力します。

Mobile App Integrationは省略してOKです。必要であれば入力してください。

また、Twitter CardsはOGPに対応しているので、OGPを設定している場合は被っている内容を省略してOKです。

必要な情報を入力したら、[Update Preview]をクリックし、Sample Embed Codeに表示されるメタタグをサイトのhead内に追加します。

この時、必要ない部分は省略できます。例えば、Mobile App Integrationを入力していない場合は、以下の記述だけでOKです。


&lt;meta name=&quot;twitter:card&quot; content=&quot;summary&quot;&gt;
&lt;meta name=&quot;twitter:site&quot; content=&quot;@site_username&quot;&gt;
&lt;meta name=&quot;twitter:title&quot; content=&quot;Top 10 Things Ever&quot;&gt;
&lt;meta name=&quot;twitter:description&quot; content=&quot;Up than 200 characters.&quot;&gt;
&lt;meta name=&quot;twitter:creator&quot; content=&quot;@creator_username&quot;&gt;
&lt;meta name=&quot;twitter:image:src&quot; content=&quot;http://placekitten.com/250/250&quot;&gt;
&lt;meta name=&quot;twitter:domain&quot; content=&quot;YourDomain.com&quot;&gt;

OGPを設定していて、被っている部分もいらないです。環境に合わせて、要らないものは省きましょう。

なお、選択するカードタイプによって、必要なメタタグは変わります。

Summary


&lt;meta name=&quot;twitter:card&quot; content=&quot;summary&quot;&gt;
&lt;meta name=&quot;twitter:site&quot; content=&quot;@nytimes&quot;&gt;
&lt;meta name=&quot;twitter:creator&quot; content=&quot;@SarahMaslinNir&quot;&gt;
&lt;meta name=&quot;twitter:title&quot; content=&quot;Parade of Fans for Houston’s Funeral&quot;&gt;
&lt;meta name=&quot;twitter:description&quot; content=&quot;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.&quot;&gt;
&lt;meta name=&quot;twitter:image&quot; content=&quot;http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-article.jpg&quot;&gt;

Summary Card with Large Image


&lt;meta name=&quot;twitter:card&quot; content=&quot;summary_large_image&quot;&gt;
&lt;meta name=&quot;twitter:site&quot; content=&quot;@nytimes&quot;&gt;
&lt;meta name=&quot;twitter:creator&quot; content=&quot;@SarahMaslinNir&quot;&gt;
&lt;meta name=&quot;twitter:title&quot; content=&quot;Parade of Fans for Houston’s Funeral&quot;&gt;
&lt;meta name=&quot;twitter:description&quot; content=&quot;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.&quot;&gt;
&lt;meta name=&quot;twitter:image:src&quot; content=&quot;http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg&quot;&gt;

Photo Card


&lt;meta name=&quot;twitter:card&quot; content=&quot;photo&quot;&gt;
&lt;meta name=&quot;twitter:site&quot; content=&quot;@examplephotosite&quot;&gt;
&lt;meta name=&quot;twitter:creator&quot; content=&quot;@sippey&quot;&gt;
&lt;meta name=&quot;twitter:title&quot; content=&quot;Good Morning, San Francisco&quot;&gt;
&lt;meta name=&quot;twitter:image&quot; content=&quot;http://example.com/photo/a/image.jpg&quot;&gt;
&lt;meta name=&quot;twitter:image:width&quot; content=&quot;610&quot;&gt;
&lt;meta name=&quot;twitter:image:height&quot; content=&quot;610&quot;&gt;

Gallery Card


&lt;meta name=&quot;twitter:card&quot; content=&quot;gallery&quot;&gt;
&lt;meta name=&quot;twitter:site&quot; content=&quot;@flickr&quot;&gt;
&lt;meta name=&quot;twitter:creator&quot; content=&quot;@hackweek&quot;&gt;
&lt;meta name=&quot;twitter:title&quot; content=&quot;Hack Week&quot;&gt;
&lt;meta name=&quot;twitter:description&quot; content=&quot;A look at Hack Week at Twitter HQ (@twoffice) and all of our offices around the world.&quot;&gt;
&lt;meta name=&quot;twitter:image0&quot; content=&quot;http://farm9.staticflickr.com/8236/8383176221_44f50afaba_b.jpg&quot;&gt;
&lt;meta name=&quot;twitter:image1&quot; content=&quot;http://farm9.staticflickr.com/8186/8393798794_3a3d27a621_c.jpg&quot;&gt;
&lt;meta name=&quot;twitter:image2&quot; content=&quot;http://farm9.staticflickr.com/8189/8384260164_511782a797_c.jpg&quot;&gt;
&lt;meta name=&quot;twitter:image3&quot; content=&quot;http://farm9.staticflickr.com/8188/8383177259_f927f13d81_b.jpg&quot;&gt;

App Card


&lt;meta name=&quot;twitter:card&quot; content=&quot;app&quot;&gt;
&lt;meta name=&quot;twitter:description&quot; content=&quot;The perfect for grabbing a nearby taxi. Try it by downloading today.&quot;&gt;
&lt;meta name=&quot;twitter:app:id:iphone&quot; content=&quot;306934135&quot;&gt;
&lt;meta name=&quot;twitter:app:url:iphone&quot; content=&quot;example://action/5149e249222f9e600a7540ef&quot;&gt;
&lt;meta name=&quot;twitter:app:name:ipad&quot; content=&quot;Example App&quot;&gt;
&lt;meta name=&quot;twitter:app:url:ipad&quot; content=&quot;example://action/5149e249222f9e600a7540ef&quot;&gt;
&lt;meta name=&quot;twitter:app:id:googleplay&quot; content=&quot;com.example.app&quot;&gt;
&lt;meta name=&quot;twitter:app:url:googleplay&quot; content=&quot;http://example.com/action/5149e249222f9e600a7540ef&quot;&gt;

App Installs and Deep-Linking


&lt;meta name=&quot;twitter:app:name:iphone&quot; content=&quot;Example App&quot;/&gt;
&lt;meta name=&quot;twitter:app:id:iphone&quot; content=&quot;306934135&quot;/&gt;
&lt;meta name=&quot;twitter:app:url:iphone&quot; content=&quot;example://action/5149e249222f9e600a7540ef&quot;/&gt;
&lt;meta name=&quot;twitter:app:name:ipad&quot; content=&quot;Example App&quot;/&gt;
&lt;meta name=&quot;twitter:app:id:ipad&quot; content=&quot;306934135&quot;/&gt;
&lt;meta name=&quot;twitter:app:url:ipad&quot; content=&quot;example://action/5149e249222f9e600a7540ef&quot;/&gt;
&lt;meta name=&quot;twitter:app:name:googleplay&quot; content=&quot;Example App&quot;/&gt;
&lt;meta name=&quot;twitter:app:id:googleplay&quot; content=&quot;com.example.app&quot;/&gt;
&lt;meta name=&quot;twitter:app:url:googleplay&quot; content=&quot;http://example.com/action/5149e249222f9e600a7540ef&quot;/&gt;

Player Card


&lt;meta name=&quot;twitter:card&quot; content=&quot;player&quot;&gt;
&lt;meta name=&quot;twitter:site&quot; content=&quot;@examplevideosite&quot;&gt;
&lt;meta name=&quot;twitter:title&quot; content=&quot;Example Video&quot;&gt;
&lt;meta name=&quot;twitter:description&quot; content=&quot;This is a sample video from example.com&quot;&gt;
&lt;meta name=&quot;twitter:image&quot; content=&quot;https://example.com/keyframe/a.jpg&quot;&gt;
&lt;meta name=&quot;twitter:player&quot; content=&quot;https://example.com/embed/a&quot;&gt;
&lt;meta name=&quot;twitter:player:width&quot; content=&quot;435&quot;&gt;
&lt;meta name=&quot;twitter:player:height&quot; content=&quot;251&quot;&gt;

Product Card


&lt;meta name=&quot;twitter:card&quot; content=&quot;product&quot;&gt;
&lt;meta name=&quot;twitter:site&quot; content=&quot;@twitter&quot;&gt;
&lt;meta name=&quot;twitter:creator&quot; content=&quot;@twitter&quot;&gt;
&lt;meta name=&quot;twitter:title&quot; content=&quot;Logo Mug&quot;&gt;
&lt;meta name=&quot;twitter:description&quot; content=&quot;The perfect pick-me-up. Enjoy your favorite blend with this coffee mug featuring the Twitter logo. Make every work day good to the last drop.&quot;&gt;
&lt;meta name=&quot;twitter:image&quot; content=&quot;https://twitter.siglercompanies.com/graphics/00000001/mug-new.jpg&quot;&gt;
&lt;meta name=&quot;twitter:data1&quot; content=&quot;$3&quot;&gt;
&lt;meta name=&quot;twitter:label1&quot; content=&quot;Price&quot;&gt;
&lt;meta name=&quot;twitter:data2&quot; content=&quot;Black&quot;&gt;
&lt;meta name=&quot;twitter:label2&quot; content=&quot;Color&quot;&gt;

ステップ3. プレビューの確認と利用申請

headへの追加が完了したら、Card Validatorの画面に戻って、[Validate & Apply]タブにアクセスします。

フォームに設定したサイトのURLを入力して、[Go!]をクリックします。ブログだったら、記事の中から適当なものを選んで入力しましょう。

正常に情報を取得できたら、Card Previewにプレビューが表示されます。

プレビューがちゃんと表示されたら、URLの下に表示される[Request Approval]をクリックします。

必要な情報を入力して、[Request Approval]をクリックするとTwitter Cardsの利用申請が送信されます。

利用申請をすると、まもなく「Your Twitter card is ready!」というメールが届いて、Twitter Cardsの利用が可能となります。

あとがき

文字で見ると複雑そうに思えるかもしれませんが、実際にやってみると非常に簡単です。リンク先の概要や画像を表示させ、他と差をつけることであなたのアカウントを目立たせましょう。