OGPとは？OGPタグの設定方法と SNS(Facebook・X(Twitter)) の記述例

2023.09.28

OGPとは？OGPタグの設定方法と SNS(Facebook・X(Twitter)) の記述例

目次

  1. OGPとは
  2. headタグ
  3. og:url ページのURL
  4. og:type ページの種類
  5. og:title ページのタイトル
  6. og:description ページの説明文
  7. og:site_name サイト名
  8. og:image サムネイル画像のURL
  9. twitter:card X(Twitter)カードの種類
  10. twitter:site X(Twitter)ユーザー名
  11. fb:app_id FacebookアプリID

OGPとは

「Open Graph Protcol」の略で、WebページがSNSでシェアされた時にWebページのタイトルや概要等の情報を表示させるための機能です。

OGPの設定例は以下の通りです。

<head prefix="og:https://ogp.me/ns# fb:https://ogp.me/ns/fb# website:https://ogp.me/ns/website#">
<meta property="og:url" content="ページのURL">
<meta property="og:type" content="ページの種類">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:site_name" content="サイト名">
<meta property="og:image" content="サムネイル画像のURL">
<meta name="twitter:card" content="X(Twitter)カードの種類">
<meta name="twitter:site" content="@X(Twitter)ユーザー名">
<meta property="fb:app_id" content="FacebookアプリID(15桁の英数字)">

基本設定

headタグ

OGPを使用する宣言

<!-- TOPページ -->
<head prefix="og:https://ogp.me/ns# fb:https://ogp.me/ns/fb# website:https://ogp.me/ns/website#">

<!-- TOPページ以外 -->
<head prefix="og:https://ogp.me/ns# fb:https://ogp.me/ns/fb# article:https://ogp.me/ns/article#">

<!-- Facebook不要 -->
<head prefix="og:https://ogp.me/ns#">

og:url ページのURL

ページのURL

絶対パス

<meta property="og:url" content="https://webrole.net/">

og:type ページの種類

ページの種類

  • website … Webサイトトップページ
  • blog … ブログページ
  • article … 記事ページなど
  • product … 製品紹介ページ
<meta property="og:type" content="website">

og:title ページのタイトル

ページのタイトル

<meta property="og:title" content="お問い合わせページ">

og:description ページの説明文

ページの説明文

<meta property="og:description" content="ページの説明文ページの説明文ページの説明文">

og:site_name サイト名

サイト名

<meta property="og:site_name" content="WebRole">

og:image サムネイル画像のURL

コンテンツがシェアされたときに表示されるサムネイル画像のURL

絶対パス

<meta property="og:image" content="https://webrole.net/aaa.png">

X(Twitter)設定

twitter:card X(Twitter)カードの種類

X(Twitter)カードの種類

  • summary … タイトル、説明、サムネイル
  • summary_large_image … タイトル、説明、サムネイル（画像大）
  • app … アプリ
  • player … ビデオ、オーディオ等
<meta name="twitter:card" content="summary_large_image">

twitter:site X(Twitter)ユーザー名

X(Twitter)ユーザー名

Webサイトで利用してるX(Twitter)ユーザー名を「@」マーク込みで記載

<meta name="twitter:site" content="@webrole">

Facebook設定

fb:app_id FacebookアプリID

FacebookアプリID

アプリIDはfacebook for developersで取得

<meta property="fb:app_id" content="xxxxxxxxxxxxxxx">

RELATED JOURNAL