---
title: "OGPタグの種類と書き方｜og:typeの値一覧とproductの扱い・画像サイズ・確認方法"
url: "https://www.issoh.co.jp/column/details/4899/"
published: 2025-01-20
updated: 2026-10-30
categories: ["SEO"]
publisher: "株式会社一創"
---

# OGPタグの種類と書き方｜og:typeの値一覧とproductの扱い・画像サイズ・確認方法

OGP（Open Graph protocol）は、URLがSNSやチャットで共有されたときに表示されるタイトル・説明文・画像を、ページ側から指定するためのメタタグの仕様です。元はFacebookが作り、仕様は `ogp.me` で公開されています。この記事では、仕様が必須とする4つのタグ、`og:type` に書ける値の一覧、検索でよく聞かれる `og:type="product"` の扱い、SNSごとの画像サイズ、反映されないときの確認手順を、ogp.meとMeta・X・Googleの公式文書で確かめた内容で整理します。

## まとめ：OGPタグ設定の要点

- ogp.meが全ページに必須とするのは **`og:title`・`og:type`・`og:image`・`og:url` の4つ**。説明文の `og:description` は任意扱い。
- `og:type` はトップページや一覧なら `website`、記事なら `article` で足りる。指定が無いページは `website` として扱われる。
- **`og:type="product"` はogp.meのグローバル型に載っていない値**。Metaのカタログ用タグ表でも必須ではないが、**Pinterestの商品リッチピンをOpen Graph形式で設定する場合には必須**で、ShopifyのDawnテーマも商品ページで出力している。
- 画像は **1200×630px（1.91:1）**で作ればFacebookの推奨を満たす。Xの大きいカード・Google Discoverとは比率がずれるので、重要な要素は中央に寄せる。
- 変更が反映されないときはキャッシュを疑う。Facebookは**シェアデバッガー**で再取得させ、画像を差し替えるときは画像URLごと変える。

## OGPの仕組みと必須4タグ

OGPは、ページの `<head>` に `property="og:〜"` 形式の `<meta>` タグを置くだけの仕組みです。SNSのクローラーは共有されたURLを取得し、このタグを読んでカード（リンクプレビュー）を組み立てます。OGPが無いページでも何かしら表示されますが、Metaの文書は、タグが無い場合のクローラーはuses internal heuristics to make a best guess（内部の推定で最善の推測をする）と書いており、意図しない画像や文言が選ばれます。

### ogp.meが定める必須タグとheadへの書き方

[ogp.me](https://ogp.me/)はThe four required properties for every page areとして、次の4つを挙げています。

| タグ         | 中身       | 書き方の注意             |
| ---------- | -------- | ------------------ |
| `og:title` | 共有時のタイトル | Metaはサイト名を含めない形を推奨 |
| `og:type`  | ページの種類   | 値の一覧は次章            |
| `og:image` | 代表画像のURL | 絶対URLで書く           |
| `og:url`   | 正規URL    | 計測用パラメータを除く        |

記事ページなら、最低限は次のように書きます。`prefix` 属性はogp.meの例に倣ったもので、RDFaとして正しく宣言する書き方です。

```
<html lang="ja" prefix="og: https://ogp.me/ns#">
<head>
  <meta property="og:title" content="OGPタグの種類と書き方">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/blog/ogp/">
  <meta property="og:image" content="https://example.com/img/ogp-1200x630.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="OGPタグの種類を示した図">
  <meta property="og:description" content="必須4タグとog:typeの値一覧を整理">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:locale" content="ja_JP">
</head>
```

`og:url` は、いいねやシェア数を集計する単位でもあります。Metaの文書は、セッション変数や計測用パラメータを含まないundecorated URLを指定するよう求めています。UTM付きのURLを入れると、同じ記事のシェアが別々のURLに分散します。

### 任意タグとog:image:altの扱い

必須4つ以外は任意ですが、表示の質に効くものがあります。ogp.meで任意とされているのは `og:description`・`og:site_name`・`og:locale`（既定は `en_US`）・`og:locale:alternate`・`og:determiner`・`og:audio`・`og:video` です。

見落とされやすいのが `og:image:alt` です。ogp.meはIf the page specifies an og:image it should specify og:image:alt.と書いており、画像を指定するなら代替テキストも書くべきという立場です。後述のチェックでは、python.org・Allbirds・Kithのトップや商品ページが `og:image:alt` を出力していませんでした。大手サイトでも抜けやすい項目です。

同じタグを2回書いた場合、ogp.meはThe first tag (from top to bottom) is given preference during conflicts.と定めています。テーマとプラグインが両方OGPを出力していると、上に書かれた側が採用されます。

## og:typeの値一覧と使い分け

`og:type` に書ける値は、ogp.meの「Object Types」にまとまっています。コミュニティで合意された型は「グローバル型」として一覧に載り、音楽・動画は名前空間付きの値（`music.song` など）、それ以外は名前空間なしの値です。

| 値                  | 向いているページ            | 追加できる主なプロパティ                |
| ------------------ | ------------------- | --------------------------- |
| `website`          | トップ・一覧・サービス紹介       | なし（基本タグのみ）                  |
| `article`          | ブログ・ニュース・コラム        | `article:published_time` ほか |
| `book`             | 書籍の紹介               | `book:isbn`・`book:author`   |
| `profile`          | 人物のプロフィール           | `profile:first_name` ほか     |
| `music.song` など4種  | 楽曲・アルバム・プレイリスト・ラジオ局 | `music:duration` ほか         |
| `video.movie` など4種 | 映画・エピソード・番組・その他動画   | `video:actor` ほか            |
| `payment.link`     | 決済リンク（ベータ）          | `payment:amount` ほか         |

`payment.link` は、仕様リポジトリ（facebook/open-graph-protocol）に2025年6月25日のコミット「Introduce payment beta tags」で追加された型で、ogp.meには「Beta only」と明記されています。

迷ったら、記事は `article`、それ以外は `website` を選べば十分です。ogp.meはAny non-marked up webpage should be treated as og:type website.としており、Metaの文書も未指定時の既定を `website` としています。

### articleで使える追加プロパティ

`og:type="article"` にすると、`article:` 名前空間のプロパティを足せます。ogp.meが定めるのは次の6つです。

- `article:published_time`／`article:modified_time`／`article:expiration_time`（いずれもISO 8601の日時）
- `article:author`（profileの配列）・`article:section`（カテゴリ名）・`article:tag`（タグの配列）

### og:type productはogp.meの仕様に無い値

検索で多い「og:type product」の結論から書くと、**`product` はogp.meのグローバル型一覧に載っていません**。ogp.meのページ本文に「product」という語は1回も出てきません（2026年10月1日に取得して確認）。

それでも実際の商品ページでは広く使われています。ShopifyのDawnテーマ（2026年8月10日公開のv16.0.0時点）の `snippets/meta-tags.liquid` は、商品ページで `og_type` を `'product'` に切り替え、価格を `og:price:amount` と `og:price:currency` で出力します。下のチェックでも、Allbirdsの商品ページは `product`、Kithのコレクションページは `product.group` を出力していました。

では商品情報をMetaに渡すときに `og:type` が必要かというと、Metaのカタログ向け文書「Microdata Tags」のOpenGraph例は `og:type` を1行も含んでいません。カタログのリファレンスにあるOpenGraphタグ表で必須とされているのは次の項目です。

| 区分       | タグ                                                         |
| -------- | ---------------------------------------------------------- |
| 基本       | `og:title`・`og:description`・`og:url`・`og:image`            |
| 価格       | `product:price:amount`・`product:price:currency`            |
| 価格（重複記載） | `og:price:amount`・`og:price:currency`                      |
| 商品属性     | `product:brand`・`product:availability`・`product:condition` |
| 識別子      | `product:retailer_item_id`                                 |

表には `product:price:*` と `og:price:*` の両方が必須として並んでいます。しかもこのタグはMetaピクセルと組み合わせて使う前提で、文書には「マイクロデータを更新しても、ピクセルが少なくとも1回発火するまでコマースマネージャの商品情報は更新されない」という警告があります。判断としては、**`og:type="product"` が効くのは読み手が決まっている場合だけ**です。Metaのカタログに載せたいなら価格・在庫・識別子のタグとピクセルを、Pinterestの商品リッチピンにしたいなら `og:type="product"` と価格タグを（次章）、Googleの検索結果に価格を出したいならschema.orgの `Product` を[構造化データ](/column/details/16575/)として、それぞれ別に書きます。1つのタグで全部に効くわけではありません。

### 独自の値を書いたときの扱い

ogp.meは、グローバル型以外の値を `my_namespace:my_type` のような名前空間付きの形（CURIE）で書くよう定めています。GitHubのトップページは `og:type="object"` を出力しており、これもグローバル型にはありません。

注意したいのは、Metaの文書にあるA link’s object type can’t be changed once the link is used in a story.という制約です。一度シェアされたURLは、あとから `og:type` を変えてもFacebook上の型は変わりません。公開前に決めておくべき項目です。

## og:imageの画像サイズと差し替え方

OGP画像は、プラットフォームごとに推奨比率が違います。1枚で済ませるなら、Facebookの推奨に合わせて作り、他のサービスでトリミングされても読める構図にします。

| 表示先                | 推奨サイズ・比率            | 制約                |
| ------------------ | ------------------- | ----------------- |
| Facebook           | 1200×630px以上・1.91:1 | 最小200×200px・8MB以下 |
| Facebook（大きい表示の下限） | 600×315px           | これ未満は小さく表示        |
| Google Discover    | 幅1200px以上・16:9      | 30万画素超・大画像プレビュー許可 |

Facebookの値はMetaの「[Images in Link Shares](https://developers.facebook.com/docs/sharing/webmasters/images/)」、Discoverの値はGoogle検索セントラルのDiscoverの文書によります。Googleは `og:image` をDiscoverのサムネイル選択に使う候補として挙げ、サイトロゴのような汎用画像や文字の多い画像を避けるよう書いています。OGP画像にタイトル文字を大きく載せる作り方は、SNS向けには定番ですが、Discoverでは不利に働きうるということです。

画像を差し替えるときは、**同じURLのまま中身だけ上書きしない**でください。MetaはImages are cached based on the URL and won’t be updated unless the URL changes.と書いており、画像はURL単位でキャッシュされます。`ogp-v2.png` のようにファイル名を変え、古い画像は既存の投稿が参照しているので消さずに残す、というのがMetaの指示です。また `og:image:width` と `og:image:height` を書いておくと、最初のシェアの時点で画像が表示されやすくなります。

## LINE・Slack・Pinterest・Xでの読まれ方

OGPを読むのはFacebookだけではありません。ただし、どのタグを使うかはサービスごとに違います。公式文書で確認できた範囲を並べます。

| サービス      | 読むタグ                                         | 補足・代替情報                   |
| --------- | -------------------------------------------- | ------------------------- |
| LINE      | `og:title`・`og:description`・`og:image` の3つだけ | title要素・description・本文で代用 |
| Slack     | OGPとXのカード用タグ                                 | アプリ連携が無いドメインで適用           |
| Pinterest | リッチピン用のOGPかschema.org                        | リッチピンにならない                |
| X         | `twitter:card` ほか                            | 現行の公式文書に記載なし              |

### LINEとSlackが参照するタグ

[LINE DevelopersのFAQ](https://developers.line.biz/en/faq/)は、URLプレビューに使うタグを `og:title`・`og:description`・`og:image` の3つと明記し、URL previews will not include information contained in any other OGP tags.と書いています。`og:type` や `og:site_name` を整えても、LINEの表示は変わりません。タグが無い場合は、タイトルにtitle要素、説明にdescriptionタグか本文の文字列が使われます。

SlackのAPI文書は、ドメインにSlackアプリの連携が無い場合の「classic」な展開について、Slack crawls the URL, looks for common OpenGraph and X (formerly known as Twitter) Card metadataと説明しています。社内チャットでの見え方を整えたい場合も、OGPを書いておけば足ります。

### Pinterestの商品リッチピン：Open Graph形式の必須タグ

前章で `product` はogp.meの仕様外と書きましたが、この値を必須として読むサービスがあります。Pinterestの商品リッチピン（Product Pins）です。Pinterestの[開発者文書](https://developers.pinterest.com/docs/web-features/product-rich-pins/)のOpen Graph表は、`og:type` についてMust take the value of product or og:productと定め、`og:title`・`product:price:amount`・`product:price:currency` とあわせて必須にしています。

- Open Graph形式は**1ページに商品が1つの場合だけ**使える（Open Graph format only works for pages with a single product.）。一覧ページはschema.org形式で書く。
- リッチピンはArticle・Product・Recipeの3種類で、複数のメタデータがあるとProduct、Recipe、Articleの順に優先される。
- リッチピンにしたくないページは `<meta name="pinterest-rich-pin" content="false">` で除外できる。

同じ文書にはIf you are using a Shopify website, then your page already has the correct metadataとあり、Dawnの出力はこの条件に沿っています。Pinterestからの流入を狙うECサイトなら、`og:type="product"` と価格タグは消さずに残します。

### Xのカード用タグの現状

Xでの見え方は `twitter:card` などXのカード用タグで指定します。今回のチェックでも、github.comとXの開発者文書サイト（docs.x.com）は `twitter:card="summary_large_image"` を出力していました。

注意したいのは、マークアップ仕様の一次情報が見当たらなくなっている点です。旧 `developer.x.com` のカード仕様ページは `docs.x.com/overview` へ転送され、2026年10月1日に取得した `docs.x.com` の全文（`llms-full.txt`、約4.8MB）には `twitter:card` も `summary_large_image` も1回も出てきませんでした。カードは開発者ポリシーに利用ルールとして残っているだけです。OGPとの優先関係や画像の上限について、現時点で公式文書を根拠に断定できる記述はありません。`twitter:card` を1行書いたうえで、実際の投稿画面のプレビューで確かめるのが確実です。X APIの利用条件は[X API（旧Twitter API）の従量課金と使い方](/tech/details/17501/)でまとめています。

## OGPの確認方法とキャッシュの更新

OGPを設定したのに反映されない原因は、ほとんどが「タグがクローラーに見えていない」か「古い内容がキャッシュされている」のどちらかです。順に切り分けます。

### シェアデバッガーでの確認と再取得

Facebook向けの確認には、Metaの**シェアデバッガー**（`developers.facebook.com/tools/debug/`）を使います。URLを入れると、クローラーが読んだタグと警告が表示され、同時に再取得（スクレイプ）も行われます。

キャッシュの更新周期は、Metaの文書の中で記述が割れています。「[Changing Link Data](https://developers.facebook.com/documentation/sharing/webmasters/getting-started/change-link)」はupdating your link metadata automatically every 30 days（30日ごとに自動更新）と書き、「Best Practices」はシェアデバッガーをthe standard 24 hour update periodより頻繁に更新したいときに使うよう書いています。どちらにしても、変更直後に反映させたいならデバッガーで再取得させるのが確実です。同じ文書によると、タイトルはいいね・シェア・コメントが50件に達すると変更できなくなります。

シェア済みの投稿は、メタデータを更新しても古い表示のまま残ります。Metaの文書は、更新後のデータが使われるのは新しいシェアからだとしています。

### curlによるクローラー向け応答の確認

デバッガーでタグが読めていないときは、サーバーがクローラーに何を返しているかを見ます。Metaの「[Meta Web Crawlers](https://developers.facebook.com/docs/sharing/webmasters/web-crawlers/)」には、クローラーのリクエストを再現するコマンドが載っています。

```
curl -v --compressed -H "Range: bytes=0-524288" -H "Connection: close" \
  -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" \
  "https://example.com/blog/ogp/"
```

同じ文書は、クローラーの条件として次を挙げています。

- サーバーが **gzip と deflate** の圧縮に対応していること
- OGPのタグが**HTMLの先頭1MB以内**にあること（それより後ろは切り捨てられる）
- 数秒以内に取得できること
- WAFやbot対策で `facebookexternalhit` を弾いていないこと（UAかIPで許可リストに入れる）

このcurlの結果にタグがなければ、HTTPステータスとリダイレクト先を確認してください。例のRangeは先頭512KiBだけを要求するため、タグの欠落は最終URLのHTML全体でも確かめます。JavaScriptでheadを書き換えるSPAでよく起きるので、OGPはサーバーが返す最初のHTMLに含めます。描画方式の選び方は[CSRとSSRの違い](/tech/details/5895/)、React Routerでのmeta出力は[React Routerのmeta・title設定](/tech/details/7618/)で扱っています。

### Pythonによる必須タグと型のチェック

複数ページをまとめて確かめたいときは、以下をogp\_check.pyとして保存し、端末で `python3 ogp_check.py "https://example.com/"` のように確認対象のURLを1つ渡して実行します。Facebookのクローラーと同じUAで先頭1MBを取得し、必須4タグの有無、`og:image:alt` の欠落、ogp.meのグローバル型以外の `og:type` を報告します。同じキーが複数あれば仕様どおり先頭を採用します。

```
import sys, urllib.request
from html.parser import HTMLParser
from urllib.parse import urljoin

UA = "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)"
REQUIRED = ["og:title", "og:type", "og:image", "og:url"]

class MetaCollector(HTMLParser):
    def __init__(self):
        super().__init__()
        self.tags = []
    def handle_starttag(self, tag, attrs):
        if tag != "meta":
            return
        a = dict(attrs)
        key = a.get("property") or a.get("name")
        if key and (key.startswith("og:") or key.startswith("twitter:")):
            self.tags.append((key, a.get("content", "")))

def fetch(url):
    req = urllib.request.Request(url, headers={"User-Agent": UA, "Range": "bytes=0-1048575"})
    with urllib.request.urlopen(req, timeout=15) as r:
        return r.geturl(), r.read(1048576).decode("utf-8", "ignore")

url = sys.argv[1]
final_url, body = fetch(url)
p = MetaCollector()
p.feed(body)
first = {}
for k, v in p.tags:
    first.setdefault(k, v)          # 同じキーが複数あれば先頭を採用
    print(f"{k:24} {v[:70]}")
print("---")
for k in REQUIRED:
    print(f"{k:24} {'OK' if first.get(k) else 'MISSING'}")
img = first.get("og:image", "")
if img and not img.startswith(("http://", "https://")):
    print("og:image is relative ->", urljoin(final_url, img))
if img and not first.get("og:image:alt"):
    print("og:image:alt MISSING")
GLOBAL = {"website", "article", "book", "profile", "payment.link"}
t = first.get("og:type", "website")
if t not in GLOBAL | {"music.song", "music.album", "music.playlist", "music.radio_station", "video.movie", "video.episode", "video.tv_show", "video.other"}:
    print("og:type is not a global type in ogp.me:", t)
```

2026年10月1日にPython 3.9.6で5つのURLへ実行した結果の抜粋（判定部分のみ）です。

| URL           | og:type         | 指摘                |
| ------------- | --------------- | ----------------- |
| ogp.me        | `website`       | なし                |
| python.org    | `website`       | `og:image:alt` 欠落 |
| github.com    | `object`        | グローバル型以外          |
| Allbirds商品ページ | `product`       | alt欠落・グローバル型以外    |
| Kithコレクションページ | `product.group` | alt欠落・グローバル型以外    |

5件とも必須4タグは揃っていました。python.orgの画像は200×200pxのアイコン（画像を取得して確認）で、Facebookの最小値は満たすものの、大きい表示の下限600×315pxには届きません。必須タグが揃っていても見栄えの差はここで出ます。

## WordPressでOGPを出力するときの注意

WordPressでは、テーマかSEOプラグインがOGPを自動出力するのが一般的です。自分でheadにタグを足す前に、まずページのソースで `og:` を検索し、すでに出力されていないかを見てください。

- **二重出力**：テーマとプラグインの両方が出力すると、仕様上は先に書かれたほうが採用される。意図した側が上に来るとは限らないので、片方の出力を止める。
- **記事ごとの画像**：アイキャッチを `og:image` に使う設定が多い。アイキャッチ未設定の記事は既定画像（ロゴ等）になりやすく、Googleが避けるよう求める汎用画像に当たる。
- **キャッシュ系プラグインとWAF**：`facebookexternalhit` をbotとして遮断していないかを、前章のcurlで確かめる。

## OGPとSEOの関係：Googleが読むOGPタグ

OGPはSNSでの表示のための仕様ですが、Google検索セントラルの文書にも、OGPのタグが**検索結果の表示要素を決める候補**として何度か出てきます。

| Googleの文書           | 使われるタグ         | 位置づけ              |
| ------------------- | -------------- | ----------------- |
| タイトルリンク             | `og:title`     | title要素・h1などと並ぶ候補 |
| サイト名                | `og:site_name` | WebSite構造化データが最優先 |
| Google画像検索・Discover | `og:image`     | プレビュー画像の指定方法の1つ   |

[サイト名の文書](https://developers.google.com/search/docs/appearance/site-names)はOur site name system will also consider content in og:site\_nameとしたうえで、WebSite structured data is most importantと書いています。つまり `og:site_name` は補助で、希望するサイト名をGoogleに伝えるには、トップページのWebSite構造化データを整えます。ただし、指定した名前の表示は保証されません。タイトルリンクも同様で、`og:title` と `<title>` が大きく食い違っていると、Googleがどちらを採るか読めなくなります。両者は揃えておくのが安全です。

検索側の施策全体は[SEO対策の全体像](/column/details/3627/)、SNS側の運用は[SNSマーケティングの始め方](/column/details/15408/)を参考にしてください。検索エンジンにサイトの実体を伝える設計は[エンティティSEO](/column/details/13800/)で、商品ページの作り込みは[Shopify構築の進め方](/column/details/17106/)で扱っています。

## よくある質問

### OGPとは何の略ですか？

Open Graph protocol（オープングラフプロトコル）の略です。Facebookが作った仕様で、ページの `<head>` に `og:` で始まるメタタグを書くと、SNSで共有されたときのタイトル・説明文・画像を指定できます。

### og:typeはwebsiteとarticleのどちらにすればよいですか？

ブログ記事・ニュース・コラムなど個別の記事は `article`、トップページ・カテゴリ一覧・サービス紹介ページは `website` にします。指定しなかったページは `website` として扱われます。

### og:type productを書いてもよいですか？

書いて問題ありません。`product` はogp.meのグローバル型には無い値ですが、Pinterestの商品リッチピンをOpen Graph形式で設定する場合は `og:type` に `product` か `og:product` を必須としています。一方、Metaのカタログ用タグ表では必須項目に `og:type` は無く、価格・在庫・識別子のタグが必要です。

### OGP画像のサイズは何pxにすればよいですか？

1200×630px（比率1.91:1）が基準で、Facebookの推奨寸法を満たします。ファイルサイズの上限8MBは寸法とは別の条件なので、書き出した画像の容量も確認してください。他のサービスでトリミングされても読めるよう、文字やロゴは中央に寄せます。

### OGPを変更したのに反映されないのはなぜですか？

SNS側に古い内容がキャッシュされているのが主な原因です。Facebookはシェアデバッガーで再取得させ、画像は別のURLで差し替えます。デバッガーでもタグが読めない場合は、クローラーと同じUAでcurlを実行し、サーバーがタグを返しているかを確かめます。

## 関連記事

- [構造化データとは？SEO効果とJSON-LD実装・型の選び方【2026年時点】](/column/details/16575/)
- [SEO対策とは？順位が決まる仕組みと3領域の役割分担・着手順を実務目線で解説](/column/details/3627/)
- [SNSマーケティングとは？主要SNSの特徴・手法・始め方と外注判断【2026年版】](/column/details/15408/)
- [CSRとSSRの違いと使い分け｜レンダリング方式を比較して実装で選ぶ](/tech/details/5895/)

---

出典: [OGPタグの種類と書き方｜og:typeの値一覧とproductの扱い・画像サイズ・確認方法](<https://www.issoh.co.jp/column/details/4899/>)（株式会社一創）