お買い物マラソン開催中!9/24 01:59まで楽天市場
カスタマイズ

Twitterにサイト画像を表示するには?CocoonのOGP設定/反映されないときの対処法

アイキャッチ/OGPカスタマイズ
スポンサーリンク

普段、何気なくTwitterを見ているときに気になったことがひとつ。

ブログのURLを入れてツイート(ポスト)したときに表示される画像がCocoonのデフォルトのままだなぁ…

特定の記事をシェアしたときにはその記事に設定したアイキャッチ画像が出るのに、サイトのURLをシェアするとデフォルトCocoonのままになっています。

cocoon

この画像のままの人がたくさん!もったいないよ~。

せっかく自分のサイトをアピールできるチャンスなので、みんな同じのデフォルトよりイメージを伝えられるような画像があったほうがよいですね。

今回はSNSでシェアしたときに任意の画像を表示する方法(OGP)反映されないときの対処法についてご紹介します。

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでフルカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー32
  • ワードプレスで2サイトを運営しています
はっちゃん
です
プロフィール

OGPについて

OGPとは?
「Open Graph Protocol」の略。TwitterなどのSNSでwebページやブログの記事がシェアされた時に画像を表示させる仕組みのこと。

OGP画像の適切なサイズ

OGP画像はアイキャッチ画像と同様に

横1200×縦630px

がベストと言われています。

SNSでシェアしたとき正方形に切り取られることがあるので、見せたい部分は真ん中に配置するなどした方が良いかもしれません。

当サイトは軽量化のため画像を800px x 450pxと小さめにしてさらに圧縮をかけていますが問題なく表示されています。

設定するOGP画像

  1. サイトのメイン画像
    • OGP設定が必要(今回設定するところ)
  2. 個別記事の画像
    • 自動的にアイキャッチがOGP画像として反映される

2か所の画像がありますが、まずはサイトのメイン画像を設定する方法について。

サイトのメイン画像を設定する方法

  • STEP1
    サイト画像を準備する

    任意の画像を準備します。私はお気に入りのCanvaで作成しました。

  • STEP2
    OGP設定

    Cocoon設定のOGPに画像を指定します。

  • STEP3
    キャッシュの削除

    反映されない場合、TwitterとCocoonの両方のキャッシュを削除します。

  • STEP4
    しばらく待ってから確認する

設定する箇所はCocoonの「OGP」

1.Cocoon設定 → OGP のタブを選択します。

ogp

2.ホームイメージ

下の方にホームイメージの項目があるので選択をクリックして任意の画像をアップロードして設定します。最後に保存するボタンを忘れずにクリック。

ogp

設定はこれで完了です。

ですがすぐには反映されないことがあります。

Cocoon/OGP設定が反映されない場合の対処法

この設定をおこなってもすぐに反映されない場合はキャッシュが影響していると考えられるので削除します。

Cocoonのキャッシュを削除

Cocoon設定 → キャッシュ削除 → SNSキャッシュを削除します。

ogp

Twitterのキャッシュを削除

合わせてTwitterのキャッシュも削除します。

ogp

しばらく待つ

キャッシュを削除してもすぐには反映されないので、ここまでの設定が終わったらしばらく待つといつの間にか反映されている感じになるかと思います。

私の場合は1時間後に確認したら反映されていました。

ここまでがサイトのメイン画像の設定方法と反映されないときの対処法となります。

個別記事のアイキャッチ画像を変更したとき

個別記事を投稿する場合にはアイキャッチ画像を登録しておけば自動的にOGP画像として反映されます。

ところが後からアイキャッチ画像を変更したときに反映されないことがあるので、その場合に使えるツールをご紹介します。

Card validatorを使う

OGPで設定した画像の確認と同時にキャッシュを削除してくれます。便利!

2022.08 画像のプレビュー機能は終了しました。
参考 カードバリデータ プレビューの削除

ogp
Card validatorの使い方
  1. 画像を確認したいページのURLを入力する
  2. 「プレビューカード」をクリック

簡単!これだけでOGP画像が変更できるのは嬉しいな。

固定ページをトップページにしている場合

それから別途、固定ページを作成してそれをトップページにしているサイトもあるかと思います。

その場合の方法は2つ。

  1. アイキャッチ画像を設定する
  2. SNS画像を設定する

アイキャッチ画像を設定する

個別記事と同じようにアイキャッチ画像を設定すると自動的にOGP画像として反映されます。

ただしそのままだとトップページにアイキャッチ画像が表示されてしまうので、非表示にするCSSを記述します。

/*トップページのみアイキャッチ画像を非表示*/
.home .eye-catch{
display:none;
}

SNS画像を設定する

投稿編集画面の投稿タブのところでSNS画像を設定します。

ogp

優先順位は アイキャッチ画像 > SNS画像となるので実際に設定するのはSNS画像だけでよいということですね。

Cocoon/OGP設定まとめ

以上のOGPの設定方法について解説しました。

サイトや記事の雰囲気、イメージを読者に伝えてPVアップ!

OGP画像がデフォルトのままの方は設定してみてはいかがでしょうか。

Comment

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