OGP画像のデザインや設定をするときのポイント

How To

公開日：2021.03.09

最終更新：2026.02.25

SNSでシェアした際に表示されるOGP画像。各種SNSによって、表示されるサイズが異なるため、

適切な画像サイズにすること
情報が見きれないよう、必要な要素は真ん中に配置すること

といった点に配慮が必要です。

本記事では、そんなOGP画像をデザインする際のポイントを解説していこうと思います。

そもそもOGPとは
ポイント1：OGP画像のサイズ
ポイント2：文字は中央に、正方形におさまるように配置しよう
- 悪い例
- 良い例
OGP画像をデザインしたらシミュレーターでチェック・確認しよう
OGP情報をあとから変えたい場合

そもそもOGPとは

OGPとは「Open Graph Protocol (オープン・グラフ・プロトコル)」の略称。SNSでシェアした際に表示させる情報のことです。

OGPを適切に設定してあれば、ブログのURLを貼るだけで、そのサムネイル画像、タイトルと記事の要約が表示され、SNSのタイムラインで見かけたときに、目に止まりやすくなったり気をひくことができます。

みなさんfacebookやXで見かけたことがあると思いますが、例えばこんなものです。

そのページがシェアされた場合に適切な情報や画像が表示されるよう、Webサイトの制作時に、デザインや設定を行います。

下記のような記述をします。

<meta property="og:locale" content="ja_JP" />
<meta property="og:type" content="website" />
<meta property="og:title" content="名古屋のWeb制作会社 アットノエル" />
<meta property="og:description" content="名古屋のWebサイト制作会社です。「もっと早く出逢いたかった」そう言っていただけるのが私達の誇り。御社のWeb事業部として、Webサイトの企画から制作、運用、改善まで、総合的にサポートさせていただきます。" />
<meta property="og:url" content="https://www.attnoel.co.jp/" />
<meta property="og:site_name" content="アットノエル（ATTNOEL Inc.）" />
<meta property="article:publisher" content="https://www.facebook.com/attnoel/" />
<meta property="article:modified_time" content="2026-01-27T07:39:43+00:00" />
<meta property="og:image" content="https://www.attnoel.co.jp/wp-content/uploads/2022/04/ogp.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ATTNOEL_inc" />

ポイント1：OGP画像のサイズ

SNSの種類や使用する画像のサイズ、指定方法等によってOGP画像の表示サイズは異なります。

すごくざっくりいうと、横長で表示される場合と正方形で表示される場合があります。

例を挙げてみましょう。

facebook

facebookの場合は、アップする画像サイズで自動的に振り分けられます。

最小サイズ	200px ✕ 200px
ファイルサイズ	8MB以下
アスペクト比	1.91:1（大）　または　1：1（小）
ファイル形式	JPG, PNG, GIF

»Meta for Developers

X（旧Twitter）

XのOGPは大小2種類のタイプがあります。Twitter Cardと呼称します。

最小サイズ	144px ✕ 144px
最大サイズ	4096px ✕ 4096px
ファイルサイズ	5MB以下
アスペクト比	1.91:1（大）または 1：1（小）
ファイル形式	JPG, PNG, WEBP, GIF（GIFアニメは最初のフレームのみ）, SVGは不可