記事の構造化データにおすすめの画像サイズ

2021年7月6日 （更新 2026/9/23）

記事タイプの構造化データで推奨される画像サイズについて、Google 検索セントラルのArticle（記事）の箇所には以下のように記載されています。

適切な画像が選択されるように、アスペクト比が 16x9、4x3、1x1 の高解像度画像（幅と高さをかけて 50,000 ピクセル以上になる画像）を指定してください。

（出典：記事（Article）の構造化データ | Google 検索セントラル）

そのため、記事の構造化データを作成する場合の画像サイズは以下が最低要件となります。

• アスペクト比が 16x9、4x3、1x1
• 幅と高さをかけて 50,000 ピクセル以上

しかし、この条件を満たしていても、実際にはSearch Consoleから重大ではない問題として、「推奨サイズより大きい画像を指定してください」とお知らせが来ることが多いです。

これはGoogle Discoverがより大きな画像を推奨しているためです。

• 幅 1,200 ピクセル以上
• 合計 30 万ピクセル以上の高解像度
• アスペクト比: 16:9

そのため、Article構造化データの最低要件は50,000ピクセル以上ではあるものの、Google Discoverで大きな画像を表示させたい場合は「幅1,200px以上、かつ合計30万ピクセル以上」の画像サイズをおすすめします。

これは、コンテンツ中のすべての画像を幅1,200px以上で設定するという意味ではなく、構造化データのjsonで指定する画像についての要件になります。

ちなみに、以前までトップニュース枠に掲載されるには、ArticleやNewsArticleなどの構造化データを記述したAMPページであることが必須でした。しかし、現在ではAMP要件は撤廃されており、通常のHTMLページでも掲載されるようになっています。

記事コンテンツ内の画像サイズは何pxが最適か？

第一に優先する条件はモバイルファーストとなるため、まずはモバイル端末での表示を最適化する必要があります。

ガラケーサイトの時代には幅320pxが主流でしたが、現在はその大きさだと小さく表示されてしまい、キャプチャー画像の文字などが判別できない可能性があります。

現在、スマホのCSSピクセルでのデバイス幅（ビューポート幅）は、375px～414px程度が主流となっています。

（※参照: StatCounter Global Stats - Screen Resolution Market Share）

そのため、最低でも「幅414px以上」、できれば「幅428px以上」で対応することをおすすめします。

加えて、Appleのレティナディスプレイなど、最近のスマホは高精細ディスプレイを採用しているため、物理的な画面の解像度（DPR）は表示幅の2～3倍あります。そのため、スマホ画面で画像を鮮明に表示させるには、表示幅以上の解像度（幅750px～1200px程度）で画像を作成し、CSSで縮小して表示させるのが主流となっています。

次に、デスクトップの場合、1920x1080のシェアが約27％、2560x1440で3％あるため、この3割以上のシェアがある幅1920px以上の解像度をメインに設定することをおすすめします。ただし、この1920pxは画面全体の解像度になるため、サイトのビューポート幅は1000px前後で設定されているケースが多いです。

■テキストとのバランス

画像メインのコンテンツでは、コンテンツ内にwidth:100%;で表示しても良いと思いますが、テキスト主体のコンテンツの場合、画像が大きいと圧迫感が出てきます。そのため、一般的にはコンテンツ幅の70～80%程度に設定しているサイトが多いと感じています。

一般的なサイトの場合、width幅を1000px程度に設定しているサイトが多いですが、2カラムの場合、コンテンツとサイドバーの比率は7：3程度のケースが一般的なため、700px前後のコンテンツ幅が多い傾向にあります。

そのため、700pxの70～80％程度でいえば、500px～600px程度がバランスがよいと思います。ただし、上記のようにデスクトップでは1920px以上の解像度が主流になってきたため、サイトのwidth幅を1100～1200px程度まで広げているサイトも多くなってきました。

サイトのwidth幅が1200pxの場合、コンテンツ幅が800px前後となってしまうため、その70～80%程度でいえば、600px以上に設定した方がよいかもしれません。

■画像のアスペクト比

縦長の画像の場合、サイズを大きくするとスクロールが煩わしくなります。同じ600pxの画像サイズでも、アスペクト比が16x9より1x1の方が圧迫感が出てきてしまうため、できるだけ、16x9など横長の画像を使用した方が使いやすいです。

■サイトスピード

画像サイズ（px）が大きくなると、画像のサイズ容量（KB）も大きくなってしまい、読み込み速度が低下してしまう傾向があります。

その際は、HTML標準の遅延読み込み属性であるloading-lazyを画像タグに設定し、<img loading="lazy">とすることをおすすめします。さらに、より複雑な表示制御が必要な場合には、JavaScriptのIntersection Observerも活用することができます。

もしくは画像の容量を圧縮して使用すると、読み込み速度の低下を抑えることができます。

ちなみに、SVG画像は軽量ですが、こちらはベクター画像のため、幅や高さといったピクセルの概念はありません。googleの構造化データ（JSON-LD）では、1200pxなどの画像サイズが推奨されている以上、SVG画像は非対応となるため、JPEG、PNG、WebPなどのラスター画像を使用することをおすすめします。

■記事構造化データでの設定

記事構造化データで設定する画像は、Discover対応の幅1200px以上のサイズがおすすめですが、その画像をサイトのコンテンツ内で使用する場合、PCサイトではコンテンツ幅いっぱいに大きく表示されてしまい、テキストとのバランスで圧迫感が出てくると思います。

このような場合、元画像のサイズは高解像度を保ったまま大きなサイズで使用し、サイト内での表示のみ縮小して設定すれば、適度な大きさで表示することができます。

構造化データの画像は表示サイズではなく、元画像の解像度を評価するため、元画像の実サイズが1200px以上であれば、要件を満たすことになります。

例えば、記事・構造化データ用では「1280px × 720px」の画像を使用し、記事中の<img src=タグではアスペクト比を保ったまま「width="640" height="360"」で指定すると「x2」の高画質で表示されます。あるいは、「width="320" height="180"」で指定すると、アスペクト比を保ったまま「x4」で表示されます。

アスペクト比が16x9の場合の表示サイズとしては、「480px × 270px」や「640px × 360px」、アスペクト比が4x3の場合は「480px × 360px」あたりが候補にあげられます。

幅480pxの場合、2、4、8、12、16で割り切れるため、縮小や拡大して使用する際に使い勝手がよく、主要なスマホの解像度もカバーするので使いやすいかもしれません。

アスペクト比「16x9」の画像サイズの候補

以下は、単純にアスペクト比「16：9」で端数が出ない数字を拾ったものです。

また、heightが奇数の場合も2分の1に縮小する際には割り切れないため、以下の数字が候補になるかと思います。

当サイトのコンテンツ幅は660pxのため、コンテンツ中の表示としては「width：640px、height：360px」あたりはやや大きめに感じられます。また、一般的なスマホのデバイス幅は「375px～428px」程度となっているため、それ以上のサイズで考えると、最終的には「width：480px、height：270px」あたりが無難でバランスのよい選択になります。

ただし、記事の構造化データ（Article）に指定する画像については、上記のようにDiscover対応となる「幅1,200px以上、かつ合計30万ピクセル以上」が推奨されています。そのため、上記の表の中で構造化データの要件を満たす「1200px × 675px」や「1280px × 720px」のサイズをおすすめします。

アスペクト比「4x3」の画像サイズの候補

同様に、以下はアスペクト比「4：3」で、端数の出ない数字を拾ったものです。

アスペクト比「16：9」と比べると、使用できそうなサイズが多くなりました。

当サイトでは、コンテンツ中では「width：480px、height：270px」と「width：480px、height：360px」あたりのサイズを好んで使っています。

一方、「Article」の構造化データで指定する画像については、Discover対応のアスペクト比: 16:9が推奨されているため、「width：1200px、height：675px」、「width：1200px、height：900px」を選択することが多いです。

ただ、注意したい点として、ペイントなどのサイズ変更で1200pxなどに拡大することもできますが、無理やり拡大すると画像がぼやけてしまい、構造化データ用として大きな画像を設定する意味がなくなってしまいます。そのため、あらかじめ高解像度の「1200px」の画像を用意した上で、「幅480px」に縮小するなりして使用することをおすすめします。

そのほか、スクエア（1:1）アスペクト比の画像は縦長となってしまうため、ページ内の縦方向スクロールを減らす意味でも、基本的には16:9や4:3といった横長の画像サイズを中心に選択すると良いでしょう。