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

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

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

Twitter Cardsとは

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

現在は公式の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種類あります。

設置が完了したら、検証ツールを使ってチェックを行います。

Card Validator | Twitter Developers

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

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

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

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

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

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

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

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

ビフォー

アフター

RBCおきなわ健康長寿プロジェクト「歩くーぽん」を試してみる | Creator Clip http://t.co/oecksa8STx #歩くーぽん

— creatorclip (@creatorclip) 2014, 5月 7

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

気をつけるところ

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

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

まとめ

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

参考記事

Twitterカード | Twitter Developers

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

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