OGP の設定方法（HTML）

OGP（Open Graph Protocol）の設定

サイトが SNS でシェアされた際に表示される画像やタイトルなどを指定できる OGP の基本的な設定方法についての覚書です。prefix 属性や meta タグを使ったメタデータの記述方法、Facebook や Twitter 用の独自の設定方法などについて掲載しています。

更新日：2023年06月12日

作成日：2023年6月7日

OGP とは

OGP は Open Graph Protocol の略です。

Open Graph Protocol は Web ページにそのページについての情報を記述するための（メタデータの使用を標準化するための）プロトコルで、元々は facebook 社により作成されました。

OGP を使用すると、SNS 上（Twitter や facebook など）で Web ページのリンクを投稿して URL が共有（シェア）された際に、指定したタイトルや画像、説明文などが表示されるようになります。

以下は OGP の公式サイト The Open Graph Protocol からの抜粋です。

Open Graph プロトコルを使用すると、Web ページをソーシャルグラフのリッチオブジェクトにすることができます。例えば、これは Facebook で使用され、Web ページが Facebook 上の他のオブジェクトと同じ機能を持つことができるようになります。

因みに OGP の公式サイトの URL（https://ogp.me）は OGP の使用を宣言する prefix 属性の値（og: https://ogp.me/ns#）の URL の先頭部分と同じです。

参考サイト

基本的な OGP の設定方法

OGP の基本的な設定は prefix 属性で OGP の使用を宣言し、head タグ内で meta タグを使って以下のような構造のメタデータ（Metadata）を記述します。

<html prefix="og: https://ogp.me/ns#">
  <head>
    ...
    <meta property="og:title" content="ページのタイトル">
    <meta property="og:type" content="ページの種類">
    <meta property="og:url" content="ページの URL">
    <meta property="og:image" content="ページの画像のURL">
    <meta property="og:description" content="ページの説明">
    <meta property="og:site_name" content="サイト名">
    <meta property="og:locale" content="言語の指定">
    ...
  </head>
...
</html>

prefix 属性

上記の html タグに記述してある prefix="og: http://ogp.me/ns#" は、OGP の meta タグを使用するのに必要な prefix 属性の指定です。

これにより meta タグの property 属性で og というプレフィックスを使用することを宣言しています。

prefix 属性は、html タグまたは head タグに設定することができます。

html タグで設定すればプレフィックスのスコープは html 全体になり、head タグで設定すればスコープは head タグ内になります。

og などのプレフィックスは head タグ内の meta タグで使用するので、head タグに設定しても、html タグに設定しても問題ありません。

html タグに prefix 属性を設定する場合

<html prefix="og: https://ogp.me/ns#">

head タグに prefix 属性を設定する場合

<head prefix="og: https://ogp.me/ns#">

独自のプレフィックス

以下の prefix 属性に指定している値の後半部分の fb: http://ogp.me/ns/fb# は facebook 独自のプレフィックス（fb）を使用する宣言です。

<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb#">

例えば、meta タグで property="fb:app_id" を使って Facebook アプリ ID を設定する場合などでは prefix 属性に追加します。

但し、現在の Facebook のドキュメントを探しても上記の fb: http://ogp.me/ns/fb# の宣言が必要という記載が見つからないので、省略しても問題なさそうです。

Twitter カードの場合は不要

Twitter の場合、独自のプレフィックスの宣言は不要です。以下ドキュメントからの抜粋です。

Open Graphは <html prefix="og: http://ogp.me/ns#"> を介して“og” RDFa Core 1.1 CURIEプレフィックスマッピングを指定することを推奨していますが、Twitter カードや、HTML メタ要素の name 属性の twitter: プレフィックスでの使用には、そのようなマークアップは必要ありません。

Metadata（メタデータ）

head 内に以下のような meta タグに property と content を含むメタデータを記述します。

<meta property="プロパティ名" content="値">

以下は必須のメタデータです。

Basic Metadata
プロパティ名	値（説明）
og:title	ページのタイトル。20文字以内が目安。
og:type	コンテンツ（オブジェクト）のタイプ（ページの種類）。指定しない場合はデフォルトの website になります。Web サイトの場合、トップページでは website を設定し、それ以外の記事などのページでは article を設定することが多いようです Object Types。
og:image	コンテンツがシェアされたときに表示される画像の URL を絶対パスで指定。
og:url	ページの URL を絶対パスで指定。

オプションで以下のメタデータを設定できます。

Optional Metadata
プロパティ名	値（説明）
og:description	ページのコンテンツの簡単な説明（表示するページの要約となる説明文）。80〜110字ぐらいが目安。Facebook と Twitter 両方で全ての文字を納めるには80文字程度。
og:site_name	サイト名
og:locale	リソースのロケール。デフォルトは en_US。日本語とするためには ja_JP を設定。他の言語への翻訳を提供する場合は、追加で og:locale:alternate を使って他の言語を指定可能。
og:audio	このページに付随する音声ファイルへの URL を絶対パスで指定。
og:video	このページを補完するビデオファイルへの URL を絶対パスで指定。

以下は meta タグの設定例です。

<meta property="og:title" content="The Rock">
<meta property="og:type" content="video.movie">
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/">
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg">
<meta property="og:audio" content="https://example.com/bond/theme.mp3">
<meta property="og:description" content="Sean Connery found fame ...中略...">
<meta property="og:locale" content="en_GB">
<meta property="og:locale:alternate" content="fr_FR">
<meta property="og:locale:alternate" content="es_ES">
<meta property="og:site_name" content="IMDb">
<meta property="og:video" content="https://example.com/bond/trailer.swf">

Structured Properties（構造化プロパティ）

一部のプロパティにはオプションで追加のメタデータを指定できるものがあります。これらのプロパティには追加のコロン : が付きます。

og:image プロパティは以下のような構造化プロパティ（structured properties）があります。

og:image プロパティの構造化プロパティ
構造化プロパティ	値（説明）
og:image:url	og:image と同じ
og:image:secure_url	ページが HTTPS を要求する場合に用いる代替 URL
og:image:type	画像の MIME type
og:image:width	画像の幅（ピクセル値）
og:image:height	画像の高さ（ピクセル値）
og:image:alt	画像に含まれる内容の説明 (キャプションではありません)。ページで og:image を指定する場合は、og:image:alt を指定する必要があります。

以下は画像（og:image プロパティ）に構造化プロパティを追加した設定例です。

<meta property="og:image" content="https://example.com/ogp.jpg">
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="400">
<meta property="og:image:height" content="300">
<meta property="og:image:alt" content="A shiny red apple with a bite taken out">

og:video プロパティも og:image プロパティと同じ構造化プロパティを持っています。以下は設定例です。

<meta property="og:video" content="https://example.com/movie.swf">
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="400">
<meta property="og:video:height" content="300">

og:audio プロパティには最初の3つの構造化プロパティーが利用できます（幅や高さはない）。

<meta property="og:audio" content="https://example.com/sound.mp3">
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3">
<meta property="og:audio:type" content="audio/mpeg">

複数のメタデータの指定

タグ（プロパティ）が複数の値を持てる場合は、複数バージョンの同じ meta タグをページに記述することができます。衝突時には、最初のタグが優先されます。※ 複数の og:type は使用できません。

画像（og:image）を複数指定する例

<meta property="og:image" content="https://example.com/rock.jpg">
<meta property="og:image" content="https://example.com/rock2.jpg">

構造化プロパティーを設定する場合は、ルートタグの宣言の後に記述します。別のルートタグが解析されると、それまでの構造化プロパティーは完了したとみなされます。

以下の場合、ページには3つの画像があり、最初の画像は300x300、2つ目の画像の大きさは未指定、最後の画像の高さは1000pxであることを表します。

<meta property="og:image" content="https://example.com/rock.jpg"><!-- ルートタグ -->
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
<meta property="og:image" content="https://example.com/rock2.jpg"><!-- ルートタグ -->
<meta property="og:image" content="https://example.com/rock3.jpg"><!-- ルートタグ -->
<meta property="og:image:height" content="1000">

Object Types（オブジェクトタイプ）

グラフ内にオブジェクトを表示するためには、オブジェクトのタイプを og:type プロパティーを使って指定します。

オブジェクトタイプの設定例

<meta property="og:type" content="website">

以下のオブジェクトタイプが用意されています。

music.song
music.album
music.playlist
music.radio_station
video.movie
video.episode
video.tv_show
video.other
article
book
profile
website

グローバルなオブジェクトタイプは verticals にグループ化されていて、各 vertical は独自の名前空間（namespace）を持ちます。

Music
Video
No Vertical（特定の vertical に該当しないもの）

Facebook 独自の設定

Facebook 独自の設定として、fb:app_id に Facebook アプリ ID を設定することでいいね数などのトラフィックの計測ができるようになります。

アプリ ID はアプリダッシュボードで確認できます

<meta property="fb:app_id" content="アプリID">

Meta for developers ウェブ管理者向けシェア機能ガイド

Twitter 独自の設定

Twitter カードを表示させるには追加で独自の設定が必要です。Twitter カードとは、ツイートに貼られた URL の画像やページタイトルが表示される機能です。

また、Open Graph プロトコルでは、マークアップに property 属性と content 属性を指定しますが、Twitter カードでは name 属性と content 属性で指定します。

カードタイプ（twitter:card）

meta タグの name 属性に twitter:card を指定して、content 属性にカードタイプを設定します。

<meta name="twitter:card" content="カードタイプ">

カードタイプとは Twitter カード上で表示される形式（カードの種類）のことで、次の4種類があります。

カードタイプ	説明
summary	タイトル、説明、サムネイルの一般的な形式で画像のサイズは小さめの正方形。summary
summary_large_image	summary と同じ形式で画像が大きく長方形で表示される。summary_large_image
app	アプリ配布用のカード。app
player	動画やオーディオ系のメディアを表示できるカード。player

通常の Webサイトの場合、カードタイプは summary または summary_large_image を選択します。

※ ページごとにカードタイプを1つだけ設定できます。ページに複数の twitter:card 値が存在する場合は、「最後に」来る値が優先されます。

カードアトリビューション

カードアトリビューション（twitter:site と twitter:creator）は、該当するアカウントを持っている場合に設定します（オプション）。


プロパティ	説明
twitter:site	Web サイト単位で使用している@ユーザー名。
twitter:creator	コンテンツ作成者/著者の@ユーザー名。

<meta name="twitter:site" content="ウェブサイトの@ユーザー名">
<meta name="twitter:creator" content="コンテンツ作成者の@ユーザー名">

Twitter 開発者プラットフォームツイートをカードで最適化する

Twitter Developer Platform: Cards Markup Tag Reference

画像サイズ

Facebook や Twitter の OGP には最適な画像サイズがあります。

Facebook

Facebook では画像の要件としてリンクシェアの中の画像指定に以下が記載されています。

可能な画像の最小サイズは 200x200 ピクセル
画像ファイルのサイズは 8 MB以下
高解像度デバイス上での表示を最適にするには、1200x630 ピクセル以上の画像を使用
大きな画像を伴うリンクページ投稿を表示するには、最低でも 600x315 ピクセルの画像を使用

※ 大きい横長画像で表示させたい場合は、1200x630 px 以上の画像（縦横比 1.91:1）を使用します。

Twitter

Twitter の場合は設定するカードタイプにより最適なサイズが異なります。

カードタイプが summary の場合は正方形で表示され、summary_large_image の場合は横長の長方形で表示されます。


カードタイプ	要件
summary	縦横比： 1:1 最小の画像サイズ： 44x144 ピクセル最大の画像サイズ： 4096x4096 ピクセル画像ファイルのサイズ： 5MB 未満画像タイプ：JPG, PNG, WEBP and GIF
summary_large_image	縦横比： 1.91:1（2:1）最小の画像サイズ： 300x157 ピクセル最大の画像サイズ： 4096x4096 ピクセル画像ファイルのサイズ： 5MB 未満画像タイプ：JPG, PNG, WEBP and GIF

Twitter でカードタイプを「summary_large_image」にして Facebookにも投稿を行う場合には、最適な画像サイズは1.91:1すなわち1200×630pixの画像が推奨されます。

Facebook、Twitter 共通で使用

画像を Facebook、Twitter 共通で使用する場合は、Twitter でカードタイプを summary_large_image にして、縦横比 1.91:1、1200×630ピクセル以上の画像にします。

OGP 設定を確認する方法

OGP が正しい設定になっているかを確認するための以下のような無料のツールがあります。


ツール	概要
シェアデバッガー	Facebook の OGP の設定を確認できる Facebook 公式のツール（要ログイン）
Card Validator	Twitter の OGP の設定を確認できる Twitter 公式のツール（要ログイン）
OGP確認	無料の各 SNS に対応した OGP デバッガー・シミュレーター（ラッコツールズ）
OGP確認ツール	入力したURLを解析し、サイト内の OGP と Twitter カードを表示する無料のツール
OGPチェッカー	指定したページのSNSシェア用のOGPタグとTwitter・Facebookシェア用のOGP画像を確認できる無料のツール（Web ToolBox）

Web Design Leaves