No fun, No business. 楽しくなければ、ビジネスじゃない。

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

    
\ この記事を共有 /
Twitterカードの使い方「ツイートにアイキャッチを表示させる方法」

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

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

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

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

スポンサーリンク

Twtterカードって一体なに?

最近、Twitter関連の記事が続いてるわね〜。つまり、Twitterってまだまだ終わってない事よね。

カツヨ

そうだね。Twitterはまだまだ使われ続けていくよ。TwitterはFacebookと違って匿名でOKだから、比較的ツイートしやすいんだよね。ま、匿名だと思っていてもバレバレだけどね。

やまもと

そうよね〜、個人情報なんてどこからでも漏れていくからね。Facebook、Twitter、InstagramといったSNSを使うなら、個人情報が漏れている前提で使うのが基本って事ね。

カツヨ

で、今日はTwitterカードについてシェアするんだけど、カツヨさんはTwitterカードって分かる?

やまもと

知らないわよ。Twitterカードって一体何なのよ?

カツヨ

Facebookに投稿した時、ちゃんとアイキャッチが表示されるのに、Twitterに投稿するとアイキャッチが表示されたり、記事の中の写真やイラストが表示されることがあるんだ。でも、Twitterカードを使えば、Facebookみたいにアイキャッチを表示させることが出来るようになるんだよ。

やまもと

はじめてのTwitterカード

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

twitter_card_01

こんなイメージ

 

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

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

twitter_card_02

 

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

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

Summaryカード(サマリーカード)

twitter_card_03

 

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

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

 

大きな画像付きのSummaryカード

twitter_card_04

 

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

https://dev.twitter.com/cards/types/summary-large-image

 

Photoカード

twitter_card_05

 

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

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

 

Galleryカード

twitter_card_06

 

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

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

 

Appカード

twitter_card_07

 

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

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

 

Playerカード

twitter_card_08

 

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

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

 

Productカード

twitter_card_09

 

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

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

 

へ〜〜〜、色々カードがあるのね。ちゃんと、用途に分けて使わないとダメって事ね。

カツヨ

 

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

そういうこと。で、このTwitterカードを使う為には、ブログに設定が必要なんだよ。ここから先は、Twitterカードを使うまでの流れを見ていくよ

やまもと

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

twitter_card_10

 

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

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

 

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」を使うことにする。

 

2.All in One SEO PackでTwitterカードの設定をする

All in One SEO PackはWordPressを使っている人なら一度は聞いたことがあるだろう。SEOに特化した様々な設定を行うことが出来る。まだ、インストールしていない人は、これを機会に使ってみることをお勧めする。

では、WordPressの管理画面のAll in One SEOFeature ManagerからSocial MetaActiveをクリック(既に有効になっている場合は、ここは飛ばす)

twitter_card_10

 

twitter_card_11

アクティブな状態

 

Social Metaを開き、Ceneral SettingsのAutogenerate OG Descriptionにチェックを入れる。

twitter_card_12

 

Image SettingsSelect OG:Image Sourceアイキャッチ画像にする。

twitter_card_13

 

Twitter Settingsを設定する

twitter_card_14

 

  • Default Twitter Card:Summary と Summary Large Imageから選ぶ
  • Twitter Site:Twitterアカウント(@付き)
  • Show Twitter Author:チェックを入れとく
  • Twitter Domein:ブログのURL(http:// なし)

 

Summaryカード

twitter_card_15

大きな画像付きのSummaryカード

twitter_card_16

 

設定が完了したら、設定を更新をクリックして保存する。

twitter_card_17

 

Social Metaをアクティブにすると、投稿画面のAll in One SEO PackにSocial Settingsが表示されるようになる。

twitter_card_21

 

3.Twitterタグが正しく出力されているか検証する

All in One SEO Packで正しく設定が出来ているか確認するために、Card validatorで検証をする。

twitter_card_18

 

 

検証したい記事のURLをCard URLに貼り付けて、Preview Cardをクリックする

twitter_card_20

 

数秒で結果が表示される。

twitter_card_19

 

Preview cardの下に「ドメイン is whitelisted for Twitterカードタイプ」と表示されていればOKだ。

 

4.記事のURLをツイートしてみよう

ひとまずは、TwitterカードがTwitterで表示されているか確認しておこう。

残念ながら、Twitterカードを利用できるようにして24時間以上たったが、いまだTwitterアナリティクスでTwitterカードの分析画面には何も表示されていない。

今回は最後までできずに不本意ではあるが、ここまでだ。Twiiterカードの関して、事態が変わればこちらの記事を追記する。

 

5.Twitterカードアナリティクスを確認する

今回、わたしの環境ではTwitterカードアナリティクスにデータが表示されるまで約2日間かかった。直ぐに表示されなくても、気長に待っていれば表示される。

「Twitterアナリティクス」→「詳細」→Twitterカードをクリック

twitter_card_22

 

スナップショット

ぱっと見た印象でどれだけツイートされて、クリックされたかが分かる

twitter_card_23

 

時系列変化

時間の経過とともに、インプレッション、クリック数がどう変化していったかが分かる。

twitter_card_24

 

ちょっと~~、やまもと~!!ちゃんと、最後まで解説しなさいよね!!!!

カツヨ

やまもとの視点

申請しなくても使えるようになっていたTwitterカード。All in One SEO Packを使っている人は、わたしのように2日も待たなくてもTwitterカードアナリティクスが表示されているかもしれない。

Googleアナリティクスや、Twitterアナリティクスという解析ツールで色々なデータが観られる様になってきているが、そのデータをどう活かすかが、頭の使いどころだ。

数値をみて、仮説を立てて、修正できる様になれば、ブログもTwitterも怖いものなしだ。

Twitterカードの申請方法がさっぱりわからない・・・。グーグル先生に聞きまくっても、分からなかった。もしかしたら、申請はいらなくなっているのかという期待もあるが、結果からみるとTwitterアナリティクスでTwitterカードの分析はできていない。

何が情報を持っている人がいれば、是非、教えてほしい。

 

 

Copyright©マーケティング・ヒーロー ケンタ,2024All Rights Reserved.