シュテル(@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」を使って正しく設定できているか確認しましょう。
