【Stinger5】効果抜群!Twitter Cardを設定して魅力的なTweetを流そう!

Twitterに単なる文字投稿ではなくブログ記事の概要(+写真)を配信できるTwitter Cardの登録方法と設定方法を紹介します。タイムラインを流れるたくさんのツィートの中でも目立つためTwitterからの流入増加が期待できます!

目立つことは正義!Twitter cardで目立つツィートをバンバン流そう!

14914042201_c6069830ac_bphoto by Tilo Motion

スポンサーリンク

TwitterCardとは

ブログを運営する人にとってSNSとの連携は必要不可欠です。たった一回の投稿で、爆発的な拡散を起こす可能性を秘めています。

SNSの代表格の1つであるTwitterは世界中に2億4000万人のアクティブユーザーと1日あたり5億回のツィートがあるといわれています。
日本でもユーザーは2000万人に達しています。

Twitterのタイムラインに自分の記事が配信されたら・・・・PVの増加に大きく貢献してくれます。

しかし、多くのユーザーが存在するがゆえにタイムラインには非常に多くのツィートが流れます。その中から自分の記事を選んでもらうには工夫が必要です。そこでTwitterCardが大きな役割を果たします。

まずはこちらのTweetをご覧ください。Jetpackを使って投稿時にTwitterへ配信したものです。
2014y12m01d_171718009
タイトルは表示されていますが、投稿文の中にあるURLをクリックしてリンク先のサイトへ移動しないと記事の内容を知ることはできません。よほど魅力的なタイトルでないとサイトへの訪問は期待できません。

次にこちらのTweetをご覧ください。TwitterCardを設定して配信したものです。先ほどと似ていますが右下に「概要を表示」という項目が出現しています。
2014y12m01d_171725393

それをクリックすると
2014y12m01d_171735091

このように投稿記事のタイトルとアイキャッチ画像、抜粋文が表示されます。

サイトまで移動しなくてもタイムライン上で記事の情報が大幅に増えたため、興味をもってもらう確立がぐっとあがります。興味がでれば記事まで訪問してくれる可能性が期待できます。

このようにTwitter Cardはtweetをより魅力的にしてくれます。

Twitter Cardの設定の手順

① OGP(open graph protocol)の設定をする

正しい情報を配信するためにはOGP(open graph protocol)の出力設定が必要です。Jetpackを使うと簡単に設定できます。こちらの記事を参考に設定してみてください。
<参照記事>【Stinger5】自動投稿で記事拡散に効果絶大!jetpackを使ったSNS連携

② twitter cardの設定をする

1.Cardの種類を選ぶ
2.Function.phpに必要なコードと情報を記載する
3.カードの申請をする

まずは、自分のTwitter アカウントにログインしておきます。

次にTwitter cardの公式サイトを開きます。

TwitterCardを選ぶ

下の方に移動するとカードタイプを選択する部分があります。

2014y12m05d_165027403のコピー

そこを選択するとカードのタイプと説明がでてきます。

2014y12m03d_175229267

Twitter Cardにはいくつかタイプがあります。少しずつ増えているので今後も増えるかもしれません。

Summary Card

一般的なデフォルトのカードです。タイトル、概要、サムネイル、Twitter アカウント情報などが入ります。

Large Image Summary Card

最近追加されたカードです。Summary Cardに近いですが、画像が大きく表示されるためより目立ちます。algorithm(アルゴリズム)ではこれを使っています。

Photo Card

写真投稿向けの向けカードです。画像だけが大きく表示されます。

Gallery Card

いくつもの写真をギャラリーのように表示するカードです。

App Card

アプリケーションの情報を表示したい時に使うカードです。モバイルアプリ(Twitter)でのみ表示されます。

Player Card

ビデオ、オーディオなどのメディアプレーヤーを表示するためのカードです

Product Card

製品情報を表示したい場合に最適なカード。ショッピングサイトとかなら、製品ページで使えばいい感じ。

一般的なブログの記事を配信したいのであれば、summary cardLarge Image summary cardになると思います。
Large Image summary cardの方が画像が大きく表示され目立つので、記事に画像やアイキャッチ画像を使っているのであればおすすめです。

Function.phpに必要なコードと情報を記載する

カード選びが終わったら、必要なコードを記載します。
カードによって必要なコードは違いますのでサイトを参考にします。

カード名をを選択すると右側に詳細がでます。どんなカードになるかの説明もあります。
2014y12m05d_162827274

2014y12m04d_120221478

下の方に行くとサンプルコードも出てきます。
2014y12m05d_162558906

この中の項目全てがいるわけではありません。カードによって必要なコードが違います。
さらに下の方に必要なコードが記載してあります。必須項目は「Yes」どちらでもいいものは「No」となっています。

2014y12m05d_162618100

Large Image Summary Cardを例にします

twitter:titleとtwitter:descriptionが必須項目となっています。この項目を含むようにコード記述します。

Stinger5のヘッダー(header.php)を開きます。その中で

</head>

を探します。 ※CtrlとFを押すと右上に検索Windowが出てきます。
その直前に次のコードを記述します。(※一例です)

<!--Twtter Cards-->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ツィッターアカウント">
<meta name="twitter:creator" content="@ツィッターアカウント">
<meta name="twitter:title" content="ツィッターのタイトル">
<meta name="twitter:description" content="ツィッターの紹介文">
<meta name="twitter:image:src" content="画像のURL">

ツィッターのタイトル、紹介文は自由に決めてください。twitter imageは無くてもいいですが、画像の無い記事をtweetした時に代わりに表示されます。こういう感じです。
2014y12m05d_175801581

設定したら保存してください。

Twitter cardの申請をする

Cards Validatorを選びます
2014y12m04d_121422507のコピー

自分のサイトのURLを入れて、Preview Cardをクリックします。
2014y12m04d_135800772

右側にPreviewでが出てきます。※Large Image Summary Cardは申請済みだったため画像はPhotoカード申請の時のものです。
2014y12m04d_140736016

まだカードを申請をしていないので、一番下に赤字でNot whitelistedとでます。※足りないコードがあるときもここに表示されます。

Request Approvalの表示が出るのでクリックすると申請画面に移ります。
2014y12m04d_140731893

確認をしたら申請終了です。
2014y12m04d_141100984

もし違うカードにするときは、headre.phpのカードタイプを変更してから同じような手順で申請をします。

申請が終わるのを首を長くして待つ

申請実行時には数日から30日くらいかかる的な表示がでますが、いままで5回ほど申請していずれも数十分で申請許可されました。しかし、いろいろな方のサイトをみると一週間や1ヶ月近くかかった方もいるようなのでばらつきがあるのかもしれません。申請が通るとこのようなメールが来ます。

2014y12m04d_142358598

申請が通ると勝手に表示されるようになりますので、気長にお待ちください。
※ちなみにTweet直後はすぐに「概要を表示」はでません。数分タイムラグがありますので、確認tweetした時などは注意してみてください。

まとめ

いかがでしたでしょうか?一度設定してしまえば、あなたの記事が魅力的なTweetとなって流れます。ぜひ設定してみてくださいね。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク