← PC・IT用語集へ戻る

og:image

og:image
development web beginner
SNSやチャットアプリでページURLを共有したときに表示する画像URLを指定するためのOpen Graphのmetaタグのこと。画像そのものではなく、画像を指定するHTMLタグである。
og:image (og:image)

概要（サマリー）

og:imageとは、SNSやチャットアプリでページURLを共有したときに表示する画像URLを指定するためのOpen Graphのmetaタグである。画像そのものではなく、画像を指定するHTMLタグである。

たとえば、ブログ記事やWebアプリのURLをX、Facebook、LINE、Slackなどに貼ったとき、タイトルや説明文と一緒に画像が表示されることがある。この画像ファイルを OGP画像 と呼ぶことがあり、その画像URLをHTML上で指定するタグが og:image である。初心者向けには、「SNSでシェアされたときに出す看板画像を指定するタグ」と考えるとわかりやすい。

最初に、次のように分けて考えると混乱しにくい。

  • Open Graph / OGP
    SNSなどにページ情報を伝える仕組み全体
  • og:image
    共有時に使う画像URLを指定するmetaタグ
  • OGP画像
    og:image で指定される画像ファイル

詳細解説

og:imageは「共有時に表示される画像URL」を指定するタグである

Webページは、ブラウザで見られるだけでなく、SNSやチャットアプリで共有されることがある。
そのとき、URLだけが表示されるよりも、画像付きのカードとして表示されたほうが内容が伝わりやすい。

この共有カードに表示される画像ファイルを指定するのが og:image である。

HTMLでは、通常 <head> 内に次のように書く。

<meta property="og:image" content="https://example.com/assets/img/sample-ogp.jpg">

これは、SNSなどに対して「このページを共有するときは、この画像を使ってください」と伝えている。
つまり og:image は、人間が直接ページ上で見る画像そのものではなく、外部サービスがページ情報を取得したときに読む画像URLの指定である。

Open Graphとは何か

og:image の og は Open Graph の略である。
Open Graphは、WebページがSNSなどで共有されたときに、タイトル、説明文、画像、URLなどを分かりやすく表示するためのメタ情報の仕組みである。

代表的なOpen Graphタグには、次のようなものがある。

<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:image" content="https://example.com/assets/img/ogp.jpg">

この中で、画像URLの指定を担当するのが og:image である。
ページの第一印象に大きく関わるため、OGP設定の中でも特に重要なタグのひとつである。

なぜog:imageが重要なのか

SNSやチャットでURLを共有したとき、画像があるかどうかで見え方は大きく変わる。
画像がないと、リンクカードが地味になったり、意図しない画像が表示されたりすることがある。

og:image を適切に設定すると、次のようなメリットがある。

  • 共有時にページの内容が伝わりやすい
  • SNS上でクリックされやすくなる
  • 記事やWebアプリの印象を統一しやすい
  • ブランド感やサイトの雰囲気を出しやすい
  • 意図しない画像が表示されるリスクを減らせる

つまり og:image は、SEOそのものというより、SNS共有時の見え方やクリック率に関わる重要な要素である。

og:imageとSEOの関係

og:image は、検索順位を直接上げるためのタグではない。
しかし、SNSで共有されたときの見た目に影響するため、間接的にアクセスや認知に関わることがある。

たとえば、魅力的なOGP画像が表示されれば、SNSでリンクを見た人がクリックしやすくなる。
また、記事やサービスの内容が一目で伝わるため、共有時の印象も良くなる。

そのため、ブログ記事、Webアプリ、用語解説ページ、LPなどでは、og:image をきちんと設定しておく価値がある。
特にAIで静的HTMLページを量産する場合は、テンプレート側で og:image を自動設定できるようにしておくと運用しやすい。

設定例

基本的な og:image の設定例は次の通りである。

<meta property="og:image" content="https://example.com/assets/img/og-image.jpg">

あわせて、画像の幅や高さを指定することもある。

<meta property="og:image" content="https://example.com/assets/img/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

1200 × 630 は、OGP画像でよく使われる横長サイズである。
ただし、サービスによって表示のされ方や推奨サイズが変わることがあるため、重要なページでは実際にシェア表示を確認したほうがよい。

URLは絶対URLで書くのが基本

og:image の content には、基本的に絶対URLを書くのがよい。

<meta property="og:image" content="https://example.com/assets/img/sample.jpg">

次のような相対パスは、環境やサービスによって正しく解釈されないことがある。

<meta property="og:image" content="/assets/img/sample.jpg">

HTML内の画像表示では相対パスでも動くことがあるが、SNSのクローラーがページ情報を取りに来る場合は、確実に画像へアクセスできる絶対URLのほうが安全である。

画像が表示されない原因

og:image を設定しても、SNSやチャットアプリで画像が表示されないことがある。
原因としては、次のようなものが考えられる。

画像URLが間違っている

指定した画像URLが404になっていると、当然表示されない。

画像が外部からアクセスできない

ログインが必要な場所、ローカル環境、アクセス制限のある場所に画像を置いていると、SNS側が取得できない。

画像サイズや形式が適切でない

画像が小さすぎる、重すぎる、対応していない形式になっていると、正しく表示されないことがある。

キャッシュが残っている

SNSやチャットアプリは、OGP情報をキャッシュすることがある。
画像を変更しても、すぐには反映されない場合がある。

head内に正しく書かれていない

<body> 内に書いていたり、タグの属性名が間違っていたりすると、クローラーが正しく読み取れないことがある。

WordPressでのog:image

WordPressでは、テーマやSEOプラグインが og:image を自動で出力してくれることがある。
たとえば、投稿のアイキャッチ画像をOGP画像として使い、その画像URLを og:image として出力する設定がよくある。

ただし、次のような点には注意したい。

  • アイキャッチ画像が未設定だとデフォルト画像になることがある
  • プラグインとテーマが二重にOGPタグを出すことがある
  • 記事ごとに意図した画像が出ているか確認が必要
  • キャッシュプラグインの影響で反映が遅れることがある

WordPressでブログ記事を運営する場合は、「アイキャッチ画像」と「OGP画像」が同じ画像ファイルになることも多いが、意味としては完全に同じではない。アイキャッチ画像は記事内や一覧で使う代表画像で、OGP画像はSNS共有時に使う画像である。

静的HTMLでのog:image

WordPressの外に静的HTMLを置く場合は、HTMLテンプレート側で og:image タグを自分で出力する必要がある。

たとえば、用語集の詳細ページなら、slugごとに次のような画像を自動で指定する設計が考えられる。

<meta property="og:image" content="https://noveblo.com/glossary/assets/img/og-image_main.jpg">

もしファイル名規則を assets/img/slug_main.jpg のように統一しているなら、HTML生成時にslugからOGP画像のURLを組み立てることもできる。
このようにしておくと、用語ページを増やしてもOGP画像の管理がしやすくなる。

Featured ImageやThumbnailとの違い

og:image と混同しやすい言葉に Featured Image や Thumbnail がある。

  • og:image
    SNSやチャットアプリで共有されたときに使う画像URLを指定するmetaタグ
  • OGP画像
    og:image で指定される画像ファイル
  • Featured Image
    WordPressなどで記事の代表画像として設定するアイキャッチ画像
  • Thumbnail
    一覧やカードで小さく表示されるサムネイル画像全般

これらは同じ画像を使うこともあるが、役割は違う。
たとえば、記事一覧ではアイキャッチ画像を表示し、SNS共有時には og:image で指定したOGP画像を表示する、というように使われる場面が異なる。

Faviconとの違い

Favicon もページの印象に関わる画像だが、og:image とは役割が違う。

  • Favicon
    ブラウザのタブやブックマークに表示される小さなアイコン
  • og:image
    SNSやチャットでリンク共有されたときに使う画像URLを指定するmetaタグ

どちらもサイトの見え方に関わるが、表示される場所もサイズも目的も異なる。
そのため、同じ画像を流用するのではなく、それぞれに適した画像を用意したほうがよい。

AI時代にog:imageの理解が重要な理由

AIを使うと、記事、用語ページ、Webアプリ、LPなどを短時間で増やせる。
しかし、ページを作っただけでは、SNSで共有したときの見え方まで整っているとは限らない。

たとえば、AIで生成した静的HTMLに og:image タグが入っていないと、共有時に画像が出ないことがある。
また、画像URLが間違っていると、せっかくOGP画像を作っても表示されない。

そのため、AIでページを量産する場合は、次のような設計をしておくとよい。

  • ページごとのOGP画像を用意する
  • slugから画像URLを自動生成する
  • デフォルトOGP画像も用意する
  • HTMLテンプレートに og:image を組み込む
  • 共有前にOGP表示を確認する

AIでコンテンツを作る時代ほど、ページ本文だけでなく、共有時の見え方まで含めて設計することが重要になる。

初心者向けの理解の仕方

最初は、og:image を「SNSにURLを貼ったときに出る画像URLを指定するタグ」と覚えれば十分である。

そして、次の3つを意識すると理解しやすい。

  • ページの <head> に書く
  • 画像URLは絶対URLで指定する
  • SNS側のキャッシュで反映が遅れることがある

この基本が分かるだけで、ブログ記事、Webアプリ、静的HTMLページの共有時の見え方をかなり改善しやすくなる。

よくある勘違い

og:image = ページ本文に表示される画像？

違う。
og:image は主にSNSやチャットアプリでURL共有されたときに使う画像URLの指定であり、ページ本文に表示される画像とは別である。

og:image = OGP画像そのもの？

厳密には違う。
og:image は画像URLを指定するHTMLタグで、OGP画像はそのタグで指定される画像ファイルである。

アイキャッチ画像とog:imageは必ず同じ？

必ずしも同じではない。
WordPressではアイキャッチ画像がOGP画像として使われることも多いが、役割としては別である。

og:imageを設定すれば検索順位が直接上がる？

基本的には直接的な検索順位上昇のためのタグではない。
ただし、SNS共有時の見え方やクリック率には影響する可能性がある。

画像を変更すればSNS表示もすぐ変わる？

すぐ変わらないことがある。
SNSやチャットアプリ側がOGP情報をキャッシュしているため、反映に時間がかかったり、再取得ツールが必要になったりする場合がある。

相対パスでも必ず問題なく表示される？

そうとは限らない。
SNS側のクローラーが確実に画像へアクセスできるよう、og:image には絶対URLを指定するのが基本である。

AIコーディングとの関係

AIにコード生成や修正を依頼するとき、og:imageの意味を理解していると、出力されたコードやエラー内容を判断しやすくなる。
SNSやチャットアプリでページURLを共有したときに表示する画像URLを指定するためのOpen Graphのmetaタグのこと。

AIへ相談するときは、「何をしたいのか」「どの環境で起きているのか」「どのファイルやエラーを見ているのか」を一緒に伝えるとよい。
用語だけを投げるより、具体的な状況と期待する結果を添えることで、より実用的な回答を得やすくなる。

まとめ

  • og:imageは、SNSやチャットアプリでページURLを共有したときに表示する画像URLを指定するためのOpen Graphのmetaタグのこと。
  • 関連する用語や実際の作業場面と一緒に理解すると、使いどころを判断しやすい。
  • AIコーディングでは、用語の意味を理解しているほど、AIの説明や生成コードを確認しやすくなる。
  • 迷ったときは、エラー内容、目的、前提条件を整理してAIに聞くとよい。

より詳しくAIに聞いてみよう

  • og:imageとは何かを、中学生でもわかるように具体例つきで説明してください。
  • og:image と Featured Image と Thumbnail と Favicon の違いを、初心者向けに整理してください。
  • 静的HTMLでog:imageを設定する基本コードを教えてください。
  • SNSでOGP画像が表示されないときの原因と確認方法を教えてください。
  • AIで作った用語ページにOGP画像を自動設定する設計案を作ってください。