こんにちは、yujiです！このブログでは、WordPressを使ったブログ運営について詳しくまとめています。
「SNSで記事をシェアしたときに、画像がCocoonのままになってしまいます。好きな画像を表示するにはどうすればいいの？」
現在SNSからのブログ記事へのアクセスは、欠かすことのできない流入経路になっています。
しかしSNSで記事をシェアしたときに、以下のようにCocoonのデフォルトの画像で表示される場合があります。
このように、SNSでのブログ記事のシェア画面がCocoonになっており、設定したアイキャッチ画像が表示されていません。
LINEなどでも同様にCocoonの画像が表示されます。
この記事では、こういったSNSシェアで表示される「OGP画像」の設定方法を解説します。
OGP画像を設定します。
OGP画像とは？
OGPとは「Open Graph protocol」の略称。
FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトル・サムネイルなどを正しく表示させる仕組みです。
SNSなどでページを共有したとき、通常の投稿ページならアイキャッチ画像が反映されますが、トップページの場合は「OGP画像」が表示されます。
✔表示されるサムネイル
【通常のページ】アイキャッチ画像
【トップページ】OGP画像
ちなみにOGP画像には画質制限もあります。詳細は以下の通り。
✔OGPの画質制限
・Facebookは最低600×315ピクセル
・Twitter は最低300×157ピクセル
こういった画質が推奨されているので、サムネイルにはこれ以上の画質のものを使います。
OGP画像の設定方法。
リンク共有先でのページの印象はサムネイル画像で決まります。つまり、アクセス数にも大きくかかわると思うので、きちんと設定しておくことをおすすめします。
まずは「Cocoon設定」から「OGP」をクリック。
一番下に「ホームイメージ」があるので「選択」をクリックすると、「メディアライブラリ」が表示されます。ここから設定したい画像を選択します。
「画像の選択」をクリックで、元の画面に戻ります。
「変更をまとめて保存」でOGP画像の設定は完了です。
「続いて、変更した画像が実際に反映されているか確認します。」
OGP画像が反映されているか、確認します。
設定が終わったら、OGP画像が変更できているかを確認するためシェアデバッガーでFacebookページのキャッシュをクリアします。
サイトURLを入力し「新しいスクレイピング情報を取得」をクリックします。
シェアされたときのサムネイルのプレビューを更新できます。先ほど設定した画像になっていることが確認出来たらOK。
実際にFacebookで共有してみると、先ほど設定し直したOGP画像が表示されています。
LINEでも変更できました。これでOGP画像の確認が完了です。
サムネイルはサイトや共有したいページの顔でもあるので、うまく利用すれば自分のサイトの情報や印象を相手に正しく伝えることができます。
是非、これを機にOGP画像を設定してみてください！
OGP画像を変更した場合も同じです。
ちなみに、OGP画像を変更したときも同様の手順で画像キャッシュをクリアできます。
✔画像キャッシュのクリア方法
【Facebook】シェアデバッガー
【Twitter】カードバリデーター
それぞれのサイトでOGP画像の変更が可能です。
この記事が少しでもお役に立てたら幸いです。最後まで読んでいただき、ありがとうございました！
・【スキルなしでもOK！】記事へのアクセスが増えるおしゃれな『アイキャッチ画像』の作り方【canva】
・【その画像の著作権、大丈夫ですか？】僕がおすすめする『安心のフリー素材サイト』9選！
・【Twitterデータ公開してます】14日間でフォロワーを2,000人増やすノウハウ。
・【2020年最新版】キャッシュレス初心者向け、おすすめのQRコード決済4選！
・【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較！
コメント