OGP 画像リサイズツール (1200×630) 無料オンライン

直接の回答

リンクのプレビュー画像を初期値の 1200×630 または 1200×628 に調整します。ブラウザー内で切り抜きや余白追加を行い、公開先の表示を確認してください。 1.91:1 の枠いっぱいに広げる切り抜きか、白・ブランド色・透明の余白をつけて全体を収めるかを選択します。

このツールの使い方

アイキャッチ画像やヘッダーを読み込む

JPG、PNG、WebP 画像を最大 20 枚選択してください。初期キャンバスは 1200×630 です。

1200×630 / 1200×628

リンクのプレビュー画像を初期値の 1200×630 または 1200×628 に調整します。ブラウザー内で切り抜きや余白追加を行い、公開先の表示を確認してください。

「切り抜き」または「余白追加」を指定

1.91:1 の枠いっぱいに広げる切り抜きか、白・ブランド色・透明の余白をつけて全体を収めるかを選択します。

書き出して og:image メタタグを設定

画像をダウンロードし、HTML 内に og:image、og:image:width、og:image:height を記述して設定を完了します。

Open Graph 画像のサイズと構図

本ツールはリンクプレビュー用に 1200×630 と 1200×628 のキャンバスを用意しています。比率はいずれも約 1.91:1 です。Open Graph が定義するのは画像のメタデータであり、すべてのサービスに共通する必須サイズではありません。共有先での表示をご確認ください。

s_crop = max(W_target / W_src, H_target / H_src); s_raw = min(W_target / W_src, H_target / H_src); s_pad = allowUpscale ? s_raw : min(1, s_raw)

具体例

16:9 横長バナー (1920×1080) を 1200×630 OGP 画像へ変換

入力: 1920×1080 JPEG 画像 (16:9、2.1 MB)

出力: 1200×630 JPEG (1.91:1、高精細シェア画像)

切り抜きモードで幅を合わせ、上下のわずかな余白をカットして 1200×630 の比率にぴったり合わせます。

正方形ロゴ (1000×1000) を見切れずに 1200×630 枠に収める

入力: 1000×1000 PNG ロゴ (1:1 比率)

出力: 1200×630 PNG（中央に 630×630 のロゴ、左右に対称な余白）

余白追加モードによりロゴの端を一切切り落とさず、左右に白や指定色を敷いて配置します。

1200×628 のリンクカード画像を生成

入力: 2400×1256 PNG イラスト (1.91:1 比率)

出力: 1200×628 最適化 PNG / WebP 画像

高解像度のベクター書き出し画像を軽量化し、クローラーの取得速度を向上させます。

制限事項

各 SNS は og:image を強力にキャッシュします。画像差し替え時は各社の URL デバッガーでキャッシュを更新してください。
余白の透明化は PNG または WebP 出力が必要です。JPEG の場合は単色の背景色が必要となります。
拡大を許可しない場合、余白付きで全体を収めるモードでは小さい画像を元のサイズのまま配置します。切り抜きで全面を埋めるモードでは、元画像や切り抜き領域が小さいと処理を止めます。拡大は明示的に許可してください。失われた細部は復元できません。

よくある質問

推奨される OGP 画像サイズは何ですか？

なぜ og:image:width と og:image:height を記述するべきですか？

og:image:width と og:image:height は画像の幅と高さをピクセル単位で示します。メタデータを読むサービスに寸法を伝えるもので、初回シェア時のプレビュー表示を保証するものではありません。

すべての SNS で全く同じように表示されますか？

いいえ。1200×630 は本ツールのプリセットです。プレビューの表示や切り抜き方は公開先ごとに異なる場合があります。公開後の表示を確認してください。

画像データがサーバに送信されることはありますか？

ありません。すべての画像変換とリサイズ処理はブラウザの HTML5 Canvas API 内で完結します。

信頼できる参考文献・標準規格

The Open Graph Protocol: image metadata ↗ — Defines og:image and optional image width and height; no mandatory pixel dimensions.
W3C Portable Network Graphics (PNG) Specification (Third Edition) ↗ — PNG file format, including lossless encoding and alpha transparency; resizing can change pixel detail.
MDN: CanvasRenderingContext2D.drawImage() ↗ — Source crop rectangles and destination dimensions.
MDN: HTMLCanvasElement.toBlob() ↗ — Browser image export; JPEG and WebP quality can introduce compression loss.

OGP 画像リサイズツール (1200×630) 無料オンライン - FreeKitX