OGPとは?

OGPとは、Open Graph Protocolの頭文字をとったもので
SNS上でシェアされた時に、ページのタイトル、URL、概要、画像(サムネイル)を伝えるためにHTMLソースに記述するタグ情報です。

OGPとは、Webページにそのページについての情報(メタ情報)をコンピュータで自動処理できる形で記述するためのデータ形式の一つ。米メタ(Meta:旧フェイスブック)社が策定した。
HTMLのヘッダ領域(head要素内)に任意のデータを記述できるmeta要素を追加し、そのページについての情報を記載することができる。OGPのデータであることを示すため、property属性に「og:」から始まる値を記述する。
(略)<span class="su-quote-cite"><a href="https://e-words.jp/w/OGP.html" target="_blank">参照元:e-Words</a></span>

SNSが多用される現代では、こちらの見え方も意識する企業様も増えてきていると思います。
私が気づいたのは、
ふとLINEでのやりとりでサイトのリンクを送った時に画像が設定されているものと、
テーマの設定デフォルトのもの等を見かけます。
その時にこの機能は何ていう名前なんだろうと考えました。

やはり視覚的にわかりやすい情報として、OGP画像を中心に考えますが
サイトにおいてこのOGP画像は、どこが優先されるか皆様はご存じでしょうか?

各記事のOGP画像は、アイキャッチ画像を利用するか、記事の投稿画面から個別に設定します。
使用される画像の優先度はアイキャッチ画像 > 個別に指定したOGP画像 > 記事内最初の画像>サイト全体のOGP画像です。

サイトのトップページの場合は、
固定ページをフロントページへ設定している場合、アイキャッチ画像 > 個別に指定したOGP画像>トップページ内最初の画像>ノーイメージ> サイト全体のOGP画像>(あればテーマ用意のノーイメージ)

テーマによっては、この優先順位も違い表示されないという場合もあるかと思います。
しかしその場合はHTMLのソースコードの確認により見えるというのも不思議と思っていた表示・仕組みの中身が見えることで、対策・解決できそうですよね。

Webサイトがシェアされたときにどのような形で表示されるかは、各SNSによって異なります。
サイズはまとめサイトにも載っていますし、シュミレーターもあるようです。
よくFacebookとTwitterでの表示方法を取り上げている記事やSNSにおける OGP画像設定が可能なテーマもありますので、是非チェックしてみてください。

コメントする