OGP は Open Graph protocol の略で、ページの <head> に書く og: で始まる <meta> タグのことです。URL が SNS やチャットに貼られたとき、そのページのタイトル・説明文・画像をどう表示してほしいかを伝えます。仕様は ogp.me で公開されていて、もともとは Facebook が作り、RDFa を土台にしています。そのため属性は name ではなく property を使います。
いまは Facebook だけでなく、X のカード、LINE のトーク内の URL プレビュー、はてなブックマークのサムネイル、Slack の展開表示もこのタグを読んでいます。ただし、どのタグを読むか、画像の条件、キャッシュの長さはサービスごとに違い、それぞれ別の場所に書かれています。この記事では、仕様の必須タグから始めて、各サービスの公式ドキュメントに書かれている内容を並べ、最後に ZeroTool の Meta タグジェネレーターで日本語ページの OGP を作った出力を確認します。ドキュメントの確認日はすべて 2026-10-02 です。
必須の4つと、一緒に書くことが多いタグ
ogp.me はすべてのページに必要なプロパティとして次の4つを挙げています。
| プロパティ | ogp.me の説明 | 例 |
|---|---|---|
og:title | グラフ上に表示されるオブジェクトのタイトル | 雨の日に行ける都内のカフェ10選 |
og:type | オブジェクトの種類。種類によっては追加のプロパティが必要 | article |
og:image | オブジェクトを表す画像の URL | https://example.jp/ogp/rainy-day.jpg |
og:url | グラフ上で永続的な ID として使われる正規 URL | https://example.jp/cafe/rainy-day/ |
任意のプロパティで推奨されているのは og:description（1〜2文の説明）、og:site_name（サイト全体の名前）、og:locale などです。og:locale は language_TERRITORY の形式で、既定値は en_US です。日本語のページなら ja_JP と明示しておくと、既定値の英語として扱われません。og:type を書かないページは website として扱われます（ogp.me と Facebook のドキュメントの両方に記載があります）。
ブログ記事やニュースには og:type に article を使い、article:published_time（公開日時）、article:modified_time（更新日時）、article:author、article:section、article:tag を足せます。日時は ISO 8601 形式です。
タグの書き方
OGP のタグは <meta property="og:..." content="..."> の形で書きます。ogp.me の例では <html prefix="og: https://ogp.me/ns#"> のように prefix 属性も書かれています。X のカード用タグ（twitter:card など）は name 属性で書き、X のドキュメントは「Twitter カードにはこの prefix の指定は不要」としています。
値の型にも決まりがあります。ogp.me は URL 型を「http:// か https:// を使う有効な URL」と定義しているので、og:image は /ogp/top.jpg のような相対パスではなく、https:// から始まる絶対 URL で書きます。
画像のように複数書けるタグは、同じタグを並べると配列になります。ogp.me には「衝突したときは上にあるタグが優先される」とあり、og:image:width のような構造化プロパティは直前の og:image に属します。仕様の例では、次の書き方で「1枚目は 300×300、2枚目はサイズ不明、3枚目は高さ 1000px」の3枚になります。
<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" />表示させたい画像を先頭に書くこと、og:image:width などは必ず対応する og:image の後に書くことが、この規則から決まります。og:image:alt について ogp.me は「og:image を指定するなら og:image:alt も指定すべき」と書いています。
サービスごとに読まれるタグ
各サービスが公式に書いている内容だけをまとめると次のとおりです。
| サービス | 読むタグ | 書かれていない場合 |
|---|---|---|
| Facebook（Instagram・Messenger も同じクローラー） | og:url・og:title・og:description・og:image・og:type・og:locale・fb:app_id | 独自の推測でタイトル・説明・画像を決める |
| X | twitter:card などの twitter: タグを先に見て、なければ og:title・og:description・og:image・og:image:alt を使う | twitter:card がなく og:type・og:title・og:description があれば summary カードになることがある |
| LINE | og:title・og:description・og:image の3つだけ | タイトルは <title>、説明は description メタタグか本文のテキストを使う |
| はてなブックマーク | エントリーのタイトルは og:title を優先、サムネイルは og:image か Twitter カードの画像 | 概要はページ本文から抽出 |
| Slack | oEmbed、Twitter カード、Open Graph のタグ | — |
出典は Facebook のウェブマスター向けガイド、X の Cards markup、LINE Developers の FAQ「トークの URL プレビューはどのようにして生成されますか？」、はてなブックマークヘルプのサイト管理者向け情報と開発ブログ（2021-11-10）、Slack Robots です。X のカードのドキュメントは 2026-10-02 時点で developer.x.com から削除され、X API の概要ページに転送されるため、Internet Archive の 2026年1〜2月の保存版にリンクしています。
LINE の FAQ は「LINE で使用されるのは上記の3つの OGP タグのみ」と明記しています。og:site_name や og:image:alt を書いても LINE のプレビューには出ません。
はてなブックマークは 2021年11月のお知らせで「og:title が設定されていればそちらを優先する」ようになりました。それまでは <title> 要素かユーザーが設定したタイトルでした。また、ページの meta タグで noindex・noarchive・nosnippet のいずれかを指定すると、エントリーページに概要とサムネイルを載せない、とヘルプに書かれています。検索に出したくないページに noindex を付けると、はてブのサムネイルも消えるということです。
og:title にサイト名を入れるか
日本語のサイトでは <title> を「記事タイトル｜サイト名」の形にすることが多く、そのまま og:title にも入れているページをよく見かけます。Facebook のガイドは og:title を「サイト名などのブランドを含まない記事のタイトル」と説明していて、サイト名は og:site_name に分けることを想定しています。
一方、はてなブックマークは og:title を優先して採用するので、og:title からサイト名を外すと、はてブのエントリーのタイトルにもサイト名が出なくなります。どちらを選ぶかはサイトの方針次第ですが、<title> と og:title は別々に決められる、という点は押さえておくと迷いません。
Google 検索は、タイトルリンクを作るときの材料の一つとして og:title を使います（タイトルリンクのドキュメントでは <title>、見出し、og:title など9種類の情報源が挙がっています）。サイト名の表示には WebSite 構造化データが最も重要で、og:site_name も考慮される、とサイト名のドキュメントにあります。
日本語ページの OGP を生成した例
Meta タグジェネレーターに次の値を入れました。タイトルはサイト名付き、Language は ja、og:type は article、og:locale は ja_JP です（viewport のチェックは外し、Schema.org は「なし」）。
<title>雨の日に行ける都内のカフェ10選｜週末さんぽ帖</title>
<meta name="description" content="渋谷・吉祥寺・清澄白河で、駅から濡れずに行けるカフェを10軒紹介します。電源とWi-Fiの有無も載せました。">
<link rel="canonical" href="https://example.jp/cafe/rainy-day/">
<meta name="robots" content="index, follow">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="article">
<meta property="og:title" content="雨の日に行ける都内のカフェ10選｜週末さんぽ帖">
<meta property="og:description" content="渋谷・吉祥寺・清澄白河で、駅から濡れずに行けるカフェを10軒紹介します。電源とWi-Fiの有無も載せました。">
<meta property="og:url" content="https://example.jp/cafe/rainy-day/">
<meta property="og:site_name" content="週末さんぽ帖">
<meta property="og:image" content="https://example.jp/ogp/rainy-day.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="雨の窓越しに見えるカフェの店内">
<meta property="og:locale" content="ja_JP">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@sanpocho">
<meta name="twitter:title" content="雨の日に行ける都内のカフェ10選｜週末さんぽ帖">
<meta name="twitter:description" content="渋谷・吉祥寺・清澄白河で、駅から濡れずに行けるカフェを10軒紹介します。電源とWi-Fiの有無も載せました。">
<meta name="twitter:image" content="https://example.jp/ogp/rainy-day.jpg">この出力から分かるツールの動きは次のとおりです。
- 「タイトル」欄の文字列は
<title>・og:title・twitter:titleの3か所にそのまま入ります。og:titleからサイト名を外したいときは、コピーしたあとでog:titleの行だけを書き換えます。 - 「正規 URL」欄は
<link rel="canonical">とog:urlの両方に使われます。空欄にすると両方とも出力されず、OGP の必須プロパティが1つ欠けます。 og:image:width・og:image:height・og:image:altは画像 URL があるときだけ、og:imageの直後に出力されます。twitter:imageは Twitter 用の画像を別に入れない限りog:imageと同じ URL になります。X はtwitter:タグがなければ OGP のタグを使うので、twitter:titleなどの重複行は省いてもかまいません。twitter:cardは大きい画像のカードにするために必要です。<html prefix="og: ...">は<html>要素の属性なので、このツールの出力（<head>に貼るブロック）には含まれません。
タイトルと説明の文字数カウンター（60 と 160）は JavaScript の文字列の長さを数えているので、全角も半角も1文字です。この例のタイトルは 23 文字、説明は 54 文字です。Google はスニペットのドキュメントで「説明の長さに上限はなく、検索結果では必要に応じて、たいていは端末の幅に合わせて切り詰める」と書いています。切れる位置は文字数ではなく表示幅で決まり、全角文字は半角より幅を取るので、カウンターは目安として使ってください。X の Cards markup には twitter:title は最大 70 文字、twitter:description は最大 200 文字とあります。
右側のプレビュー（Google・Facebook・Twitter・Discord）はツールが入力から描いた見本で、各サービスの実際の表示とは別物です。プレビューを描くために、ブラウザーは入力した画像 URL を読み込みます。タグの内容そのものはどこにも送信されません。
OGP 画像のサイズと形式
画像の条件は、Facebook と X で数字が違います。
| Facebook（リンクシェアの画像） | X の summary_large_image（保存版） | |
|---|---|---|
| 縦横比 | 1.91:1 にできるだけ近く | 2:1 |
| 最小 | 200×200（600×315 未満は小さく表示） | 300×157 |
| 推奨・最大 | 1200×630 以上を推奨 | 最大 4096×4096 |
| ファイルサイズ | 8 MB 以下 | 5 MB 未満 |
| 形式 | og:image:type は image/jpeg・image/gif・image/png | JPG・PNG・WEBP・GIF（GIF は1フレーム目のみ）、SVG は非対応 |
1200×630 は縦横比 1.905 で Facebook の推奨に合いますが、X の 2:1 とは一致しません。1枚の画像を両方で使うなら、端が少し切れても困らないように、文字やロゴは中央寄りに置くのが無難です。X の summary カード（小さいほう）は 1:1、最小 144×144 で、どの環境でも正方形に切り抜かれる、とドキュメントにあります。
Facebook は、og:image:width と og:image:height を書いておけば、画像を非同期にダウンロードして処理する前にプレビューを描ける、と説明しています。書かない場合、最初にシェアした人には画像が出ないことがあります。
反映されないときの確認とキャッシュ
OGP を直したのに古いプレビューのままのときは、まずクローラーにどう見えているかを確認します。Facebook のクローラーのページには、クローラーと同じヘッダーでページを取得する curl コマンドが載っています。
curl -s --compressed -H "Range: bytes=0-524288" -H "Connection: close" \
-A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" \
"https://zerotool.dev/ja/tools/meta-tag-generator/" \
| grep -oE '(property|name)="(og|twitter):[a-z_:]+"'property="og:site_name"
property="og:title"
property="og:description"
property="og:url"
property="og:image"
property="og:type"
name="twitter:card"
name="twitter:title"
name="twitter:description"
name="twitter:image"このサイト自身のページには必須の4つはありますが、og:image:width・og:image:height・og:image:alt は出していません。ブラウザーでは見えていても、ログイン画面やボット対策でクローラーだけが弾かれている場合は、ここで違いが分かります。Facebook はページの先頭 1 MB までに OGP のタグがないと読まず、サーバーが gzip と deflate に対応していることも求めています。JavaScript であとから挿入したタグは、取得した HTML には含まれません。
確認できたら、各サービスのキャッシュを更新します。
- Facebook: シェアデバッガーに URL を入れると再取得されます。画像は画像の URL ごとにキャッシュされるので、画像を差し替えるときは新しい URL にします。古い投稿が参照しているので、古い画像は消さないように、とも書かれています。
- X: カードのマークアップがあるページは、投稿されてから 7 日間キャッシュされます（Getting started の保存版）。X のクローラー（Twitterbot）は robots.txt に従うので、robots.txt でページか画像をブロックしているとカードもサムネイルも出ません。
- LINE: FAQ にはキャッシュの期間も消し方も書かれていません。同じ FAQ には「LINE で送る」ボタンでシェアしたとき、URL によってはプレビューが出ないことがあり、その場合も URL 自体はシェアできる、とあります。
- Slack: 取得結果は約 30 分キャッシュされます。Slack は robots.txt には従いません。
よくある失敗
- 画像を相対パスで書く。 URL 型は
http://かhttps://で始まる必要があります。 - SVG を og:image にする。 X は非対応と明記していて、Facebook の
og:image:typeも JPEG・GIF・PNG だけです。 - og:url をトップページの URL のままにする。 Facebook ではシェア数や「いいね！」が
og:urlに集計されるので、どの記事をシェアしてもトップページとして数えられます。 - 画像のサイズ指定が実際の画像と違う。
og:image:widthとog:image:heightはクローラーが画像を取得する前に枠を決めるための値なので、違う数字を書くと違う形で枠が作られます。 - noindex のページでサムネイルを期待する。 はてなブックマークは
noindex・noarchive・nosnippetがあるページの概要とサムネイルを載せません。
参考資料
- The Open Graph protocol
- Meta: A Guide to Sharing for Webmasters、Meta Web Crawlers、Images in Link Shares
- X: Cards markup、Summary card with large image、Getting started（いずれも上の表と本文の保存版リンク）
- LINE Developers FAQ
- はてなブックマーク: サイト管理者向け情報、2021年9月〜10月の機能修正・改善
- Slack Robots
- Google 検索セントラル: タイトルリンク、サイト名、メタ ディスクリプション
関連ツール: 同じ <head> に入れるアイコンは Favicon ジェネレーター、X のクローラーが取得できるかを左右するクロール設定は Robots.txt ジェネレーターで作れます。