「OGP画像って何サイズで作ればいいんだろう?」と迷ったことはありませんか?
SNSにリンクをシェアしたとき、画像が変なトリミングで表示されてしまった、そんな経験をお持ちの方も多いと思います。
この記事では、OGP画像の正しいサイズとSNS別の違い、そして自分でサイズを整える方法を順を追って説明します。
OGP画像とは何か、なぜ重要なのか
OGPってよく聞く言葉ですが、「結局何のこと?」と思っている方も多いですよね。
難しく聞こえますが、仕組みを知ると「あ、あれのことか」とすぐに分かります。
SNSでシェアされたときに表示される画像の正体
OGPとは「Open Graph Protocol」の略で、ウェブページをSNSでシェアしたときにどんな見た目で表示されるかを決める仕組みです。
タイトル、説明文、サムネイル画像、これらをHTMLのmetaタグで指定しておくと、XやFacebookでリンクをシェアしたときに自動でカードとして展開されます。
この「カード画像」がOGP画像です。
テキストリンクだけのシェアより、OGP画像が表示されるとクリック率が大きく上がることが分かっています。
見た目で内容が伝わるから、自然と目を引くんですよね。
OGP画像がないとどうなる?
OGP設定がないページをSNSでシェアすると、テキストだけのリンクになるか、サイト内の別の画像が無作為に引用されて表示されることがあります。
最悪の場合、サイトのロゴ画像や関係ない写真が出てきてしまって、せっかくシェアしても内容が伝わらない、ということも。
ここ、地味に重要なポイントです。
記事を書いたり商品ページを作ったりしているなら、OGP画像は最低1枚、ちゃんと用意しておくと損がないです。
SNS別・OGP画像の推奨サイズ一覧
ここでは各SNSの推奨サイズをまとめます。
「SNSごとにサイズが違うって聞いたけど、どれに合わせればいいの?」という疑問に答えていきますね。
Facebook・X(旧Twitter)・LINEのサイズをまとめて確認
各SNSが推奨しているOGP画像のサイズは次のとおりです。
- Facebook: 1200 × 630px(アスペクト比 1.91:1)
- X(旧Twitter): 1200 × 675px(アスペクト比 16:9)
- LINE: 1200 × 630px または 1200 × 1200px(正方形)
SNSによって微妙に違うことが分かりますね。
特にLINEは正方形での表示にも対応しているため、ブログ記事のシェアには横長、商品紹介や料理写真には正方形というように使い分けもできます。
どのSNSにも対応する汎用サイズとは
複数のSNSで使い回すなら、1200 × 630px が最も無難です。
Facebook・X(旧Twitter)・LINEのどれでもおおむね問題なく表示されます。
アスペクト比でいうと「1.91:1」に近い横長の画像、と覚えておくと分かりやすいですよ。
1枚用意しておいてどこでも使う、というのが現実的なやり方だと思います。
ただし、テキストを画像の端ギリギリに配置すると、SNSによってはトリミングされて文字が見切れることがあります。
重要な情報は画像の中央寄りに配置しておくと安心です。
OGP画像を正しいサイズで作成する方法
サイズが分かったら、実際に画像を作ったりリサイズしたりする方法を見ていきましょう。
写真やデザイン素材を持っているなら、専用ツールでサイズを合わせるだけで完成します。
1200x630pxに画像をリサイズする手順
持っている画像を1200 × 630pxに変換したいときは、ブラウザ上で動作する画像変換ツールが便利です。
リサイズさんは登録不要で使えて、すべての処理がブラウザ内で完結するので画像がサーバーに送信されることがありません。
操作は「画像をドロップ → 幅を1200、高さを630に指定 → 変換」と進めるだけ。
サイズ入力欄に数値を入れるだけで、プロ用ソフトを使わなくても目的のサイズにできます。
複数の画像を一括で変換することもできるので、ページ数が多いサイトの更新作業にも向いていますよ。
アスペクト比を守って切り抜く(クロップ)コツ
縦長の写真を1200 × 630pxに変換しようとすると、単純にリサイズしても比率が合わないことがあります。
そういうときは「クロップ(切り抜き)」を先に行ってから、リサイズするのが正しい手順です。
クロップ時のポイントは、被写体や重要な要素を中央に来るようにすること。
端を大きく切り落とすことになっても、SNS表示で「ちゃんと伝わる画像」になる方が大事ですよね。
リサイズさんにはクロップ機能もあるので、切り抜いてからリサイズまで一か所で完結できます。
JPEGとPNGどちらで保存すべきか
OGP画像の保存形式は、基本的にJPEGで問題ありません。
JPEGはファイルサイズが小さくなりやすく、ページの読み込みに影響しにくいからです。
ただし、透明な背景(透過)が必要なロゴや図解の場合はPNGを選んでください。
JPEGは透過に対応していないので、背景を透明にしたい画像に使うと、白や黒で塗りつぶされてしまいます。
文字やイラストだけのシンプルな画像ならPNG、写真やグラデーションが多い画像ならJPEGという基準で選ぶと分かりやすいです。
OGP画像が正しく設定されているか確認する方法
画像を作ったら、次は「ちゃんと表示されるか」を確認しましょう。
設定してみたけど反映されていない、ということは意外とよくあります。
各SNSの公式デバッガーツールを使う
各SNSには、OGP設定を確認するための公式ツールが用意されています。
- Facebook: シェアデバッガー(URLを入力するとOGP情報を確認できる)
- X(旧Twitter): Card Validator(現在は一部機能が制限されています)
- LINE: LINEの投稿にURLを貼り付けてプレビューを確認
デバッガーにページURLを入れると、og:imageが正しく読み込まれているか、画像サイズが適切かなどをチェックしてくれます。
「なぜか画像が出ない」というときは、まずここを確認してみてください。
og:imageタグが抜けていないかHTMLをチェック
OGP画像を設定するには、HTMLの<head>内に以下のようなmetaタグが必要です。
<meta property="og:image" content="https://example.com/ogp.jpg">
このタグが抜けていたり、画像のURLが間違っていたりすると、SNSで画像が表示されません。
WordPressを使っている場合は、YoastやAll in One SEOなどのプラグインを使うと、OGP設定が簡単に管理できます。
手動でHTMLを書いている方は、ページごとにog:imageのURLが正しく設定されているか確認してみてください。
OGP画像のサイズ調整で迷ったときに試してほしいこと
OGP画像を準備するうえで大事なことをふり返ると、「1200 × 630pxを基準にする」「SNSごとの微妙な違いは汎用サイズでカバー」「表示確認は公式ツールで」の3点です。
画像を用意しているのに表示がうまくいかない、という場合は、サイズより先にog:imageタグの設定を確認してみるのが近道かもしれません。
サイズを整える作業は、一度やり方を覚えてしまえば毎回悩まずに済みます。
横長の写真を1200 × 630pxに変換したいときや、複数のOGP画像をまとめて処理したいときは、登録なし・制限なしで使えるリサイズさんを試してみてください。
プライバシーが気になる方にも、ブラウザ内処理で画像がサーバーに渡らない設計になっているので安心して使えます。