Twitterカードの使い方「ツイートにアイキャッチを表示させる方法」

今日もつぶやいてますか？わたしは、1日平均7.4回ツイートしています。

こんにちわ。ITが苦手な会社をITが活用できる会社に変える専門家、Web集客先生のやまもと（＠heronokenta）です。

Twitter関連の記事が続いています。「Twitterで毎日呟いているならTwilogで足跡を確認してもいいんじゃないかな」「Twitterアナリティクスの使い方を調べてみたら、思いのほか使えそうだった件」と2日連続。そして、今日もTwitter関連の記事を投稿します。

今日は、Twitterアナリティクスを調べていたはじめって知った「Twitterカード」についてシェアしていきます。

Twtterカードって一体なに？

[voice type="l" name="カツヨ" icon="https://marketinghero.jp/wp-content/uploads/2015/11/ka24_smile.png"]最近、Twitter関連の記事が続いてるわね〜。つまり、Twitterってまだまだ終わってない事よね。[/voice]

[voice type="r" name="やまもと" icon="https://marketinghero.jp/wp-content/uploads/2015/11/yamamoto-smile2.jpg"]そうだね。Twitterはまだまだ使われ続けていくよ。TwitterはFacebookと違って匿名でOKだから、比較的ツイートしやすいんだよね。ま、匿名だと思っていてもバレバレだけどね。[/voice]

[voice type="l" name="カツヨ" icon="https://marketinghero.jp/wp-content/uploads/2015/11/ka24_front.png"]そうよね〜、個人情報なんてどこからでも漏れていくからね。Facebook、Twitter、InstagramといったSNSを使うなら、個人情報が漏れている前提で使うのが基本って事ね。[/voice]

[voice type="r" name="やまもと" icon="https://marketinghero.jp/wp-content/uploads/2015/11/yamamoto-smile2.jpg"]で、今日はTwitterカードについてシェアするんだけど、カツヨさんはTwitterカードって分かる？[/voice]

[voice type="l" name="カツヨ" icon="https://marketinghero.jp/wp-content/uploads/2015/11/ka24_iraira.png"]知らないわよ。Twitterカードって一体何なのよ？[/voice]

[voice type="r" name="やまもと" icon="https://marketinghero.jp/wp-content/uploads/2015/11/yamamoto-smile2.jpg"]Facebookに投稿した時、ちゃんとアイキャッチが表示されるのに、Twitterに投稿するとアイキャッチが表示されたり、記事の中の写真やイラストが表示されることがあるんだ。でも、Twitterカードを使えば、Facebookみたいにアイキャッチを表示させることが出来るようになるんだよ。[/voice]

はじめてのTwitterカード

Twitterカードというのは、Twitterでツイートするときにサムネイルや写真、動画などを表示させることが出来るTwitterの機能だ。

こんなイメージ

アイキャッチ・写真・動画の他に、記事のタイトル、記事の本文、ブログのURL等が自動的に差し込まれる。

通常の文字だけのツイートより、目につきやすくクリック、リツイートされやすくなるのが売りだ。

どっちが、目を引いてくクリックされやすいかは一目瞭然だ。

現在、Twitterカードは全部で7種類提供されている。

[su_note note_color="#bccffd" radius="0"][colwrap] [col2]Summaryカード（サマリーカード）

[/col2] [col2]

デフォルトのカードで、タイトル、説明、サムネイル、Twitterアカウントの属性が含まれている。

https://dev.twitter.com/cards/types/summary[/col2] [/colwrap][/su_note]

[colwrap] [col2]大きな画像付きのSummaryカード

[/col2] [col2]

Summaryカードに似ているが、画像が目立つように表示される

https://dev.twitter.com/cards/types/summary-large-image[/col2] [/colwrap]

[su_note note_color="#bccffd" radius="0"][colwrap] [col2]Photoカード

[/col2] [col2]

画像が優先して表示される。画像をクリックするとツイート内容が表示される。

https://dev.twitter.com/cards/types/photo

[/col2] [/colwrap][/su_note]

[colwrap] [col2]Galleryカード

[/col2] [col2]

一度に最大4つの写真を表示させることが出来る。

https://dev.twitter.com/cards/types/gallery[/col2] [/colwrap]

[su_note note_color="#bccffd" radius="0"][colwrap] [col2]Appカード

[/col2] [col2]

モバイルアプリの詳細を含めて直接ダウンロードできるようにしたカード

https://dev.twitter.com/cards/types/app[/col2] [/colwrap][/su_note]

[colwrap] [col2]Playerカード

[/col2] [col2]

動画やオーディオ、スライドショーを視聴できるカード

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/player-card[/col2] [/colwrap]

[su_note note_color="#bccffd" radius="0"][colwrap] [col2]Productカード

[/col2] [col2]

製品情報のために最適化したカード

https://dev.twitter.com/cards/types/product[/col2] [/colwrap][/su_note]

[voice type="l" name="カツヨ" icon="https://marketinghero.jp/wp-content/uploads/2015/11/ka24_scandalous.png"]へ〜〜〜、色々カードがあるのね。ちゃんと、用途に分けて使わないとダメって事ね。[/voice]

Twitterカードを使うための設定方法

[voice type="r" name="やまもと" icon="https://marketinghero.jp/wp-content/uploads/2015/11/yamamoto-smile2.jpg"]そういうこと。で、このTwitterカードを使う為には、ブログに設定が必要なんだよ。ここから先は、Twitterカードを使うまでの流れを見ていくよ[/voice]

まずは、Twitterアナリティクスの「詳細」⇒「Twitterカード」へ行き、リンクをクリックする。

[btn class="big lightning"]Twitterカードアナリティクスの設定[/btn]

リンク先には、Twitterカードアナリティクスの設定方法が書かれている。

[su_note note_color="#bcdefd" radius="0"]

Twitterカードを作成する
Twitterカードの有効性を検証する
コンテンツへのリンクをツイートする

[/su_note]

1．実装するカードタイプを決める

TwitterカードはTwitter単体では動かない。ツイート元のブログに「twitter:card」タグを埋め込む必要がある。その為には、ブログのWordPressに少し手を加える必要がある。

因みに、Summaryカードを使いたい場合は、次の様なタグが必要だ。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
<meta name="twitter:url" content="https://www.flickr.com/photos/unicphoto/sets/72157645001703785/" />

タグはテーマをカスタマイズすれが差し込むことはできるが面倒だ。そこでプラグインを利用する。今回は、「All in One SEO Pack」を使うことにする。