SNSでシェアされた時のOGP画像キャッシュ更新方法をわかりやすく解説

SNSでWebサイトがシェアされた時の設定や更新をするイメージ

ブログサイトを運営していると自分の投稿した記事がTwitter、Facebook、LinkedIn、LINE、PinterestなどのSNSでシェアされたりしますね。

SNSでシェアされると、画像やシェアしたサイトのサムネイルや概要が「カード」のように表示されます。

この表示設定をしっかりとしておくと、シェアされた自分の記事が別の誰かの目にとまり、さらに拡散をしてもらえる機会を掴めます。

たくさんの人に自分の記事を知ってもらえるチャンスを作ってくれる大事な表示機能なので、しっかりと確認をしておきましょう。

OGPの更新を一気に出来るように、取り急ぎ、この下にOGP更新先のURL一覧を添付しておきます。

お気に入りとかで入れておいていただいて、お役に立てたら幸いです。

各SNSのOGPシミュレータ
  1. Twitter : Card validator
  2. Facebook : Sharing Debugger
  3. LinkedIn : POST INSPECTOR
  4. Pinterest : Rich Pins Validator

上記の一覧表には、引き続き他のSNSのカードバリデーターやでバッカーの公開、OGPの参照元などが分かったら追加していきます。

この記事の内容
  1. OGP(Open Graph protocol)が何のことか分かる
  2. OGPがどのように見えるのか確認をしたり、更新をする方法がわかる
  3. OGPに設定する画像など、登録する前の事前確認方法が分かる

OGPとは?

OGPとは?

シェアされた時に表示させるサムネイルや内容、引用元の情報の表示をさせる仕組みや設定をOGP(Open Graph protocol)と言います。

OGPを設定しておくと、シェアされた時のサムネイル(画像)や概要などの情報が「カード」のように組み立てられ、ブログ記事のカバー画像やディスクリション(記事の概要)などが表示されるようになります。

取り急ぎ、すぐにOGP画像のキャッシュ更新をすぐに行いたい場合は、下記にまとめておいたのでご利用ください。

各SNSのOGPシミュレータ
  1. Twitter : Card validator
  2. Facebook : Sharing Debugger
  3. LinkedIn : POST INSPECTOR
  4. Pinterest : Rich Pins Validator

せっかくシェアされた自分の記事やWebが、知らぬ間に自分の意図しない表示になっていたらとても嫌ですよね。

そんな時、どこで設定したりどのサイトでOGPの更新すればいいのか分からないと、とても嫌な気分になってしまいます。

OGPの設定

OGPの設定

Webサイトを管理するシステムや環境によって設定の仕方は変わってきます。

CMSなどを利用していないWebサイトの場合

直接、Webサイトのソースにコーディングが必要な場合は、下記のサイトでわかりやすくコーディング方法が書いてありますのでコチラを参照してください。

コードがわかりやすく解説されているWebサイト

WordPressを使用している場合

「 AIOSEO 」というプラグインをインポートして簡単に設定をすることが可能です。

下記は、STORK19というテーマを運用しているOPENCAGEのページですが、わかりやすくOGPの設定方法が解説されています。

OPENCAGE : All in One SEO PackでOGPタグを設定する方法

ブログテーマによっては、OGPのコーディングをしなくてもアイキャッチを設定したブログ記事を書けば自動的にOGPに反映してくれるものがあります。

ワードプレスのテーマを紹介する

そのほかのWebサイト制作サービスを利用している場合

WixやStrikingly、Jimdoなど、現在は様々なWebサイト制作サービスが提供されていますが、このようなCMSを利用している場合は、そのほとんどのサポートページで「OGP」と検索すればすぐに出てきます。

コーディングが必要になることはほとんど無く簡単にOGP設定ができるようになっています。

OGPで設定するための画像を用意するだけのことが多いので、興味があればアカウントを確認をしてみましょう。

初心者向けのWebサイト作成サービスを紹介する

WordPressでの運用をしてみるなら、10分〜15分でWordPressが立ち上げられるレンタルサーバーサービスをまとめた記事を作成したので、下記の記事をご覧ください。

おすすめのレンタルサーバー徹底比較して10種類まで厳選する

OGPのサイズや表示確認

OGPのサイズや表示確認

OGPは各SNSで最適な画像の表示解像度が違うため、全てのOGPに対応させるとなるとかなり大変な作業になります。

できるだけ、1枚の画像だけの使用で綺麗に見せたいですよね。

そんな時、シェアされた時のイメージを一気に確認したい時のサイトもあります。

一括で表示イメージを確認したい時の便利なサイトを2つ紹介します。

OGP確認ツール

OGP確認ツールは、とてもシンプルに、一気にいろんな見え方を確認することができます。

OGP確認

ラッコツールズさんが提供しているOGP確認も非常に便利です。

このOGP確認というツールは、OGPに画像を設定する前に、どのように表示されるか事前に画像をアップロードして確認ができるとても便利な機能があります。

OGPは、個別に設定していくのがベストですが、できれば1つの画像データで済ませたいですよね。

そんな時は、OGP確認ページの右上に「画像をアップして確認」というのがあるので、そちらで確認が可能です。

設定したOGP情報の登録や更新方法

設定したOGP情報の登録や更新方法

設定ができたら、これから紹介するリンク先でシェアされるとどのように表示されるのか確認をしていきましょう。

設定をしていない状態で、確認したいWebサイトのアドレスを入力すれば、現状どのように表示されるかも確認が可能です。

各SNSのOGPシミュレーターを3つ紹介します。

各SNSのOGPシミュレータを利用すれば、ブログ記事やWebサイトの画像を変更したときに、すぐに各SNSに反映させることが可能になります。

各SNSのOGPシミュレータ
  1. Twitter : Card validator
  2. Facebook : Sharing Debugger
  3. LinkedIn : POST INSPECTOR
  4. Pinterest : Rich Pins Validator

①Twitterの場合

Twitterの場合は、Twitter公式サイトでCard validatorが用意されています。

ここに該当のURLを入力してどのように表示されるかを確認。

意図しない表示がされていた場合は、元のデータを修正して再度、Card validatorで更新をしましょう。

②Facebookの場合

Facebookの場合は、Sharing Debuggerが用意されています。

ここでも該当のURLを入力してどのように表示されるかを確認しましょう。

ここでも意図しない表示がされている場合があるので、チェックしておきます。

更新後、反映させる動作をしても更新がされなかったときは、「もう一度スクレイピング」というボタンがあるので、それをもう一度押してみてください。

③LinkedInの場合

LinkedInの場合は、POST INSPECTORが用意されています。

ここに該当のURLを入力してどのように表示されるかを確認しましょう。

④Pinterestの場合

Pinterrestにもバリデーターが用意されています。

Rich Pins Validator

⑤LINEの場合

LINEの場合は、現在は即時反映させたり、それを確認する手段は提供されていないようです。

⑥News Picksの場合

News Picksの場合も即時反映させたい場合の方法については特に公開情報がありません。

なるべく全ての表示で見栄えが良くなるようにする

なるべく全ての表示で見栄えが良くなるようにする

私たちも完全にできていないのですが、なるべくシェアされた時に画像のイメージが変わらないようなデザインを考慮して設定しています。

具体的には、デザインソフトでそれぞれのプラットフォームのアスペクトをガイドラインで設定して全てのプラットフォームで見栄えが良くなるような画像を設定しています。

本当は手動でひとつずつ、それぞれのプラットフォームに合わせたのサムネイル画像を出力して登録をしていきたいですが、これはかなりの工数になります。

オリジナルのイラストをアイキャッチで制作するときカテゴリーによっては、OGP上での見栄えを整えていくことを都度おこなっています。

デザインソフトのカンバスサイズからセーフティーラインを付けていくと、有効な範囲がかなり限定されるので難しい構成になりますが、是非皆さんもチャレンジしてみてください。

OGPの設定は最初に済ませる

OGPの設定は最初に済ませる

特に更新頻度の多いブログ記事などは、最初のうちにしっかりとシェアされた時の対策を行っておくことで、拡散される機会を掴むことができます。

OGPの設定はしっかりと行っておきましょう。

OGPを簡単に設定する

最近のWebサービスやブログの有料テーマは、OGPなどの難しい設定をしなくても、コンテンツが増える度に自動で設定くれる物がいくつもあります。

このブログも、基本的には「STORK19」という有料テーマと「AIOSEO」で、サイトに関するほとんどのSEO対策は済ませていました。

現在、ユニコブログ®はSEO PRESSというプラグインに切り替えましたが、OGPについては同じように、副サイトも含めて同じように画像の設定をしています。

ブログにOPGの設定は必須

Webサイトやブログサイトには、記事ごとにOGPの設定が必須となってきています。

最近はSEOでサイテーション(引用)も重要視されるようになり、SNSで共有されたときなどは特にOGPの設定が重要になります。

リライトでアイキャッチなどを更新したらこまめにOGPのキャッシュも更新して最新の状態を保てるようにしておきましょう。

最後まで記事を読んでいただき、ありがとうございました。

ブログにソーシャルボタンは必要なのかを考えてみる
ABOUT US
小林 玲王奈ユニコーンコンサルティング株式会社 代表取締役

起業して法人化した初期の頃は、自分と同じく起業する人や、スタートアップ企業に対して出資や資金調達などのサポートを中心に事業を行っていました。

現在は、主に自社のブログサイトを中心としたWebメディア運営、Webアプリの開発、LINEスタンプやLINE絵文字等の、2Dイラスト制作を中心にキャラクターデザインをして、そこから3DCGによるコンテンツ制作事業としてAR(拡張現実)やVR(仮想現実)向けのプラットフォームへコンテンツ提供を行っています。

公式ブログサイトのユニコブログ®では、「会社の収入だけに依存しない生活を手に入れる」ことをテーマにブログ記事を書いたり、ブログ運営を始める人のサポートを無償で行っています。

主な経歴としては、2003年から放送及び映像業界向けの様々な新規事業立ち上げを15年以上担当していました。

2014年からは、会社員として働きながら経営/メディアコンサルティング業を開始して、2020年01月に法人化し、ユニコーンコンサルティング株式会社を設立しました。

現在、ユニコブログ®以外にも、数十サイト以上の特化ブログを立ち上げて運用しています。

全て同じサイト構成、ブログ記事構成、文章構成など、検証可能な範囲で仕様を合わせてみて、収益を出すのに再現性があるか?などを試行錯誤している日々です。

他にも、ピックアップしているレンタルサーバーとWordPressテーマを総当たりで組み合わせてサイトスピードがどうなるかなど、思いついた事をひたすら検証する日々。

WordPress用のシンプルなプラグインやブログパーツの開発にもチャレンジしています。

所有資格や認定ライセンスとしては、SMPTE Professional Engineer Member、一般社団法人 日本ポストプロダクション協会認定 映像音響処理技術者などを所有しています。

著書 : 『保存版 売上を向上させるためのYouTube活用術』

教育関連では複数の教育機関で定期的に講演を行っており、主な活動実績としては、2020年度と2021年度の 学校法人調布学園 田園調布学園 中等部・高等部「豊かな教養を培う 未来へつなぐ土曜コアプログラム『探究』」にて空中ディスプレイコンテンツ制作及びWebサイト制作の特別講師を担当。2022年度は土曜プログラム(マイプログラム)『仕事最前線』で講演しました。

著述家 / ブロガー兼コンテンツクリエイター

プロフィールの詳細はこちら

ユニコーンコンサルティング®|公式Webサイト