【サイト制作】OGPとは?設定方法と確認方法を解説

プログラミング

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

タイトルとURLをコピーしました