CocoonのOGP設定/SNS(Twitter)でオリジナル画像を表示するには?反映されないときの対処法

アイキャッチ/ogpカスタマイズ
この記事はWordPressのテーマCocoon(コクーン)を対象としたカスタマイズになります。

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

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

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

アイキャッチ/cocoon

他のCocoonユーザーさんでもこの画像のままの人がたくさん!もったいないよ~。

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

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

OGPについて

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

画像のサイズ

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のキャッシュを削除

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

ogp

Twitterのキャッシュを削除

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

ogp

しばらく待つ

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

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

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

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

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

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

Card validatorを使う

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

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

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

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

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

その場合の方法は2つ。

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

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

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

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

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

SNS画像を設定する

記事作成画面の投稿タブのところでSNS画像を設定します。

ogp

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

まとめ

以上の設定をおこなって反映された、当サイトの実際のOGP画像がこちらです。

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

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

カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、下記の点を確認してみてください。

  • コードは半角英数字になっているか(全角は使えません)
  • 前後や余白に余計な全角スペース、文字等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSコードは{ }、メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか(下に書いたコードが優先されます)


事前にバックアップをとり、カスタマイズは慎重に行いましょう。

ブログがもっと楽しくなる

基礎、応用編と分かれていて分かりやすい内容。CSSの理解を深めたい人へオススメです!!

カスタマイズ
\Follow/
Turicco

Comment

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