【簡単】TwitterカードをCocoonで表示させる方法

雑記

Twitterにブログ記事を載せたのはいいけど、アイキャッチに全く繋がらないなぁ…。読者さんの目に留まりやすくするにはどうすればいいんだろか?

このような悩みを抱えている方、お助けします。

Twitterカードってなんぞや?って方もいらっしゃると思うので、簡単に説明しますね。Twitterカードとは、下の画像を見ていただければわかります。

赤枠で囲っているのがTwitterカードですね。こちらの設定をブログ内で行なっていなければ、ブログURLのみがツイートされてしまいます。

この記事を読むことにより

・Twitterカードを表示させれるようになる→アイキャッチ効果で多くの人にブログを読んでいただく機会が増える
・あなたのブログにTwitter経由で興味を示していただいたら、フォローしてもらえる
では、さっそくいってみましょうか。

TwitterカードをCocoonで表示させる方法

やることは至ってシンプルです。【Cocoon設定】と【TwitterのCardvalidator】を少しイジるだけです。

 

Cocoon側の設定

①【Cocoon 設定】をクリック。

②Cocoon 設置のタグ一覧から【OGP】をクリック。

 

【OGP設定】が開ましたら、OGPの有効化に注目してください。

特に設定をイジってなければ最初から赤枠にチェックが付いています。こちらにチェックが付いていないとTwitterカードが表示されなくなります。

 

OGPの有効化設定が終わりましたら、次にTwitterカード設定をしていきましょう。

Twitterカードの有効化

こちらにもチェックを入れておきましょう。カードが表示されなくなりますので。

Twitterカードタイプ

  • サマリー(summary)
  • 大きな画像のサマリー(summary_large_image)

ここでカードの大きさを決めることができます。お好みでいいですが、インパクトは欲しいので、僕は『大きな画像のサマリー』で設定しています。

 

画像のアップロード

記事内にアイキャッチ画像を設定していたら、その画像がTwitterカードとして表示されます。こんな感じです。

自身のブログホームをTwitterカードを通して表示したい場合は、Cocoonの画像になっているので、変更する必要があります。そこで、画像のアップロードを利用するわけです。【選択】を押して、設定したい画像を選ぶだけです。

 

Twitter Card Validatorで確認

Cocoonの設定が全て完了したら、Twitter Card Validatorでアップロードした画像が反映されているのか確認を行います。

 

赤枠で囲っているところにあなたのブログURLを入力して、右側にアップロードした画像が反映されていれば問題ないです。

これで全ての作業は終了です。あなたの記事をTwitter内にどんどんアピールしていきましょう。

 

まとめ

実際にTwitterカードを導入することにより、ツイートに対してのクリック数が上がった実例があるみたいです。

Itworksの実験結果によると、クリック率はカード設定前と後で、1.6% ⇒ 3%へと向上したそうです。さらにサイト滞在時間は伸び、直帰率が低下するという効果まであったとのこと。

引用元:サルワカ「Twitterカードの効果」

上がった実例があるならば導入しておいて損はないですね!

 

今回はこの辺で〜。

コメント

タイトルとURLをコピーしました