OGP が反映されないのはなぜ？

meta の設置場所（head内）、URLの絶対指定（og:image/og:url）、そしてSNS側のキャッシュが原因になりがちです。まずHTMLのheadを確認し、次に各SNSのデバッガーで再取得を試します。

OGP は最低いくつ必要？

実務では og:title / og:description / og:image / og:url / og:type をまず揃えるのが定番です。加えてサイト名を出したいなら og:site_name、言語を意識するなら og:locale を足します。

og:image は相対URLでもいい？

相対URLを解決してくれるクローラもありますが、環境差で事故になりやすいので絶対URLで指定するのが安全です。

OGP - SNSシェアのタイトル/画像/説明を指定する（Open Graph）

Sets Open Graph meta tags so shared links show the intended title, description, and image on social platforms.

OGP（Open Graph Protocol）

OGP は、SNSでURLを共有したときに表示されるタイトル・説明・画像を <meta> で指定するための仕組みです。

このページでできるようになること

OGP（og:*）の「最短セット」を迷わず書ける
og:image / og:url を絶対URLで固定して事故を防げる
og:type の選び方（website/article など）を判断できる
反映されない原因（配置ミス/キャッシュ/取得失敗）を切り分けられる
Twitterカード（twitter:card など）とOGPの役割分担を説明できる
試験対策：property 属性と <meta> の正誤判定で迷わない

まずは直感：OGP って何？

OGP は「ページを人に見せる情報」ではなく、「URLを貼ったときにSNSが作るカードの材料」を渡す仕組みです。

タイトル：シェアカードに出る見出し
説明：カードの要約文
画像：カードのサムネイル

最小デモ：まず動かす（head に置く）

OGP は 必ず <head> の中に置きます（本文に書いてもクローラが拾えないことがあります）。

最低限（実務でまず揃える5つ）

og:title / og:description / og:image
og:url / og:type

HTML

<head>
	<meta property="og:title" content="記事タイトル">
	<meta property="og:description" content="記事の要約（長すぎない）">
	<meta property="og:type" content="article">
	<meta property="og:url" content="https://example.com/path/">
	<meta property="og:image" content="https://example.com/ogp.jpg">
</head>

正確な定義（仕様に沿った説明）

OGPでやっていること

OGP は <meta> の property="og:*" と content を使い、「このURLは何のページで、カードに何を表示したいか」を機械向けに渡します。

どこに書くか（配置）

OGP の <meta> は 文書のメタデータなので、<head> に置きます。

`name` と `property` の違い

<meta name="description"> は「HTMLのメタ名」を name で指定し、OGP は「OG名前空間のプロパティ」を property で指定する、という住み分けです。

最短の型（実務でまず揃えるセット）

og:title: シェアカードの見出し（ページの内容が一瞬で分かる短い文にする）。
og:description: カードに出る要約（meta name="description" と同一でなくてよい）。
og:image: サムネイル画像のURL（基本は絶対URL、画像が取得できないと無表示になりやすい）。
og:url: 「このカードの正規URL」（canonical と同じに揃えると混乱が減る）。
og:type: コンテンツ種別（汎用なら website、記事なら article がよく使われる）。

画像（`og:image`）で事故りやすいポイント

絶対URLにする（相対は環境差の地雷になりやすい）
画像が公開URLで直接取得できること（ログイン必須/遮断/403 だと失敗）
必要なら og:image:width / og:image:height を添えて解釈差を減らす
アクセシビリティ観点で og:image:alt を付ける（対応SNSでは代替テキストとして使われる）

HTML（画像の補助情報も足す）

<meta property="og:image" content="https://example.com/ogp.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="記事の内容を表すサムネイル">

Twitterカードとの関係（混同しない）

Twitter（現X）向けには、OGPに加えて twitter:card などのメタを足すことがあります（OGPだけでも表示される場合はあります）。

HTML（Twitterカードの最小例）

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="記事タイトル">
<meta name="twitter:description" content="記事の要約">
<meta name="twitter:image" content="https://example.com/ogp.jpg">

実務で起きがちな事故と回避策（反映されないを潰す）

まず確認する3点

OGPの <meta> が <head> にある
og:url / og:image が 絶対URL で、実際に取得できる
SNS側が 古い情報をキャッシュ していないか（再取得が必要なことがある）

よくある症状と原因候補

タイトルや画像が古いまま: SNS側のキャッシュが残っている可能性があります。各SNSのデバッガー/検証ツールで再取得を試します。
画像だけ出ない: og:image が相対URL／リダイレクト／アクセス制限（403）／サイズが極端、などで取得に失敗している可能性があります。ブラウザで画像URLを直接開いて確認します。
URLが別ページとして扱われる: og:url と canonical が不一致だったり、末尾スラッシュやクエリの有無が揃っていないと、別URLとしてキャッシュされることがあります。正規URLを統一します。

試験対策：HTML5プロフェッショナル（レベル1）での見分け

<meta> の情報は画面表示を変えず、機械が読む目的で使う
OGPは <meta property="og:*" content="..."> の形（name と混同しない）
property 属性自体はHTMLのグローバル属性として書けても、意味が出るのはRDFa/OGPなどの文脈
「必須セット」は仕様というより運用上の定番で、正誤問題では“置き場所（head）”“属性の組み合わせ”“URLの扱い”が狙われやすい

よくある質問

OGP は SEO に直接効きますか？: 主目的はSNSのシェアカードで、検索スニペットは主に <title> と meta name="description" が中心です。
OGP の値は <title> と同じにするべき？: 同じでも構いませんが、検索向けのタイトルとシェア向けの文言は最適がズレることもあるので、目的で調整します。
OGP を1ページに複数書いていい？: 同じプロパティを複数書くと解釈が割れることがあります。基本は1つに揃え、og:image のように複数候補を並べたいケースだけ用途を決めて追加します。