【cocoon】TwitterでブログトップページのTwitterカード画像を表示させたい

wordpress
Pocket

ママアイコン
ママアイコン

こんにちは!ハルママです。

\この記事はこんな悩みを解決します/

・Twitterカードの設定の仕方がわからない
・TwitterにブログのトップページURLを貼り付けたらデフォルト画像になる

Twitter投稿画面で
ブログのURLを入れると画像が出てきます。
これをTwitterカードと言います。



ブログ内の記事を紹介するときは、
ブログ記事のURLを入れるとアイキャッチの画像が反映されます。


ブログトップページのアイキャッチ画像は、設定をしないと
下記の様なデフォルトの画像が出てきます。


筆者がなぜTwitterカードを表示させたかったかというと、


フォロワーさんの被リンク企画に参加しようとした際に
ブログのトップページURLを入力したら
デフォルト画像になっていたためです。


デフォルトの画像だと、
クリックしてブログサイトまで飛ばないと
どんなブログなのかイメージが沸きません。


でも、デフォルト画像を見て
わざわざリンクを踏む方は
少ないと思います。


これだと投稿を見た第三者の方にも
アピールできないなと感じました。


  1. ブログのイメージを見せる
  2. どんなブログか気になる。。
  3. ブログ見てみよう
  4. リンクに飛ぶ
  5. ブログを読んでくれる


こうなってくれるといいですよね。


ブログトップページURLのTwitterカードは
ブログの管理画面でオンオフの設定が必要になります。



それでは、Twitterカードの設定をしていきましょう。

Twitterカードの設定の仕方

cocoon設定 → OGPを選択します。


下にスクロールするとTwitterカードの設定があります。


Twitterカードの有効化→Twitterカードタグの挿入にチェックを入れます。

さらに下にスクロールすると、
Twitterカードタイプの選択画面があります。



Twitterカードタイプはどちらでもいいのですが、
大きな画像のサマリーが見やすいのでおすすめです。


今回はこの大きな画像のサマリーにチェックを入れます。

下にスクロールすると、ホームイメージ→画像のアップロードがあります。


選択をクリックすると、ワードプレス内に登録している画像が出てきます。
トップページに表示させたい画像を選択。


筆者はブログトップページのヘッダー画像を選択しました。

変更をまとめて保存をクリックして設定は完了です。


Twitterカードが反映されているか確認する方法

保存してから数分は変更が反映されません


筆者も変更をしてからすぐにTwitterの投稿画面でURLを入力してみましたが、
反映されていませんでした。


数分待っても変更が反映されない場合は、
ブラウザのキャッシュを消してみてください。


それでも反映されない場合は、
Twitterカードが反映されているか確認できるサイトがあります。
こちらで確認してみてください。

Card URLのところにブログのURLを入力して
Preview cardをクリックします。


右側に設定したTwitterカードが表示されていれば
Twitter上でも反映されています。


実際にTwitterの投稿画面でURLを入力すると
ちゃんと表示されました。

まとめ

ブログのトップページのイメージをTwitter上で見せれると
自分のブログのアピールにもなります。

ぜひ、活用してみてくださいね。


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