OGP 画像は、ブログや Web サイトのリンクが X（旧 Twitter）・Facebook・LINE などでシェアされたときに表示される画像です。 上のエディタは推奨サイズの 1200×630 になっているので、タイトルとサイト名を書き換えるだけで OGP 画像が完成します。
OGP 画像の推奨サイズ
| サイズ | 1200×630 ピクセル |
|---|---|
| 縦横比 | 約 1.91:1 |
| 形式 | PNG または JPEG |
X の大きな画像カードは 2:1 に近い比率で表示されるため、上下の端が少し切れることがあります。 タイトルなどの大事な要素は、ひな形の枠の内側（中央寄り）に置いておくと安心です。
作り方（3 ステップ）
- タイトルとサイト名を書き換える：「選択」ツールで文字をクリックし、左側のパネルで書き換えます。 長いタイトルは要点だけに縮めるか、2 つのテキストに分けて 2 行にします。
- サイトの色に合わせる：枠や下線、飾りの図形を選んで、サイトのテーマカラーに変えると統一感が出ます。
- PNG で保存して設定する：解像度「1x」でダウンロードすると 1200×630 の画像になります。 ブログの管理画面やテーマの設定で、記事の OGP 画像（アイキャッチ画像）として登録してください。
HTML で設定する場合
自分でサイトを作っている場合は、ページの <head> に次のようなタグを書きます。
<meta property="og:image" content="https://example.com/ogp.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />画像の URL は https:// から始まる完全な URL にします。設定後は、各 SNS のカード確認ツールやシェアのプレビューで表示を確かめてください。
シェアされやすい OGP 画像のコツ
- 文字は大きく、少なく：タイムラインでは画像が小さく表示されます。タイトルは 20 文字程度までを目安にしましょう。
- 記事ごとに作る：すべての記事で同じ画像を使うより、記事の内容がわかる画像のほうがクリックされやすくなります。
- 型を決めて使い回す：配置と配色を固定し、タイトルだけ変えるようにすると、作業が速く、サイトの印象もそろいます。
画像形式の選び方はPNG と JPEG の違いと使い分け、 SNS 向け画像のコツはSNS 用のシンプルな図解・画像を作るコツで解説しています。
よくある質問
画像を変えたのに、SNS で古い画像が表示されます
SNS 側が以前の画像を一時的に保存していることがあります。時間をおくか、各サービスのカード確認ツールで URL を読み込み直すと更新されます。
背景を透明にしてもよいですか？
おすすめしません。SNS によっては透明部分が黒や白で表示され、見た目が崩れることがあります。OGP 画像は背景色を付けて保存しましょう。