普段、何気なくTwitterを見ているときに気になったことがひとつ。
ブログのURLを入れてツイート（ポスト）したときに表示される画像がCocoonのデフォルトのままだなぁ…
特定の記事をシェアしたときにはその記事に設定したアイキャッチ画像が出るのに、サイトのURLをシェアするとデフォルトCocoonのままになっています。
この画像のままの人がたくさん！もったいないよ～。
せっかく自分のサイトをアピールできるチャンスなので、みんな同じのデフォルトよりイメージを伝えられるような画像があったほうがよいですね。
今回はSNSでシェアしたときに任意の画像を表示する方法（OGP）と反映されないときの対処法についてご紹介します。
- ブログ好きな40代主婦
- CocoonサイトをCSSでフルカスタマイズ
- JavaScriptを勉強中
- ドメインパワー32
- ワードプレスで２サイトを運営しています
です
OGPについて
OGP画像の適切なサイズ
OGP画像はアイキャッチ画像と同様に
横1200×縦630px
がベストと言われています。
SNSでシェアしたとき正方形に切り取られることがあるので、見せたい部分は真ん中に配置するなどした方が良いかもしれません。
当サイトは軽量化のため画像を800px x 450pxと小さめにしてさらに圧縮をかけていますが問題なく表示されています。
設定するOGP画像
- サイトのメイン画像
- OGP設定が必要（今回設定するところ）
- 個別記事の画像
- 自動的にアイキャッチがOGP画像として反映される
２か所の画像がありますが、まずはサイトのメイン画像を設定する方法について。
サイトのメイン画像を設定する方法
- STEP1サイト画像を準備する
任意の画像を準備します。私はお気に入りのCanvaで作成しました。
- STEP2OGP設定
Cocoon設定のOGPに画像を指定します。
- STEP3キャッシュの削除
反映されない場合、TwitterとCocoonの両方のキャッシュを削除します。
- STEP4しばらく待ってから確認する
設定する箇所はCocoonの「OGP」
１.Cocoon設定 → OGP のタブを選択します。
２.ホームイメージ
下の方にホームイメージの項目があるので選択をクリックして任意の画像をアップロードして設定します。最後に保存するボタンを忘れずにクリック。
設定はこれで完了です。
ですがすぐには反映されないことがあります。
Cocoon／OGP設定が反映されない場合の対処法
この設定をおこなってもすぐに反映されない場合はキャッシュが影響していると考えられるので削除します。
Cocoonのキャッシュを削除
Cocoon設定 → キャッシュ削除 → SNSキャッシュを削除します。
Twitterのキャッシュを削除
合わせてTwitterのキャッシュも削除します。
しばらく待つ
キャッシュを削除してもすぐには反映されないので、ここまでの設定が終わったらしばらく待つといつの間にか反映されている感じになるかと思います。
私の場合は１時間後に確認したら反映されていました。
ここまでがサイトのメイン画像の設定方法と反映されないときの対処法となります。
個別記事のアイキャッチ画像を変更したとき
個別記事を投稿する場合にはアイキャッチ画像を登録しておけば自動的にOGP画像として反映されます。
ところが後からアイキャッチ画像を変更したときに反映されないことがあるので、その場合に使えるツールをご紹介します。
Card validatorを使う
OGPで設定した画像の確認と同時にキャッシュを削除してくれます。便利！
- 画像を確認したいページのURLを入力する
- 「プレビューカード」をクリック
簡単！これだけでOGP画像が変更できるのは嬉しいな。
固定ページをトップページにしている場合
それから別途、固定ページを作成してそれをトップページにしているサイトもあるかと思います。
その場合の方法は２つ。
- アイキャッチ画像を設定する
- SNS画像を設定する
アイキャッチ画像を設定する
個別記事と同じようにアイキャッチ画像を設定すると自動的にOGP画像として反映されます。
ただしそのままだとトップページにアイキャッチ画像が表示されてしまうので、非表示にするCSSを記述します。
/*トップページのみアイキャッチ画像を非表示*/
.home .eye-catch{
display:none;
}SNS画像を設定する
投稿編集画面の投稿タブのところでSNS画像を設定します。
優先順位は アイキャッチ画像 ＞ SNS画像となるので実際に設定するのはSNS画像だけでよいということですね。
Cocoon／OGP設定まとめ
以上のOGPの設定方法について解説しました。
サイトや記事の雰囲気、イメージを読者に伝えてPVアップ！
OGP画像がデフォルトのままの方は設定してみてはいかがでしょうか。
Comment