OGP画像（og画像とも呼ばれます）は、ホームページの URL が X や Facebook、LINE に貼られたときに、カードの形で出る画像です。どの画像を出すかは、ページの HTML に og:image というタグで書いておきます。大きさは、横1200×縦630ピクセル（縦横比 1.91対1）で一枚作れば、Facebook の推奨を満たし、X の大きな画像のカードにもほぼそのまま収まります。ただし X のカードは縦横比が 2対1 で、場合によっては正方形に切り取られるので、文字やロゴは画像の中央に寄せます。形式は JPEG か PNG、重さは各社の上限（X は5MB未満、Facebook は8MBまで）よりずっと軽くします。設定を変えたのに古い画像が出るときは、Facebook はシェアデバッガーで読み直させ、X は画像の URL を変えます。この記事では、これらを各サービスの開発者向けの公式の説明で2026年11月13日に確かめた範囲で書きます。
OGP の題や説明文も含めた全体の設定と、WordPress でどのテーマやプラグインが OGP を出しているかの突き止め方はOGPの設定方法に書いたので、ここでは画像に絞ります。ブラウザのタブに出る小さな印（ファビコン）は OGP 画像とは別の設定で、WordPressのファビコン設定にまとめています。
この記事の結論
- OGP 画像は、ページの
og:imageで指定する、シェアされたときの代表の画像です。X は専用のタグ（twitter:image）がなければog:imageを使い、LINE もog:imageを使います。 - 公式の数字は、Facebook が1200×630ピクセル以上・1.91対1に近く・8MBまで、X の大きな画像のカードが 2対1・最小300×157ピクセル・5MB未満です。LINE は大きさの記載が見当たりませんでした。
- 1200×630 で作り、文字とロゴは中央の正方形（縦630×横630の範囲）に収めると、どのカードでも切れにくくなります。
- 形式は JPEG（写真）か PNG（文字や図）。SVG は X が受け付けず、Facebook の説明でも WebP は挙げられていません。
- 古い画像が出るのは、各社が画像を URL ごとに覚えているためです。差し替えるときは新しいファイル名で上げ直し、Facebook はシェアデバッガーで読み直させます。
OGP画像（og:image）とは
OGP（Open Graph protocol）は、シェアされたときの見え方を指定するために、ページの HTML の見えない部分（head）に書いておく目印です。画像は次のような一行で、content に画像の URL を書きます（URL は例です）。
<meta property="og:image" content="https://example.jp/images/og-top.jpg">
URL が貼られると、各サービスがそのページを読みに行き、このタグを見て画像を取ってきます。X には twitter:image という専用のタグもありますが、X の開発者向けの説明では、これがなければ og:image を使うとされています（題や説明文、画像の代替テキストも同じく OGP のタグで代わりになります）。LINE の開発者向けのよくある質問では、トークの URL プレビューに使うのは og:title、og:description、og:image の三つだけとされています。つまり、まず og:image を正しく用意すれば、三つのサービスに共通の画像になります。
各サービスの公式の記載：推奨の大きさと縦横比
| サービス | 大きさ | 縦横比 | 重さ・形式 |
|---|---|---|---|
| 高解像度の画面向けに1200×630ピクセル以上。最小200×200ピクセル | 1.91対1にできるだけ近く | 8MBまで。形式の指定（og:image:type）は image/jpeg、image/gif、image/png | |
| X（大きな画像のカード summary_large_image） | 最小300×157ピクセル、最大4096×4096ピクセル | 2対1 | 5MB未満。JPG、PNG、WEBP、GIF（動く GIF は最初の一コマだけ）。SVG は不可 |
| X（小さな画像のカード summary） | 最小144×144ピクセル、最大4096×4096ピクセル | 1対1（正方形に切り取られる） | 同上 |
| LINE | 大きさ・比率・形式の記載は見当たらず（使うタグは og:title、og:description、og:image の三つ） | ||
出典は記事末の Meta for Developers、X Developer Platform、LINE Developers の各ページです。OGP の仕様そのもの（ogp.me）には大きさの推奨はなく、幅と高さを書くタグ（og:image:width、og:image:height）と、画像の説明を書くタグ（og:image:alt）が用意されています。Facebook の説明では、幅と高さを書いておくと、初めてシェアされたときから画像が出やすくなります。
当社のおすすめ：1200×630で一枚作る
サービスごとに別の画像を用意するのは、小さな会社のサイトでは続きません。当社は、1200×630ピクセルで一枚作り、それを og:image に使う形を勧めています。Facebook の推奨の大きさと比率をそのまま満たし、X の大きな画像のカード（2対1）でも、上下がわずかに切れるだけで収まるからです。1200×630 を 2対1 に合わせると、高さは600ピクセル分になり、上下がおよそ15ピクセルずつ切れる計算です。
記事ごとに専用の画像を作るか、サイト全体で一枚の既定の画像にするかの考え方はOGPの設定方法の「記事ごとのアイキャッチと既定の画像の考え方」に書いています。
端が切れる理由と、文字を置く位置
「作った画像の端が切れて、文字が欠ける」という相談の原因は、主に次の三つです。
- サービスごとに比率が違う：Facebook は 1.91対1、X は 2対1 です。比率の合わない部分は、カードの枠に合わせて切り取られます。
- X で小さな画像のカードになっている：X の説明では、カードの種類を指定するタグ（
twitter:card）がないと、小さな画像のカード（summary）になることがあり、その画像は正方形に切り取られます。横長の画像の左右が大きく欠けるのはこのためです。大きな画像のカードにするには、<meta name="twitter:card" content="summary_large_image">を書きます。WordPress では、OGP を出しているテーマやプラグインの設定に、X（Twitter）のカードの種類を選ぶ項目があることがあるので、あれば大きな画像のほうを選びます。 - 画像が小さすぎる、比率がかけ離れている：Facebook の説明では、600×315ピクセルより小さい画像は、かなり小さく表示されます。縦長の写真を指定すると、横長の枠に合わせて上下が大きく切れます。
ここからは当社の見立てです。どの切り取り方をされても欠けないように、文字とロゴは、1200×630 の画像の真ん中の、縦630×横630ピクセルの正方形の中に収めます。左右の外側には、切れても困らない背景や写真の続きを置きます。文字は一行か二行にとどめ、スマートフォンのトーク画面で小さく出ても読める大きさにします。題そのものはカードに文字で出るので、画像に同じ文を全部入れる必要はありません。
容量と形式、そのほか画像の条件
- 形式：X は JPG、PNG、WEBP、GIF を受け付け、SVG は受け付けません。Facebook の説明では、形式を書くタグの値として image/jpeg、image/gif、image/png が挙げられています。両方で使うなら、写真は JPEG、文字や図が中心なら PNG が無難です。
- 重さ：上限は X が5MB未満、Facebook が8MBです。上限ぎりぎりにする理由はなく、ページの表示を重くしないためにも軽くしておきます。画像を軽くする手順は画像の最適化に書いています。
- だれでも開ける URL にする：X の説明は、カードが出ない原因として、画像が公開されていない場合や、robots.txt（検索エンジンなどの巡回を制限するファイル）で X の読み取り（Twitterbot）を止めている場合を挙げています。公開前のサイトでパスワードがかかっていると、画像も読めません。robots.txt の確かめ方はrobots.txtの書き方にあります。
- 画像の説明：
og:image:alt（X はtwitter:image:alt。なければ og:image:alt を使う）に、画像に何が写っているかを書いておくと、画面の読み上げを使う人に伝わります。X の説明では、420文字までです。
設定したのに古い画像が出るときの対処
先に、自社のページの HTML（ブラウザの「ページのソースを表示」）で、og:image が新しい画像の URL になっているかを確かめます。ここが古いままなら、原因はサイト側のキャッシュ（表示を速くするための作り置き）なので、WordPressで変更が反映されないときの手順で消します。ソースが新しいのにシェアで古い画像が出るなら、各サービスの側に前の情報が残っています。
| サービス | 公式の説明 | すること |
|---|---|---|
| 画像は URL ごとに保存され、URL が変わらない限り更新されない。シェアデバッガーに URL を通すとページを読み直す。すでにシェアされた投稿のプレビューは自動では変わらない | 新しいファイル名で画像を上げ直し、シェアデバッガーにページの URL を入れて読み直させる | |
| X | カードの情報はおよそ7日ごとに読み直される。画像も URL ごとに保存される。画像を替えたら、画像の URL に余分なパラメーターを付けると新しい画像として読まれる | 新しいファイル名で上げ直す。確かめるときは、ページの URL の末尾に ?v=2 のような目印を付けた URL で試す |
| LINE | よくある質問には、プレビューの保存期間や読み直させ方の記載が見当たらなかった | 新しいファイル名で上げ直す（当社の見立て） |
三つに共通して効くのは、画像を同じファイル名で上書きせず、新しいファイル名で上げ直すことです。WordPress のメディアに同じ名前の画像を上げると、別の名前が自動で付くので、上げ直したあとに og:image の URL が新しい名前に変わっているかをソースで確かめます。古い画像のファイルは、すでにシェアされた投稿が見に来るので、Facebook の説明どおり消さずに残しておきます。
画像が出ない、どのページも同じ画像になる、といったほかの症状の見方は、OGPの設定方法の「症状ごとの見るところ」の表にまとめています。
今日、自社で確かめられること
- トップページと、よく人に送るページのソースで
og:imageを探し、画像の URL をブラウザで開いて、横1200×縦630ピクセルに近い横長かを見る。 - 同じソースで
twitter:cardを探し、summary_large_imageになっているかを見る。 - 画像の文字やロゴが、中央の正方形の範囲に収まっているかを見る。はみ出していれば、作り直すときに寄せる。
- Facebook のシェアデバッガーにページの URL を入れて、出る画像を確かめる。LINE では社内の人に URL を送って確かめる。
参照した資料
いずれも2026年11月13日に確認しました。各サービスの数字や扱いは変わることがあります。
- The Open Graph protocol
- Images in Link Shares（Meta for Developers）
- A Guide to Sharing for Webmasters（Meta for Developers）
- Summary card with large image（X Developer Platform）
- Summary card（X Developer Platform）
- Cards markup（X Developer Platform）
- Troubleshooting Cards（X Developer Platform）
- よくある質問（LINE Developers）