OGPとは、SNSなどでURLが共有されたときに、ページの題名・説明・画像などを伝える設定のことです。正式にはOpen Graph protocolといい、HTMLのheadへmeta要素を置いて指定します。
自社の製品ページと技術記事を一つずつ選び、共有時に何のページか伝わるかを確認してください。トップの画像がすべての記事へ出る、製品と違う写真が出る、といった問題は、投稿文を書き直す前にページの設定を調べます。
共有された後、何を伝える？
たとえば、樹脂部品のヒケを扱う技術記事を営業が共有する場面です。題が会社名だけ、画像が工場の外観だけなら、受け取った人は何の疑問を解ける記事か分かりません。これは設定を考えるための例です。
OGPには、そのURLの内容を表す題と画像を入れます。製品ページなら対象の製品、記事なら扱う課題を伝えます。本文にない性能や、条件を省いた対応範囲を、共有画像だけで約束しないようにします。
Metaの共有設定の説明は、タグが無いと、クローラーが内部の判断で題や画像を推測すると説明しています。意図した情報を指定するための設定であり、共有先の画面を自由に設計する機能ではありません。
必要なタグは、どこへ書く？
OGPの基本仕様は、head内に置く基本項目として、次の4つを挙げています。記事ごとに値を変え、全ページへ同じトップ情報を複製しないようにします。
| 項目 |
伝える内容 |
| og:title |
そのページの題 |
| og:type |
記事などの種類 |
| og:image |
内容を表す画像URL |
| og:url |
ページの正規URL |
説明文はog:descriptionで追加します。日本語のページならog:localeへja_JPを指定できます。これらは基本の4項目とは別の追加情報です。
記事ページに入れる例です。ドメイン、画像、題と説明は説明用なので、実際の公開内容へ置き換えます。
<meta property="og:title"
content="ヒケの原因と相談前の確認">
<meta property="og:type"
content="article">
<meta property="og:url"
content="https://example.com/guide/">
<meta property="og:image"
content="https://example.com/img/hike.png">
<meta property="og:description"
content="設計と成形の条件を整理します。">
<meta property="og:locale"
content="ja_JP">
<meta property="og:image:width"
content="1200">
<meta property="og:image:height"
content="630">
<meta property="og:image:alt"
content="樹脂部品のヒケを示す模式図">
propertyが項目の名前、contentが値です。画像の寸法は、指定したファイルの実際の幅と高さに合わせます。タグへ数字を入れただけでは画像は変わりません。
OGPの仕様は、画像の説明について次のように記しています。
A description of what is in the image (not a caption).
画像内に何があるかを説明する項目です。投稿を宣伝する文ではなく、図や写真の内容を書きます。上の模式図の説明も、その考え方に沿った例です。
画像は、どの大きさにする？
OGPの共通仕様には、すべての共有先に共通する必須の画像寸法はありません。幅と高さを伝える項目はありますが、表示の比率や切り抜きは共有先ごとに確認します。
Metaの画像の公式案内では、高精細な画面向けに幅1080px以上を案内しています。同資料には広告やゲーム向けの条件も含まれます。そこにある数字を、すべての通常投稿の必須寸法へ広げて使いません。
上のコードは、横1200px・縦630pxの画像を用意する制作例です。FacebookやXが、必ずこの比率のまま全面を表示するという意味ではありません。別の比率で切り抜かれても、製品や図の意味が残るように作ります。
題やロゴを端へ寄せすぎず、文字は小さな表示でも読める量へ絞ります。細かい仕様表を一枚の画像にしても、共有画面では読み取れません。共有画像では話題を伝え、条件や数値の詳細はリンク先の本文で読めるようにします。
製品写真なら、対象の型番や外観が本文と合っているかも確認してください。別製品のきれいな写真を流用すると、画像として表示できても、製品を誤認させる案内になります。
似た設定とは、何が違う？
同じheadにあっても、役割は分かれています。制作担当へ頼む際は、SNSの共有画像を直したいのか、検索結果のアイコンを直したいのかを伝えます。
| 設定 |
主に伝える内容 |
| OGP |
共有するページの題・画像 |
| title要素 |
ページの題 |
| description |
検索結果用の説明など |
| ファビコン |
サイトを識別する小画像 |
og:titleはtitle要素と、og:descriptionは通常の説明用meta要素と、別の項目です。CMSが同じ入力欄から生成していても、公開HTMLで両方の値を確認します。
検索向けの題はタイトルタグの書き方で、説明文は検索結果の説明文で扱っています。同じheadに置く小さなアイコンはファビコンの設定へ進めます。
構造化データも別です。Googleの検査で有効と出たことは、SNSが共有画像を取得できた証拠にはなりません。検証道具の使い分けと分け、共有先が何を読み取ったかを見ます。
Facebookでは、何で確かめる？
Metaは共有の確認手順で、Sharing Debuggerを案内しています。URLを入れると、クローラーが取得したmeta要素と、エラーや警告を調べられます。ツールへ入れるのは、実際に共有したい個別ページのURLです。
- サイト側で題・説明・画像を公開する
- 画像URLを直接開き、意図したファイルか確認する
- Metaの共有デバッガーにページのURLを入れる
- 取得されたタグと警告を読む
- 出力元を修正し、再取得後の情報を確認する
デバッガーの結果欄だけを書き換えても、元サイトのHTMLは変わりません。CMS、テーマ、プラグインなど、実際にタグを出している設定を直します。
同じ項目が重複していたら、先に出力元を整理してください。OGPの仕様には複数画像を扱う仕組みもありますが、古い設定と新しい設定の偶然の重複を、意図した複数指定として残しません。
Xは同じ表示になる？
Facebookで読めたことだけでは、Xの表示まで確認済みにはできません。Xの公式ヘルプにも、URLを貼るとカードが表示される旨の説明があります。共有先で画像と題を別々に確かめます。
2026年10月23日の確認では、Xの旧カード仕様ページは開発者向けの総合案内へ転送されました。現行の画像寸法やカード用タグの細かな条件を、そのページから再確認できていません。過去の仕様表を現在の保証値として載せることは避けます。
制作担当には、共有するURLと、期待する題・画像を渡してください。Xの投稿作成画面で確認し、表示が省略されるなら、その状態も記録します。確認だけのために公開投稿を増やす必要はありません。投稿前の表示だけでは分からない部分は、通常の公開投稿後に確認します。
古い画像が残ったら、何を見る？
公開HTMLの値、画像ファイル、共有先が前回読み取った情報を順に調べます。画像を変えたつもりでも、CMSが旧URLを出していれば、共有先が読む値も古いままです。
Metaの共有設定の説明は、画像をURL単位で保存し、画像を更新するときは新しいURLを使うよう案内しています。変更した画像を別名で公開するなら、og:imageの参照先も合わせて更新します。新しい画像を置くだけでは切り替わりません。
ページや画像がログインを要求していないか、配信側のボット対策で拒否していないかも確認します。人のブラウザで見えたことと、共有先のクローラーが読めたことを別々に記録してください。
私たちは自社メディアで、FAQを構造化データにだけ入れ、画面へ出していなかった失敗があります。出典は暦メディアの運営記録です。OGPでも、裏側の指定だけを見て完了とせず、読者が受け取る表示とリンク先の本文を照合します。
サイト設計の点検として、対象URL、公開HTMLの値、画像の実寸、変更日、共有先の取得結果を一組で引き継ぎます。トップの確認だけで終えず、製品と記事で異なる内容が伝わるかまで確認してください。
仕様・出典の確認日：2026年10月23日。
