記事をSNSでシェアしたら、画像の端が切れていた、文字が小さくて読めなかった、ということがあります。
OGP画像の表示枠はSNSやカード形式によって異なり、指定した寸法で作っても切り取られることがあります。
この記事では、OGP画像のサイズの決め方と、タイトルを入れるだけで画像を作る方法、WordPressでの設定場所を紹介します。
この記事で使うOGP画像ジェネレーターは、当サイトと同じMOTOKI合同会社が作った「WEBツール箱」の1つです。
無料で、会員登録なしで使えます。
最終確認日：2026年9月28日
この記事で分かること
- OGP画像を1200×630pxで作る理由
- LINEで正方形に切り取られたときに、どこが残るか
- タイトルから1200×630pxの画像を作る手順
- WordPressでOGP画像を設定する場所
最初の答え｜1200×630px・文字は中央に寄せる
| 項目 | 目安 |
|---|---|
| 大きさ | 1200×630px（横縦比1.91:1） |
| 小さすぎる目安 | 600×315px未満 |
| ファイルの大きさ | 使用するSNSの上限内。300KB以下は制作上の目安 |
| 文字を置く場所 | 中央の正方形（630×630px）の中 |
1200×630pxはOGP画像でよく使われる制作サイズです。ただしSNSやカード形式によって推奨比率・表示方法が異なり、このサイズでもトリミングされることがあります。
必要な最小寸法や縦横比はカード形式ごとに確認します。画像サイズだけで大きいカード・小さいカードが決まるわけではありません。
LINEなどでは表示箇所により画像が切り取られます。読ませたい文字を中央寄りに置き、実際に使うSNSのプレビューでも確認してください。
OGP・メタタグ確認では、600×315px未満の画像にツール独自の目安として警告を出します。すべてのSNSの合否判定ではありません。
タイトルからOGP画像を作る手順
- OGP画像ジェネレーターを開く
- タイトルを入れる（改行を入れた位置で折り返す）
- サブタイトルとサイト名を入れる（どちらも空欄にできる）
- 配色・アクセントカラー・文字サイズ・配置を選ぶ
- 下のプレビューを見て「PNGで保存」を押す
入力するたびに、下のプレビューがその場で描き直されます。
配色は、白地・濃色地・グラデーション・左に太い帯の4種類から選べます。
文字サイズは40〜90pxの間で変えられ、長いタイトルは自動で折り返します。
この例では、1200×630pxのPNGが58KBでできました。
作った画像はサーバーに送られず、ブラウザの中だけで作られるので、公開前の記事のタイトルでも使えます。
文字には、使っているパソコンやスマホに入っているフォントが使われます。
Windowsなら游ゴシックやメイリオ、Macならヒラギノ角ゴになるので、端末によって見た目が少し変わります。
デザインをそろえたいときは、作った画像をたたき台にして、デザインツールで仕上げてください。
正方形に切り取られると、どこが残るか
同じタイトルで「左寄せ」と「中央」の2枚を作り、中央の正方形の範囲を重ねました。
赤い枠の中が、正方形に切り取られたときに残る部分です。
左寄せでは、タイトルの書き出しが枠の外に出てしまいます。
中央にすると、タイトルとサブタイトルは枠の中に収まります。
サイト名は、配置を中央にしても左下に入るので、正方形では一部が切れます。
正方形で読めなくなって困る文字は、タイトルの中に入れておくと安心です。
実例｜このサイトのアイキャッチ
このサイトの記事のアイキャッチは、1280×720px（横縦比16:9）です。
OGP・メタタグ確認で記事を調べると、このアイキャッチがそのまま og:image に使われていました。
16:9の画像を1.91:1のカードで表示すると、上下が合わせて50pxほど切れます。
ロゴと題名を中央にまとめているので、どちらの形でも文字は枠の中に残ります。
1200×630pxを出発点にし、利用するカード形式で文字やロゴが欠けないか確認します。別の比率でも表示を確認して判断し、中央配置だけで修正不要とは判断しません。
WordPressで設定する場所
多くのテーマとSEOプラグインは、記事のアイキャッチ画像を og:image に使います。
記事ごとにOGP画像を変えるなら、アイキャッチ画像を1200×630pxで作って設定するのがいちばん手軽です。
| やりたいこと | 設定する場所 |
|---|---|
| 記事ごとに画像を変える | 投稿の編集画面の「アイキャッチ画像」 |
| アイキャッチが無い記事にも画像を出す | SEOプラグインのOGP設定にある、共通の画像 |
SEO SIMPLE PACKを使う場合の設定は「SEO SIMPLE PACKの使い方と初期設定」で解説しています。
og:image のURLは、「https://」から始まる完全なURLで書かれている必要があります。
テーマやプラグインが出力する場合も、実際のog:imageのURLと画像寸法、SNS側から画像を取得できるかを確認してください。
作るときの注意
- 写真はJPEG、文字と図形だけの画像はPNGにすると、きれいなまま軽くできる
- 文字は端に寄せすぎず、周りに余白を取る
- 小さなカードでも読めるよう、タイトルは短く2行までに収める
- 記事ごとに作るのが理想だが、全記事共通の1枚でも画像なしよりずっと良い
画像が取得できないと、カードの表示に画像が付かない場合があります。クリック率への影響はこの記事では測定していません。
まずサイト共通の1枚を用意し、力を入れたい記事から個別に作る、という進め方が現実的です。
よくある質問
Q. 正方形のOGP画像ではだめですか？
XやFacebookの大きな画像のカードは横長なので、正方形の画像は上下が切り取られます。
Xで小さなカード（twitter:card を summary にした場合）を使うなら、画像は正方形で表示されます。
どちらのカードでも読めるようにするなら、1200×630pxで作り、文字を中央の正方形に収める形が扱いやすいです。
Q. 画像を差し替えたのに、SNSの表示が変わりません。
SNSは、一度読み込んだOGPの情報をしばらく覚えています。
Facebookは「シェアデバッガー」で読み込み直せます。
設定が正しく出ているかは、OGP・メタタグ確認で確かめられます。
反映されないときの原因は「OGPの確認方法と反映されないときの直し方」でまとめています。
まとめ
- OGP画像は1200×630px（1.91:1）で作る
- 表示箇所による切り取りを考慮し、文字を中央寄りに置いて実表示も確認する
- ファイルの上限はSNSごとに確認し、画質と容量を両立させる
- OGP画像ジェネレーターなら、タイトルを入れるだけでPNGを作れる
- WordPressでは、アイキャッチ画像を1200×630pxで作れば、そのまま og:image に使われることが多い
ほかの項目もまとめて点検するなら、「WordPressサイトを自分で点検する手順」で順番と使い分けを解説しています。
ツールの一覧はWEBツール箱にあります。
公開ページで実際に選ばれた画像を調べる
画像を作った後は、対象記事のHTMLにあるog:imageを確認します。アイキャッチを変えても、SEOプラグインの個別指定や共通画像が優先される場合があるためです。画像URLを開いて取得できるか、元画像の寸法とカードの設定が意図どおりかを確認します。
この記事の切り取り図は中央を切り取った説明用の図です。LINEやXなどの実際のカードを撮影したものではありません。SNSのプレビューで欠け方を確認し、文字の位置を調整してから共有してください。差し替えが反映されない場合は、サイト側とSNS側のキャッシュを分けて確認します。
