【2020年版・Cocoonを使ってる方向け】TwitterのOGPカードを設定する方法と、表示されないときの対処方法

TwitterのOGPカードを設定する方法と、表示されないときの対処方法 ブログ

この記事を読めば、TwitterのOGP設定方法と、設定した後表示されないときどうしたらいいか分かるよ。

ブログのOGP画像(SNSでシェアした時に表示されるサムネイル画像)を設定するだけで、Twitterで公開した時のクリック率が変わります。

少しデザインがしょぼいのですが、正しく設定すると、Twitterでは下のツイートのように表示されます。

この記事ではOGP画像の設定方法と表示されないときの対処方法を紹介します。

スポンサーリンク

OGP画像の設定方法

1.Cocoon設定をクリック

2.Cocoon設定の中からOGPをクリック↓

3.一番下のホームイメージで画像をアップロードして、変更をまとめて保存をクリック↓

これでCocoonでのOGP画像の設定は完了です!


一度 新規ツイート画面に自分のブログのURLを入力してみて、自分が設定したいOGP画像が表示されているか確認してみてください。


うまく表示されていないという方は下に対処方法を書いておきます

OGP画像が正しく表示されない場合の対処方法

僕自身、何度かブログのOGP画像を変更しているのですが上の設定だけでうまく表示されたことはありません。


そんなときの対処方法はCocoonでの操作と、TwitterDevelopersのCard validatorの操作が必要になります。


二つ目のCard validatorって何?という方も安心してください。


下にリンクを貼って、使い方を書きます。

①Cocoon側での操作

1.ワードプレスの設定画面に入り、Cocoon設定の卵のアイコンにカーソルを乗せる

2.キャッシュ削除をクリック↓

Cocoonキャッシュ削除

3.ブログカードキャッシュの削除をクリック↓

ブログカードキャッシュの削除

これでもまだOGP画像が表示されないこともあります。


まだ表示されないという方は次の項目を読んでみてください。

Card validatorでの操作

1.まずはTwitterDevelopersのCard validatorにアクセスする
こちらをクリック→ Card validator

2.Card URLの下の入力欄に、自分のブログのホーム画面のアドレス(http://自分のドメイン/のように)を入力し、Preview cardをクリック↓

TwitterDevelopersのCard validator

下の画像のように自分の表示したいOGP画像が出てきたら設定は完了です。↓


試しに新規ツイート画面に自分のブログのURLを入力してみましょう。

全ての設定がうまくいっていれば下の画像のように、設定したOPG画像が表示されます。↓

これでTwitterのOGP画像設定は完了です!

ぜひOGP画像を変更するときは参考にしてみてくださいね!

コメント

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