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はThe four required properties for every page areとして、次の4つを挙げています。

記事ページなら、最低限は次のように書きます。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 など）、それ以外は名前空間なしの値です。

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タグ表で必須とされているのは次の項目です。

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

LINE Developersの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の開発者文書の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）の従量課金と使い方でまとめています。

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

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

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

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

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

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

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

デバッガーでタグが読めていないときは、サーバーがクローラーに何を返しているかを見ます。Metaの「Meta 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の違い、React Routerでのmeta出力はReact Routerのmeta・title設定で扱っています。

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へ実行した結果の抜粋（判定部分のみ）です。

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のタグが検索結果の表示要素を決める候補として何度か出てきます。

サイト名の文書は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対策の全体像、SNS側の運用はSNSマーケティングの始め方を参考にしてください。検索エンジンにサイトの実体を伝える設計はエンティティSEOで、商品ページの作り込みはShopify構築の進め方で扱っています。

よくある質問

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年時点】
• SEO対策とは？順位が決まる仕組みと3領域の役割分担・着手順を実務目線で解説
• SNSマーケティングとは？主要SNSの特徴・手法・始め方と外注判断【2026年版】
• CSRとSSRの違いと使い分け｜レンダリング方式を比較して実装で選ぶ