OGPとは、Open Graph Protocolの頭文字をとったもので
SNS上でシェアされた時に、ページのタイトル、URL、概要、画像(サムネイル)を伝えるためにHTMLソースに記述するタグ情報です。
HTMLのヘッダ領域(head要素内)に任意のデータを記述できるmeta要素を追加し、そのページについての情報を記載することができる。OGPのデータであることを示すため、property属性に「og:」から始まる値を記述する。
(略)参照元:e-Words
SNSが多用される現代では、こちらの見え方も意識する企業様も増えてきていると思います。
私が気づいたのは、
ふとLINEでのやりとりでサイトのリンクを送った時に画像が設定されているものと、
テーマの設定デフォルトのもの等を見かけます。
その時にこの機能は何ていう名前なんだろうと考えました。
やはり視覚的にわかりやすい情報として、OGP画像を中心に考えますが
サイトにおいてこのOGP画像は、どこが優先されるか皆様はご存じでしょうか?
各記事のOGP画像は、アイキャッチ画像を利用するか、記事の投稿画面から個別に設定します。
使用される画像の優先度はアイキャッチ画像 > 個別に指定したOGP画像 > 記事内最初の画像>サイト全体のOGP画像です。
サイトのトップページの場合は、
固定ページをフロントページへ設定している場合、アイキャッチ画像 > 個別に指定したOGP画像>トップページ内最初の画像>ノーイメージ> サイト全体のOGP画像>(あればテーマ用意のノーイメージ)
テーマによっては、この優先順位も違い表示されないという場合もあるかと思います。
しかしその場合はHTMLのソースコードの確認により見えるというのも不思議と思っていた表示・仕組みの中身が見えることで、対策・解決できそうですよね。
Webサイトがシェアされたときにどのような形で表示されるかは、各SNSによって異なります。
サイズはまとめサイトにも載っていますし、シュミレーターもあるようです。
よくFacebookとTwitterでの表示方法を取り上げている記事やSNSにおける OGP画像設定が可能なテーマもありますので、是非チェックしてみてください。