【Cocoon】Twitterカードの画像をフルに表示させる方法

Twitterカードの画像をフルに表示させる方法のアイキャッチブログ
ポン太
ポン太

あひるんさんってTwitterやってますよね?
Twitterで記事を紹介しようとしたら、画像がトリミングされちゃったんです。
アイキャッチ全体を表示させる方法を知ってないですか?

あひるん
あひるん

それね
僕も最近気になって調べて解決したから共有するよ
ポン太くんはCocoonを使ってるんだよね?

ポン太
ポン太

はい
お願いします!!

Twitterで記事を紹介しようとすると、こんな感じで画像が切れてしまいます。
せっかくアイキャッチを綺麗に作っても切れていてはアピールポイントが伝わりません

そこで今回はTwitterカードの画像をフルで表示させる方法を紹介します。
こんな感じでハッキリとアピールポイントが伝わるようになりました。

CocoonでTwitterカードを設定しよう

Cocoonでは簡単にTwitterカードの設定ができます。

まずは「Cocoon設定」の「OGP」タブを開いてください。

「Twitterカード設定」に「Twitterカードタイプ」という項目があるので、ラジオボタンを大きな画像のサマリーに変更しましょう。
Cocoonのデフォルト設定ではサマリーになっています。

あとは保存をして完了です。

Twitter公式のデバッグサイトがありますので、そちらで正常に更新されているかを確認しましょう。
Card URLに Twitterで表示させたい記事のURLを入れて、Preview cardのボタンを押すとデバッグができます。

https://cards-dev.twitter.com/validator

今日は以上です。
最後までお付き合いありがとうございました。

追記:うまくいかない場合

うまくいかない場合はCocoon設定からキャッシュを削除するとうまくいくかもしれません。

コメント

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