Twitter Cardの設定方法に至るまでのメモ

   

lockupsブログから、Twitterへの自動投稿を可能にしたのち、自分のツイートから正しく投稿されているのを確認したのですがただのURLでの投稿になってます。これじゃないな、、、と思って調べていたら、Twitter Card なるものがあることが分かったので設定しました。

いままで何も気にしてなかったのですが、ニュースサイトなどをつぶやいた際には確かに画像がでてますね。あれですね。いちいち記事毎に画像を設定しなければならないってのが面倒な様です。

こういうやつですね。文章とURLだけじゃなく、画像が表示されたりする、すこしリッチな感じのものです。

Twitter Card導入前の事前知識

https://dev.twitter.com/ja/cards/overview

概要

Twitterカードを使用すると、写真や動画などのリッチメディアをツイートに添付してウェブサイトへのトラフィックを促進できます。ウェブページに数行のHTMLを追加するだけで、そのコンテンツへのリンクが含まれるツイートにカードが追加されるようになり、そのツイートを投稿したユーザーのすべてのフォロワーにカードが表示されます。

ということで、つぶやきのURLに添付する形で、誘導するための手段の様です。どうりでみんながやってるわけだw

 

ツイートからのエンゲージメントの促進

以下のカードタイプは、Twitterのウェブクライアントおよびモバイルクライアント用にデザインされた素晴らしいユーザーエクスペリエンスを提供します。

  • Summaryカード: デフォルトのカードで、タイトル、説明、サムネイル、Twitterアカウントの属性が含まれています。
  • 大きな画像付きのSummaryカード: Summaryカードに似ていますが、画像が目立つように使用されています。
  • Photoカード: 写真のみを含めたカードです。
  • Galleryカード: 4つの写真を集めて強調したカードです。
  • Appカード: モバイルアプリの詳細を含めて直接ダウンロードできるようにしたカードです。
  • Playerカード: 動画やオーディオ、スライドショーを視聴できるカードです。
  • Productカード: 製品情報のために最適化したカードです。

カードのメタタグおよびTwitterのウェブクローラの仕組みについては、「スタートガイド」をご覧ください。

とまぁ、デベロッパー公式ではいくつか種類が分けられているらしい(2016年2月現在、7種類)特にProductカードなどは、製品情報などで使えるので、便利ですね。企業向けに商品情報を広く広める企業などには、こういった知識をもって促進してあげると良いと思われます。

これがProductカード、つぶやき以外にも、ラベルなどが貼れるようです。

 

カードの効果の測定

Twitterカードのプラットフォームを補完するために、アナリティクスはリンクのクリック、アプリのインストールトライ、リツイートなどの重要な指標を向上させる方法を示してくれます。

Twitterカードアナリティクスを使用したTwitterのパフォーマンス測定に関する詳細は、こちらをクリックしてください。

Twitterカードアナリティクスというものがあるようですが、とりあえずまだ未導入なのでスルーします

簡単な5つの手順で始める

早速カードを使ってみましょう。ほとんどの場合、カードの実装には15分もかかりません。

  1. 実装するカードタイプを選択
  2. 適切なメタタグをページに追加
  3. 検証ツールでURLを実行して申請
  4. 承認を受けたら、URLをツイートしてツイートの下に表示されるカードを確認
  5. Twitterカードアナリティクスを使用して効果を測定

Twitterカードの使用についてご質問がある場合は、Twitterカードに関するフォーラムに投稿してください。よろしくお願いいたします。

とまぁ、15分もかからないと公式が言い切っているので、簡単でした。

 

OGPについて、概略

OGP(Open Graph Protocol)の略です。Facebook,Google+,Twitter,mixi,Greeなどで利用されているSNSの共通の機能の様なモノですね。詳しい詳細については本家のウェブサイトをご覧ください。

The Open Graph protocol

と、まぁ、面倒な感じに見えますが、要するにHTMLのHEAD要素に、METAタグで要素を追加してあげれば良いということです。基本的には全部のウェブサイトで共通化されたものを固定で掲載するのが一般的なのですが、せっかくWordpressを導入したのですから、各記事のアイキャッチをOGPとして組み込んで行く流れにしました。といってもテストなので主要なFacebook,Twitterのみに対応させたOGP設置の方法です。

FacebookのOGP設定を先にする

参考にしたサイト

ということで、上記3サイトを閲覧した結果、Facebookはhead.phpに直接書き込み、Twitterは、Twitter Card Meta というプラグインを導入して終わりでした

Twitter Card Meta

WordPressの各記事のMETA要素に、Twitter Card 要素を追加するというプラグインです

Twitter Card METAのウェブサイト

主な注意事項

色々な記事を見ると、Twitter Cardの導入の際には、Twitterが審査をして1.5時間ぐらいで承認されるという記事を見るのですがどう頑張ってもここにたどり着かない。2016年2月現在、推測だが審査はやったり、やってなかったりなんじゃないかな、、という気がしてます。たぶん、ASPのブログなどに導入される場合はサブドメイン毎にホワイトリスト、ブラックリスト的な切り分けをしているのじゃないかな、、、

なぜならば、

*.fox.konta.ws is whitelisted for summary card

って表示されたからです。

20160226

うまく行くと、Card validator でこんな感じで表示されました。

 

アナタにオススメの記事はコチラ!

 - Twitter