【cocoon】OGP画像の設定してますか?SNSシェアで重要です!

【cocoon】OGP画像の設定してますか?SNSシェアで重要です!
まめ丸
まめ丸

SNSシェアした時に画像が出ない

LiDo
LiDo

それはOGP設定してないからだよ!

この悩みを解決します!

本記事の内容

  • OGPってなに?
  • ワードプレスのOGP設定の仕方

ブロガー目指し活動しているLiDoです。

今回は「OGP設定の必要性と設定方法」について解説します。

初めてワードプレスで記事を公開後、Twitterでシェアした時にサムネイル画像が表示されずにびっくりしました。

原因を調べて出てきた言葉、「OGP設定」という言葉。
「えっ何それ?」って感じだったので、過去の自分に向けて記事を書きます。

OGP画像の設定してますか?

OGB設定はSNSシェアに絶対に必要なこと

OGPとはOpen Graph Protocol (オープン・グラフ・プロトコル)略。

SNSでシェアされた時にサムネイルを表示させる設定で重要な役割があります。

ワードプレスの場合、記事のシェアではサムネイルが表示されますが、
サイトのURLがシェアされた時にOGP設定をする必要があります。

「OGP設定のメリット」について掘り下げて解説します。

メリット1:ユーザーがサイトを覚える

人は文字よりも画像から情報を得る生き物です。

例えば、店の名前は忘れたけど看板は覚えている。
商品名は覚えていないけど、ポスターやCMは覚えている。

これが画像=モノから得る情報です。

デフォルト未設定の場合とオリジナル画像の比較。

OGP画像の比較

どちらが覚えられそうですか?

この画像を頼りにリピートするユーザーがいます。
今後に役立つので、オリジナルの画像を設置しましょう。

メリット2:差別化ができる

SNSでシェアされた時にサイトURLはユーザーにとって一番最初の入り口。

多くのブロガーが運用しているTwitterの場合、タイムライン(TL)には様々なサイトが並びます。

新規ユーザーの目に止まる画像でないといけません。
Twitterでアイコンとヘッダーが重要と言われるのと同じ原理。

上記の「ユーザーがサイトを覚える」と類似しますが、ここで差別化を測りたいところです。

ちなみに、当ブログのOGP画像デザインは、サイトのコンセプトに乗っ取ってデザインしました。
(反応が悪ければデザインを変えますが…)

制作用:OGP画像のサイズ

「630px × 1200px」で作ることが推奨されています。

snsでシェアされる時にリサイズされる場合があり、
一番大きいサイズが「630px × 1200px」です。

絶対このサイズで作る必要はないですが、縦横比は1.91:1は守りましょう。

「OGO確認」はfacebook、Twitter、LINE、はてなブックマークでの見え方をシミュレーションしてくれる優れもの。
スマホ画面、PC画面で確認が可能です。

OGP画像確認シミュレーター

引用元:OGP確認

LiDo
LiDo

大事な文字が見えるようにデザインしよう

 OGP設定方法について

 OGP設定方法について

ワードプレスのテーマ毎に設定方法は異なります。

  1. テーマ設定から追加可能
  2. プラグインを使用する

この2択になります。

プラグインの場合は、All in One SEO Packに搭載されています。
多くの方がこのプラグインを入れていると思うので問題ないですね。

当ブログのテーマ「Cocoon」のやり方をご紹介します。

CocoonでOGP画像を設定する

Cocoonの特徴でプラグインなしで様々な設定ができます。

LiDo
LiDo

すごく簡単だよ

設定画面は「 cocoon設定 > OGP 」です。

「ホームイメージ」がサイトのOGP設定になります。
ここに制作したOGPをアップロードしましょう。

 cocoon設定 > OGP >ホームイメージ

実際に変更されているのか下記のサイトで確認をしてください。

引用元:Card Validator

LiDo
LiDo

これでOKだね

OGP画像が反映されない場合

キャッシュの原因が大きいです。
いくつかキャッシュの要因がありますが、cocoonの設定が大きいでしょう。

Cocoonの場合は設定でキャッシュの削除が可能。
設定画面は「 cocoon設定 > キャッシュ削除 」です。

「全てのキャッシュ」を押してください。

cocoon設定>キャッシュ削除>全てキャッシュの削除
LiDo
LiDo

これで確認してみてね

まとめ:OGP設定をしよう

まとめ:OGP設定をしよう
  • OGP設定は必ず差別化の為にしよう
  • サイズは630px × 1200px

これでいつシェアされても大丈夫です。
デザインのポイントはオリジナリティあふれる画像で差別化をしましょう。

では、今日はこれで失礼します。
ありがとうございました。

コメント

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