OGPタグとは
OGPタグとは「Open Graph Protcol」の略です。OGPタグは、FacebookやX（旧Twitter）、Slack、LinkedInなどのSNSでシェアした際に設定したWEBページのタイトルや画像、詳細情報などを共有することができます。
OGPタグを利用するメリット
正確な情報をユーザーに伝えることができるためです。
例えば、URLをシェアした際に、タイトルや画像が表示されないと、ユーザーがURLをクリックするかどうかを判断することが難しくなります。
そのため、OGPタグを利用することで、URLをシェアした際に、正確な情報をユーザーに伝えることができます。
OGPタグの設定方法
OGPタグは、HTMLのheadタグ内に記述します。
以下に、OGPタグの設定方法を示します。
- head要素に、以下のようにOGPタグを記述します。
prefix="og: http://ogp.me/ns#" - headerタグ内のmetaタグに、以下のようにOGPタグを記述します。
<meta property="og:url" content=" WebページのURL" />
<meta property="og:type" content="Webページの種類" />
<meta property="og:title" content="Webページのタイトル" />
<meta property="og:description" content="Webページの説明文" />
<meta property="og:site_name" content="Webサイト名" />
<meta property="og:image" content=" Webサムネイル画像のURL" />
- og:url
WebページのURLを指定します。相対パスではなく、絶対パスを指定します。 - og:type
Webページの種類を指定します。様々なtypeがありますが、一般的には「website」を指定します。 - website: WebサイトのTOPページ
- article: 記事ページ
- blog: ブログページ
- profile: プロフィールページ
- video: 動画ページ
- music: 音楽ページ
- book: 書籍ページ
- product: 商品ページ etc.
- og:title
Webページのタイトルを指定します。 - og:description
Webページの説明文を指定します。 - og:site_name
Webサイト名を指定します。 - og:image
Webサムネイル画像のURLを指定します。相対パスではなく、絶対パスを指定します。
まとめ
OGPタグを利用することで、URLをシェアした際に、正確な情報をユーザーに伝えることができます。
OGPタグは、HTMLのheadタグ内に記述し、og:url、og:type、og:title、og:description、og:site_name、og:imageを指定します。