ブログサイトを運営していると、自分の投稿した記事がサイト訪問者によって
- X（旧 Twitter）
- LINE
- はてなブックマーク
- NewsPicks
- Bluesky
- Threads
等の、数多くリリースされている様々なSNSプラットフォームなどでシェアされたりします。
また、自分で書いた記事がニュースサイトやGoogle Discover（ディスカバー）などでピックアップされた場合、ブログサイトの先頭にアイキャッチ画像があると、シェアされたブログ記事のサムネイルや概要が「カード」のように、共有時のデザインに組み込まれて表示されます。
これらのOGPなどは、例としてCMSでWordPressを使用し、OGPの設定に対応したWordPressテーマを使用している場合、特に意識をしなくても、アイキャッチとしてページの先頭に配置された画像が、共有された時のサムネイルとしてSNSに表示されます。
また、プラグインなどでOGP用画像の使い分けをしたり、そのほかにもページタイトルなどが表示させることができるようになります。
まずは、取り急ぎ、すぐにOGP画像のキャッシュ更新をすぐに行いたい場合もあります。
下記に、OGPの更新がすぐにできるプラットフォームについて纏めておいたのでご利用ください。
- X（旧 Twitter） : Card validator
- Facebook : Sharing Debugger
- LinkedIn : POST INSPECTOR
- Pinterest : Rich Pins Validator
後からアイキャッチの画像などをすぐに更新したい場合もあると考えます。
通常、各SNSに一度キャッシュされたOGPデータは、手動でデータを更新しないとすぐには変更されません。
また、上記の一覧表には、引き続き他のSNSプラットフォームでののカードバリデーターやデバッガーの公開、OGPの参照元などが分かったら追加していきます。
本記事は、SNSで表示されるアイキャッチ（サムネイル）のOGP更新を目的として、主な主要SNSのOGP更新ができるリンク先を記載しておきます。
OGP画像キャッシュの更新方法
- OGP（Open Graph protocol）が何のことか分かる
- OGPがどのように見えるのか確認をしたり、更新をする方法がわかる
- OGPに設定する画像など、登録する前の事前確認方法が分かる
シェアされて拡散された時に、この表示設定をしっかりとしておくと、さらに拡散をしてもらえる機会を掴めるので、広まっても問題の起きないアイキャッチ画像等を利用するようにしておきましょう。
画像素材を更新できる方法を知っておく
ストックフォトサービス等で利用される画像素材には、エディトリアル素材や、OGPでも撮影者のクレジットが必要な場合があります。
また、自分で撮影した写真の場合でも、例えば
- 本来は撮影禁止の場所で撮影した写真
- 他の人が写った写真（肖像権）
- 第三者の著作物や商標等の写り込み
には要注意です。
詳細は、文化庁から「写り込み」等に係る規定の整備について詳細が記載されていますし、下記に著作に関する特集ブログ記事も書いたので、これらの情報が参考になれば幸いです。
たくさんの人に自分の記事を知ってもらえるチャンスを作ってくれる大事な表示機能なので、しっかりと確認をしておきましょう。
本記事冒頭にまとめた一覧表を「お気に入り」や「ブックマーク」とかで保管していただいて、必要時に、すぐOGPの更新ができれば幸いです。
OGPとは？
シェアされた時に表示させるサムネイルや内容、引用元の情報の表示をさせる仕組みや設定をOGP（Open Graph protocol）と言います。
OGPを設定しておくと、シェアされた時のサムネイル（画像）や概要などの情報が「カード」のように組み立てられ、ブログ記事のカバー画像やディスクリション（記事の概要）などが表示されるようになります。
せっかくシェアされた自分の記事やWebが、知らぬ間に自分の意図しない表示になっていたらとても嫌です。
そんな時、どこで設定したりどのサイトでOGPの更新すれば良いのか分からないと、とても嫌な気分になってしまいます。
OGPの設定
Webサイトを管理するCMSやWebサーバーの環境によって設定の仕方は変わってきます。
CMSなどを利用していないWebサイトの場合
直接、Webサイトのソースにコーディングが必要な場合は、下記のサイトでわかりやすくコーディング方法が書いてありますのでコチラを参照してください。
- ferret : Facebook・X（旧 Twitter）のOGP設定方法まとめ
- デジタルマーケティングブログ : OGPを設定しよう！SNSでシェアされやすい設定方法とは？
- Web seisaku.com : いまさら聞けない！OGPとは？
WordPressを使用している場合
ブログテーマによっては、OGPのコーディングをしなくてもアイキャッチを設定したブログ記事を書けば自動的にOGPに反映してくれるものがあります。
特に、有料のWordPressテーマであれば、この辺りの設定は設定しなくてもWebページごとにアイキャッチを設定するか、初期設定で少し設定するだけで、OGPの設定については気にする必要がなくなります。
そのほかのWebサイト制作サービスを利用している場合
WixやStrikingly、Jimdoなど、現在は様々なWebサイト制作サービスが提供されていますが、このようなCMSを利用している場合は、そのほとんどのサポートページで「OGP」と検索すればすぐに出てきます。
コーディングが必要になることはほとんど無く簡単にOGP設定ができるようになっています。
OGPで設定するための画像を用意するだけのことが多いので、興味があればアカウントを確認をしてみましょう。
WordPressでの運用をしてみるなら、10分〜15分でWordPressが立ち上げられるレンタルサーバーサービスをまとめましたのでお役に立てば幸いです。
OGPのサイズや表示確認
OGPは各SNSで最適な画像の表示解像度が違うため、全てのOGPに対応させるとなるとかなり大変な作業になります。
できるだけ、1枚の画像だけの使用で綺麗に見せたいですよね。
そんな時、シェアされた時のイメージを一気に確認したい時のサイトもあります。
一括で表示イメージを確認したい時の便利なサイトを2つ紹介します。
OGP確認ツール
OGP確認ツールは、とてもシンプルに、一気にいろんな見え方を確認することができます。
OGP確認
ラッコツールズさんが提供しているOGP確認も非常に便利です。
このOGP確認というツールは、OGPに画像を設定する前に、どのように表示されるか事前に画像をアップロードして確認ができるとても便利な機能があります。
OGPは、個別に設定していくのがベストですが、できれば1つの画像データで済ませたいですよね。
そんな時は、OGP確認ページの右上に「画像をアップして確認」というのがあるので、そちらで確認が可能です。
設定したOGP情報の登録や更新方法
設定ができたら、これから紹介するリンク先でシェアされるとどのように表示されるのか確認をしていきましょう。
設定をしていない状態で、確認したいWebサイトのアドレスを入力すれば、現状どのように表示されるかも確認が可能です。
各SNSのOGPシミュレーターを3つ紹介します。
各SNSのOGPシミュレータを利用すれば、ブログ記事やWebサイトの画像を変更したときに、すぐに各SNSに反映させることが可能になります。
X（旧 Twitter）の場合
X（旧 Twitter）の場合は、X（旧 Twitter）公式サイトでCard validatorが用意されています。
ここに該当のURLを入力してどのように表示されるかを確認。
意図しない表示がされていた場合は、元のデータを修正して再度、Card validatorで更新をしましょう。
Facebookの場合
Facebookの場合は、Sharing Debuggerが用意されています。
ここでも該当のURLを入力してどのように表示されるかを確認しましょう。
ここでも意図しない表示がされている場合があるので、チェックしておきます。
更新後、反映させる動作をしても更新がされなかったときは、「もう一度スクレイピング」というボタンがあるので、それをもう一度押してみてください。
LinkedInの場合
LinkedInの場合は、POST INSPECTORが用意されています。
ここに該当のURLを入力してどのように表示されるかを確認しましょう。
Pinterestの場合
Pinterestにもバリデーターが用意されています。
LINEの場合
LINEの場合は、現在は即時反映させたり、それを確認する手段は提供されていないようです。
News Picksの場合
News Picksの場合も即時反映させたい場合の方法については特に公開情報がありません。
なるべく全ての表示で見栄えが良くなるようにする
私たちも完全にできていないのですが、なるべくシェアされた時に画像のイメージが変わらないようなデザインを考慮して設定しています。
具体的には、デザインソフトでそれぞれのプラットフォームのアスペクトをガイドラインで設定して全てのプラットフォームで見栄えが良くなるような画像を設定しています。
本当は手動でひとつずつ、それぞれのプラットフォームに合わせたのサムネイル画像を出力して登録をしていきたいですが、これはかなりの工数になります。
オリジナルのイラストをアイキャッチで制作するときカテゴリーによっては、OGP上での見栄えを整えていくことを都度おこなっています。
デザインソフトのカンバスサイズからセーフティーラインを付けていくと、有効な範囲がかなり限定されるので難しい構成になりますが、是非皆さんもチャレンジしてみてください。
OGPの設定は最初に済ませる
特に更新頻度の多いブログ記事などは、最初のうちにしっかりとシェアされた時の対策を行っておくことで、拡散される機会を掴むことができます。
OGPの設定はしっかりと行っておきましょう。
OGPを簡単に設定する
最近のWebサービスやブログの有料テーマは、OGPなどの難しい設定をしなくても、コンテンツが増える度に自動で設定くれる物がいくつもあります。
このブログも、基本的には「STORK19」という有料テーマを利用していて、SEOに関してはSEOPressというプラグインに切り替えましたが、OGPについては同じように、副サイトも含めて同じように画像の設定をしています。
ブログにOPGの設定は必須です
Webサイトやブログサイトには、記事ごとにOGPの設定が必須となってきています。
最近はSEOでサイテーション(引用)も重要視されるようになり、SNSで共有されたときなどは特にOGPの設定が重要になります。
リライトでアイキャッチ画像を変更したら各SNSのOGP情報を更新する
リライトでアイキャッチなどを更新したらこまめにOGPのキャッシュも更新して最新の状態を保てるようにしておきましょう。
最後まで記事を読んでいただき、ありがとうございました。
