X（旧Twitter）・Facebook・LINEなど、 主要SNSごとのOGP画像推奨サイズを一覧で確認できます。
SNSを選択
画像をテスト
X (Large Card) の仕様
- 推奨幅: 1200px
- 推奨高さ: 630px
- アスペクト比: 1.91:1
プレビューシミュレーター
セーフエリアについて:
赤い点線の内側は、あらゆるデバイスで確実に表示される範囲です。ロゴや重要なテキストはこの範囲内に配置することを推奨します。| サービス名 | 推奨ピクセル | 比率 | 最大容量 |
|---|---|---|---|
| X (Large Card) | 1200 × 630 | 1.91:1 | 5MB以下 |
| 1200 × 630 | 1.91:1 | 5MB以下 | |
| LINE | 1200 × 630 | 1.91:1 | 5MB以下 |
| 1200 × 627 | 1.91:1 | 5MB以下 |
OGP画像サイズ一覧ツールとは？
本ツールは、X（旧Twitter）、Facebook、LINEなどの主要SNSでURLが共有された際に表示される「OGP画像」の推奨サイズを瞬時に確認・シミュレートできるWeb制作者向けツールです。 各プラットフォームごとに異なる複雑なアスペクト比や、デバイスによって端が切り取られる「セーフエリア」の問題を解決します。 お手持ちの画像をアップロードして実際の表示イメージを確認できるため、デザイン公開後の「文字が切れてしまった」といったミスを未然に防ぐことが可能です。
こんなシーンで便利です
SNSマーケティング・拡散用
キャンペーンやブログ記事のサムネイルを制作する際、最も目立つ「1.91:1」の黄金比に合わせた最適な画像サイズを確認できます。
サイト制作・コーディング時の確認
開発環境でOGP設定が正しく動作するか、実際のメタタグに指定する数値（width/height）の備忘録として活用いただけます。
デザインのセーフエリア確認
スマホ版のXやLINEなどで、画像がトリミングされて重要なキャッチコピーやロゴが隠れてしまわないかシミュレートできます。
クライアントへの仕様説明
制作依頼時や納品時に、各SNSの推奨ピクセル数やファイル容量の制限を一覧表としてそのまま提示・共有できます。
使い方は簡単 3ステップ
- 「SNSを選択」から、確認したいプラットフォームをクリックします。
- 「画像をテスト」に作成したデザイン案をアップロードします（任意）。
- プレビュー画面で「セーフエリア」に文字が収まっているか確認します。
※画像はブラウザ内でのみ処理されるため、サーバーにアップロードされる心配はありません。
ご利用時の注意点
- 画像の容量制限：主要なSNSでは「5MB以下」が推奨されています。高画質すぎて重くなると、表示されない場合があるため注意してください。
- アスペクト比の一致：現在の主流は 1.91:1（1200×630px）ですが、これ以外の比率だとSNS側で勝手に拡大・縮小やトリミングが行われることがあります。
- X（旧Twitter）のカード形式：本ツールは「Large Image Summary Card」を想定しています。設定（metaタグ）によっては正方形で表示される場合もあります。
主要SNSのOGP画像・推奨サイズ早見表（最新版）
主要なSNSプラットフォームごとの推奨ピクセル数、アスペクト比、および画像容量の制限をまとめています。
| プラットフォーム | 推奨サイズ (px) | 比率 / 形式 | 容量・備考 |
|---|---|---|---|
| X (Twitter) | 1200 × 630 px | 1.91:1 / 黄金比 | 最大5MB以下推奨 |
| 1200 × 630 px | 1.91:1 | 最小600×315px | |
| LINE | 1200 × 630 px | 1.91:1 | トーク画面で表示 |
| 1080 × 1080 px | 1:1 / 正方形 | プロフィール共有等 | |
| YouTube | 1280 × 720 px | 16:9 / HD | カスタムサムネイル |
| note | 1280 × 670 px | 1.91:1近傍 | 見出し画像サイズ |
| Slack | 任意のサイズ | 自動縮小 | メタデータから引用 |
【重要】OGP画像の「セーフエリア」と文字切れ対策
各SNSでは、デバイスや表示箇所によって画像の端が数％〜10%程度トリミングされる場合があります。特に「インスタリール」や「YouTubeショート」、モバイル版Xのタイムラインでは中央付近に重要な情報（ロゴやキャッチコピー）を配置する「セーフゾーン」を意識することが不可欠です。本ツールでは、このセーフエリアを視覚的に確認できるよう設計されています。
表示が更新されない場合の対処法（キャッシュクリア）
- X (Twitter): 「Card Validator」は廃止されましたが、投稿画面にURLを貼り直すことで反映されることがあります。
- Facebook: 「Sharing Debugger」を使用し「もう一度スクレイピング」を実行してください。
- LINE: 「PagePicker」のキャッシュ削除ツールを利用することで即時反映が可能です。
検索流入とエンゲージメントを最大化する構造化メタデータと画像配信戦略
推奨ピクセルサイズに準拠した画像を書き出すだけでなく、クローラーへのインデックス最適化や動的な画像生成技術を組み合わせた、一歩進んだ実装と運用のノウハウです。
検索エンジンの画像インデックスを最適化するマークアップ手法と画像パスの要件
HTMLのヘッドセクション内に記述するog:imageタグには、相対パスではなく必ずスキーマ（https://）から始まる絶対URLを指定してください。
また、クローラーが画像を効率的に検出できるよう、画像の拡張子はWebP、JPEG、またはPNGを明記し、同一ページ内に複数の画像メタタグを設定する場合は、プライマリ（最優先）の画像を最も上位の行に配置することがSEOクローラーの巡回ロジックにおける定石です。
Next.js環境における動的OGP画像（Image Response）の自動生成とエッジ配信の設計
ブログ記事のタイトルやアイキャッチを動的に反映させたOGP画像を量産する場合、Next.jsの@vercel/ogを利用した動的画像生成（Image Response）の実装が極めて有効です。
エッジランタイム（Edge Runtime）上で実行することで、リクエストから画像生成までの応答速度を数ミリ秒単位に短縮でき、生成された画像コンポーネントをCloudflare等のCDNで永続キャッシュ（stale-while-revalidate）させることで、サーバー負荷を完全に抑えながら常に最新の最適化画像を配信可能になります。
メディアサイトや複数ライター環境におけるOGP運用レギュレーションとアセット管理
WordPressなどのCMSやJamstack構成のメディアを複数人で運営する場合、投稿画面にファイルサイズチェックやアスペクト比のバリデーション機能をシステム側で組み込むことが推奨されます。
デザインファイルをFigmaやAdobe Illustratorで共通コンポーネント化（1200×630ピクセルのテンプレート）して配布し、出力フォーマットを強制するフローを作ることで、アセットの品質ばらつきを防ぎ、入稿ミスによる表示崩れを組織全体で予防できます。
よくある失敗と対策
1200×630px以外の不適切なアスペクト比で入稿し、SNS側で両端や上下が意図せず自動トリミングされる
OGP画像の推奨サイズである1200×630px（アスペクト比1.91:1）を無視し、正方形や16:9の比率でmetaタグを設定すると、X（旧Twitter）のLarge Image summaryやFacebook、LINEのタイムライン表示で画像の両端や上下が強制的に切り取られ、歪んだレイアウトや画質劣化（ボケる原因）を引き起こします。
💡 対策・解決策を見る▼
画像の上下左右ギリギリまで文字を配置したデザインで、モバイル表示時の「文字切れ・ロゴ隠れ」が発生する
デスクトップ表示やPCブラウザでは全体が見えていても、スマホアプリ版のXやLINEなどのタイムライン、スマートフォンの画面幅にリサイズされた一覧画面では、上下左右が最大で数％〜10%程度クロップ（トリミング）される仕様になっているため、重要なキャッチコピーやロゴ、テキスト情報が隠れて視認性が損なわれます。
💡 対策・解決策を見る▼
OGP画像のファイル容量が5MBを超えてしまい、SNSのクローラーに読み込まれずサムネイルが非表示になる
高解像度の写真やグラフィックを圧縮（最適化）せずにそのまま書き出すと、ファイルサイズが主要SNS（特にXなど）の制限である5MBを上回ってしまいます。この場合、SNSのタイムライン上で画像リンクが生成されず、ただのテキストリンクだけが表示されるため、CTR（クリック率）やSNSマーケティングの拡散力が著しく低下します。
💡 対策・解決策を見る▼
ソースコードを修正した後にSNSのキャッシュをクリアせず、古いデザインやエラー画像がタイムラインに残り続ける
HTMLの`og:image`タグのURL（width、height含む）を変更したり、同じファイル名で画像を上書き保存（デプロイ）しても、XやFacebook、LINEのサーバー側に古いデータがキャッシュとして保存されているため、数日から数週間は過去の古い画像やエラー画像がリツイート・共有時に表示され続ける原因になります。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.ツールにテスト画像をアップロードすると外部にデータが漏洩する心配はありませんか
A. 一切ありません。当ツールの画像表示テストやシミュレーション処理はすべてお使いのブラウザ内のみで実行されます。選択した画像ファイルが外部のサーバーに送信されたり保存されたりする仕組みはないため、公開前の機密デザインでも安心して検証を行えます。
Q.推奨サイズである1200ピクセルより小さい画像を設定するとどうなりますか
A. アスペクト比が黄金比の1.91対1を維持していても、解像度が低すぎる場合はSNSのタイムライン上で画像が引き伸ばされ、画質劣化によるボケや粗さが目立つ原因になります。高解像度ディスプレイでも鮮明に表示させるため、最小でも横600×縦315ピクセル以上、理想的には推奨値である1200×630ピクセルでの作成が必要です。
Q.推奨ファイル容量である5MBを超えた画像をそのまま指定した場合の挙動を教えてください
A. 各プラットフォームのクローラーが画像を正常に読み込めなくなるため、URLを共有した際にサムネイル画像が非表示になり、テキストリンクのみが表示される状態になります。画質を保ちながらPNGからJPEGやWebP形式へ変換するなど、容量を1MB以下を目安に圧縮してからサーバーへデプロイしてください。
Q.Xのポスト画面で画像が正方形になってしまう設定の原因は何ですか
A. HTMLのメタタグに記述されているカード形式の指定が影響しています。本ツールが想定している横長の大型画像で表示させるには、メタタグのカードタイプ設定にSummary Card with Large Imageを指定する必要があります。これが指定されていない場合は、正方形の小さなサムネイル表示に切り替わることがあります。
Q.メタタグの記述を最新デザインに修正したのにSNS上のプレビューが古いままです
A. 各SNSのサーバー側に過去のOGPデータがキャッシュとして保存されていることが原因です。変更を即座に反映させるには、Facebookの共有デバッガーで再スクレイピングを実行したり、LINEの提供する削除ツールでキャッシュをクリアしたり、Xの投稿画面へURLを貼り直してクローラーの再巡回を促す必要があります。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。