Webデザインやガジェット、格安SIMの情報ブログ

【備忘録】WordPressに「Twitter Cards」を設定してみる

当ブログもやっとTwitterカードを設定しました。今まで手をつけていなかったので、重い腰を上げて設定してみることにしました。

設定方法を今後の備忘録のためにまとめておきます。

スポンサードリンク

Twitter Cardsとは

去年の6月からTwitterが開始したサービスです。TwitterにブログなどのURLを投稿すると、タイムライン上にリンク先の詳細情報を表示してくれる機能のことです。FacebookのようにTwitterアカウント・タイトル・概要・サムネイルが表示されます。

web_summary_1
Twitter Cards
現在は公式のWeb版とmobile版のみしか対応していないようですが、Twitterの拡散を考えると設定して損はないはずです。

Twitter Cardsには解析機能もあり、URLクリック、アプリ・インストール・クリック、リツイート、を向上させるようアドバイスをもらえるらしいです。


設定方法

Facebookでシェアされたときの表示を指定する「OGP」を設定しているサイトであれば、以下の2行をogpと一緒に設定するだけで準備OKです。


<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@creatorclip">

上の「summary」というのはカードの種類です。カードは全部で7種類あります。

web_summary_1
Summary Card
web_summary_large2
Summary Card with Large Image
web_photo
Photo Card
web_gallery
Gallery Card
ios_app
App Card
web_player2
Player Card
web_product
Product Card
設置が完了したら、検証ツールを使ってチェックを行います。

Card Validator | Twitter Developers

2014-05-08_185259

使いたいカードの種類を選びます。当ブログはアイキャッチ画像を大きく見せたいので「Summary Large Image」を選択しました。

2014-05-08_190612

「Validate & Apply」のタブを選択し、URLを入力します。

twittercard

問題なく設定されていればこのような表示になると思います。黄色い背景部分の「Request Approval」ボタンを押して、Twitterカード申請を行います。

twittercard2

「Administrative Contact」はログインしたTwitterの情報が自動入力されます。

twittercard3

「Website Information」はウェブサイトの情報を登録します。

twittercard4

「Card Type Requested」と「Example URL」も自動で入力されました。

twittercard5

このようなメッセージが表示されたら完了です。

twittercard6

暫く待っていると、登録したメールアドレス宛に登録完了のメールが届くと思います。
実際にツイートをしてみて確認してみましょう。

ビフォー
twittercard7

アフター
twittercard8

ちゃんと反映されてますね!

気をつけるところ

「header.php」にmeta情報を入れてすぐに検証ツールで確認すると「コードが入っていません」とエラーが帰ってきました。暫く待つと問題なく反映されたので、少し間を空けてから確認するほうがいいかもしれません。

コードが間違えてないか無駄に何度も確認する羽目になりました。。

まとめ

FacebookのOGPに比べて申請が必要なので多少面倒ではありますが、これで多少なりTwitterからのアクセス流入数がいい方向に変化していけばいいなと思います。

参考記事

Twitterカード | Twitter Developers

[Å] Twittercardsをご存知!?登録申請/概要をツイートに表示させる方法 | あかめ女子のwebメモ

【超お手軽】WordPressにTwitter Cardを導入する3つの方法|ウェブシュフ

鹿
writer : 鹿
このブログを管理している鹿。Webデザインとガジェットが好き。
  • Feedly(RSS)で
    ブログを購読してみる
    購読する
  • Push7(プッシュ通知)で
    ブログを購読する
    購読する