OGPについて調べてみた

auです。

Webサイトで使われるOGPについて調べてみました。

OGPとは

OGPとは、Open Graph Protocolの略称です。
FacebookやTwitterといったSNSでシェアをした際に表示されるタイトル・URL・概要・画像のことです。

f:id:program-shoshinsya:20200809183801p:plain

ここに表示されているものですね。ここのタイトルや画像をカスタマイズできるのがOGPです。

設定方法

HYMLに特定のタグを挿入することで表示されるようになります。

htmlタグに以下のprefixを含める

<html lang="ja" prefix="og: http://ogp.me/ns#">

headタグ内に以下の要素を追加

<meta property="og:title" content="タイトル">
<meta property="og:type" content="website or blog or article">
<meta property="og:description" content="ページの説明">
<meta property="og:url" content="ページのURL">
<meta property="og:site_name" content="サイトの名前">
<meta property="og:image" content="サムネイル画像のURL>