【おーじーぴー】

OGP画像とは？

最終更新: 2026年10月2日

💡 リンク先を紹介する画像と情報を用意する

SNSなどがリンク先を紹介するときに使う画像。Open Graph Protocolのメタデータとの違い、基本の4プロパティ、画像URLや代替テキスト、共有時の表示確認を解説します。

📌 このページのポイント

情報を利用して紹介カードを作る例で、矢印はHTTP通信の回数や方向ではありません。画像も外部から取得できるURLを用意し、共有先で表示を確認します。

ひよこ

OGPは、SNSで見える横長の画像の名前？

ペンギン先生

OGPはOpen Graph Protocolという情報の伝え方で、画像そのものとは違うよ。「OGP画像」と呼ぶときは、リンク先を紹介する画像を指すことが多いんだ。

ひよこ

ページには、何を設定するの？

ペンギン先生

HTMLのhead内にmetaタグで情報を入れるよ。プロトコルの基本となる4つは、og:title、og:type、og:image、og:urlだ。タイトル、種類、画像のURL、そのページを代表するURLを伝える。説明のog:descriptionは追加の情報なんだ。

ひよこ

og:imageには、画像のデータを全部入れる？

ペンギン先生

通常は画像のURLを指定するよ。ページの情報とは別に、共有先がその画像も取得できる必要がある。作成者のPC内だけにある画像では、外のサービスは取得できないんだ。

ひよこ

画像には、文字で説明する情報も付けられる？

ペンギン先生

og:image:altで画像の説明を付けられるよ。プロトコルは、og:imageを指定したら代替テキストも用意することを勧めている。画像の幅や高さ、種類などを伝えるプロパティもあるんだ。

ひよこ

設定すると、どのSNSでも同じカードになる？

ペンギン先生

このプロトコルはページの情報を伝えるもので、各サービスの画面を同じにする仕様ではないよ。画像に重要な文字を詰め込みすぎず、実際に共有するサービスで読めるかを確認しよう。

もっと詳しく知りたい人へ

og:urlには、画像のURLを書く？

og:urlはページを代表する正規URL、og:imageは紹介用の画像URLです。別の目的のプロパティなので取り違えないようにします。画像のURLを指定するだけで、ページのタイトルや種類などが設定されたことにはなりません。

og:image:widthとog:image:heightは画像の寸法を伝える情報です。共有先の画面の大きさを強制する指定ではありません。重要な文字や主題が切れずに読めるか、画像を縮めた場合も含めて表示を確認します。

まとめ：ざっくりこれだけ覚えればOK！

「OGP画像」って出てきたら「リンク先を紹介するためにog:imageで指定する画像」と思えばだいたいOK！

📖 おまけ：英語の意味

「Open Graph Protocol」＝ページをグラフ上の情報として表すプロトコル

💬 OGPはOpen Graph Protocolを指す略称として使われます。日本語でいう「OGP画像」は、その情報の一部であるog:imageに指定する画像を指す表現です。