シュテル(@sterchannel2020)です!

自分が作ったWebサイトをシェアしてみたら画像などがうまく表示されなかった…
せっかく苦労して作ったサイトなので、シェアされる時もきれいに表示させたいですよね。
今回はその為に必要な「OGP」というものを勉強します。
OGCとは?設定の方法は?
OGPとはシェアされた時にサイト情報を正しく表示させる設定
OGPとは「Open Graph Protocol」の略です。
WebサイトがSNSなどでシェアされた時にタイトルや説明文、画像などを正しく表示させるために必要な設定です。
設定していないとURLとタイトルのみの表示となってしまいます。
OGPを設定する方法
HTMLファイルのhead内にmetaタグとして書き込めばOKです。
<meta property=”og:○○” content=””>
○○として設定するのは、
【OGPの設定項目】
url…ページのURL
type…websiteかarticleを指定
title…ページタイトル
description…ページの説明文
image…表示させたい画像
OGPの確認方法

Facebookなら「シェアデバッガー」、Twitterなら「Card validator」を使って正しく設定できているか確認しましょう。