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

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

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

そのため、AMPページで記事の構造化データを作成する場合は、以下の画像サイズを使用することをおすすめします。

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

しかしながら、この条件内であったとしても、実際にはSearch Consoleからは重大ではない問題として、「推奨サイズより大きい画像を指定してください」とのお知らせが来ることが多いです。そのため、構造化データに設定する画像は「幅1,200px以上」を使用されることをおすすめします。

なぜ1200px以上なのかというと、当初は「画像の幅は 1,200 ピクセル以上」との記載もあったためですが、現在では上記のように条件が緩和されています。

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

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

このような場合、サイトのコンテンツ内ではアスペクト比を保ったままで縮小して表示すれば、適度な大きさで表示することができます。

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

ただし、第一に優先する条件はモバイルファーストであるため、まずはモバイル端末での表示を最適化する必要があります。そのため、最低でも「幅414px以上」、できれば「幅428px以上」に設定することがおすすめです。

  • 「幅428px」以上

モバイル端末の解像度のシェア

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

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

これらの条件のもとで、具体的に何pxの画像がよいのかについては、アスペクト比が16x9の場合は「480px × 270px」や「640px × 360px」、アスペクト比が4x3の場合は「480px × 360px」あたりのサイズが候補にあげられます。

iPadなどのタブレット端末では幅800pxあたりでもよいかもしれませんが、スマホの次に、タブレット端末よりもPCでの表示を優先する場合は、幅500px前後がよいものと思います。

ただし、画像サイズが大きい場合はダウンロードサイズも大きくなるため、モバイル環境ではサイトの表示に時間がかかってしまう可能性もあります。その場合、サイトのコンテンツ内では構造化データ用の画像自体を縮小して等倍で使用するか、もしくは画像の容量を圧縮して使用されるとよいでしょう。

当サイトでは、コンテンツ内で使用する画像を単純に1200pxに拡大して保存し、記事構造化データの画像として使用していますが、この場合はぼやけてしてしまう傾向があると感じています。

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

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

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

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

width:320px、height:180px(※幅×高さ=57,600)
width:480px、height:270px(※幅×高さ=129,600)
width:640px、height:360px(※幅×高さ=230,400)
width:800px、height:450px(※幅×高さ=360,000)
width:960px、height:540px(※幅×高さ=518,400)
width:1120px、height:630px(※幅×高さ=705,600)
width:1200px、height:675px(※幅×高さ=810,000)
width:1280px、height:720px(※幅×高さ=921,600)

当サイトのコンテンツ幅は660pxのため、「width:640px、height:360px」あたりのサイズはやや大きめに感じられます。

また、一般的なスマホのデバイス幅は「375px~428px」程度となっているため、それ以上のサイズを考えると、最終的には「width:480px、height:270px」あたりが無難な選択になるかもしれません。

Articleの記事構造化データで使用する画像については、「幅と高さをかけて 50,000 ピクセル以上」が推奨されているため、上記のサイズはどれでも推奨サイズを満たしていることになります。ただし、実際には幅1200px程度の画像でないとSearch Consoleから「重大ではない問題」として通知が来るはずです。

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

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

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

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

width:320px、height:240px(※幅×高さ=76,800)
width:360px、height:270px(※幅×高さ=97,200)
width:400px、height:300px(※幅×高さ=120,000)
width:440px、height:330px(※幅×高さ=145,200)
width:480px、height:360px(※幅×高さ=172,800)
width:520px、height:390px(※幅×高さ=202,800)
width:560px、height:420px(※幅×高さ=235,200)
width:600px、height:450px(※幅×高さ=270,000)
width:640px、height:480px(※幅×高さ=307,200)
width:680px、height:510px(※幅×高さ=346,800)
width:720px、height:540px(※幅×高さ=388,800)
width:760px、height:570px(※幅×高さ=433,200)
width:800px、height:600px(※幅×高さ=480,000)
width:840px、height:630px(※幅×高さ=529,200)
width:880px、height:660px(※幅×高さ=580,800)
width:920px、height:690px(※幅×高さ=634,800)
width:960px、height:720px(※幅×高さ=691,200)
width:1000px、height:750px(※幅×高さ=750,000)
width:1040px、height:780px(※幅×高さ=811,200)
width:1080px、height:810px(※幅×高さ=874,800)
width:1120px、height:840px(※幅×高さ=940,800)
width:1160px、height:870px(※幅×高さ=1,009,200)
width:1200px、height:900px(※幅×高さ=1,080,000)
width:1240px、height:930px(※幅×高さ=1,153,200)
width:1280px、height:960px(※幅×高さ=1,228,800)

当サイトでは、「width:480px、height:270px」と「width:480px、height:360px」あたりのサイズを好んで使っています。これらの画像を単純に「width:1200px、height:675px」、「width:1200px、height:900px」に拡大して保存し、「Article」の構造化データで画像に指定しています。

ペイント等で画像を開き、サイズ変更で水平方向を「1200」に指定すると簡単に拡大できます。ただし、拡大するとぼやけてしまうため、あらかじめ高解像度の「1200px」の画像を用意した上で、「幅480px」に縮小して使用することをおすすめします。

また、スクエアの「1:1」については縦長になってしまうため、当サイトではほとんど使うことはありません。できるだけスクロールしなくても済むよう、縦長よりも横長の画像サイズを選択されるとよいでしょう。