Fix Webmaster Image Size Warning Smaller Than Recommended Size

Overcoming Webmaster Image Size Smaller Than Recommended Size - Recently a notification from Google Webmaster or Search Console has appeared for AMP blogs with an image size warning smaller than the recommended size or in English image size smaller than recommended size.

This warning about structured data in AMP refers to images smaller than the recommended size. This can prevent pages from appearing with all the features associated with AMP on Google Search, and can also prevent Discover blog cards from appearing with large images (this can cause a decrease in website traffic and user involvement).

But when checked in the search console, Google does not give more information about which images cause errors. Of course this is confusing, which part should be corrected.

For this reason, I continue to explore all the links given about this warning. Now to fix it, we must use larger images in accordance with Google's guidelines.

For schema.org data structures for Article type, NewsArticle, and BlogPosting, for ImageObject items must use large images, at least a minimum image width of 1200px with a ratio of 16: 9, 4: 3, or 1: 1.

So to overcome this problem, we must first create a thumbnail image for each post (image with noscript tag) with the ratio I mentioned above, for example 1280x720 for a ratio of 16: 9 or 1200x900 for a 4: 3 ratio or a 1: 1 square image that is 1200x1200.

Then the second step, please enter edit HTML, then look for the code<b:includable id='post' var='post'>

Below the code, look for the following code, or code that looks like the following code (it might be different depending on the AMP template maker).

<b:if cond='data:post.firstImageUrl'>

<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>

  <meta expr:content='resizeImage(data:post.firstImageUrl,800,&quot;1:1&quot;)' itemprop='url'/>

  <meta content='800' itemprop='width'/>

  <meta content='800' itemprop='height'/>

  </div>

<b:else/>

<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>

  <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMGc4Xzuebef2e8v2v94k53UU8aZ-cxFVxUaBN83hzc9Bqo_8SOFvQbYaKik8In7JCfmF1FvfnK3PrYDVZ3Kr_AGob-RRTTWcGeM7V-cKr0TxW4fiDuoCORuI0BG9xxjYaiYW-Drs2DHI/s800-c/no-thumbnail.jpg' itemprop='url'/>

  <meta content='800' itemprop='width'/>

  <meta content='800' itemprop='height'/>

  </div>

    </b:if>

Then please replace with the following code:

1. For 1280x720 thumbnails for a 16: 9 ratio.

<b:if cond='data:post.firstImageUrl'>

<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>

  <meta expr:content='resizeImage(data:post.firstImageUrl,1280,&quot;16:9&quot;)' itemprop='url'/>

  <meta content='1280' itemprop='width'/>

  <meta content='720' itemprop='height'/>

  </div>

<b:else/>

<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>

  <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8B4O_aFaTHgvgEQ2R3gjlVaAmxfTYOs4XBBU2VYOvlnk6Dl5qqgTuLv9meLL8j18VEV1X_iG2DdoouAKLf3-xygNmHvZMK4E4RbG67RBlXsKDpZpaZeklLY3Qyrfp7OCGnsZjFZgjbo/s1280/no-thumbnail.jpg' itemprop='url'/>

  <meta content='1280' itemprop='width'/>

  <meta content='720' itemprop='height'/>

  </div>

    </b:if>

2. Thumbnail 1200x900 for ratio 4:3.

<b:if cond='data:post.firstImageUrl'>

<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>

  <meta expr:content='resizeImage(data:post.firstImageUrl,1200,&quot;4:3&quot;)' itemprop='url'/>

  <meta content='1200' itemprop='width'/>

  <meta content='900' itemprop='height'/>

  </div>

<b:else/>

<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>

  <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz8vAb57eEBcTXfIOQwMD-R1sLHvY-pwEcJXJT8RjhOg3UbRO7zdZqVqR0a-YRY8V67oco6lTx64JGFdiYfDt1mFDUM-jIpksEw9gazciMU16HIOM4lClqW7Nr6zABUnzti7xPV-cvQu4/s1200/no-thumbnail_1.jpg' itemprop='url'/>

  <meta content='1200' itemprop='width'/>

  <meta content='900' itemprop='height'/>

  </div>

    </b:if>

3.Thumbnail square 1200x1200 for ratio 1:1.

<b:if cond='data:post.firstImageUrl'>

<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>

  <meta expr:content='resizeImage(data:post.firstImageUrl,1200,&quot;1:1&quot;)' itemprop='url'/>

  <meta content='1200' itemprop='width'/>

  <meta content='1200' itemprop='height'/>

  </div>

<b:else/>

<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>

  <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1vLZxfNtj5_0s-5DEcbG6uWuwREFcmVFqQ498OzSxxrUG2zgyE2yAmsReI7ObwWdeGdOVwA-XrkkD-Y3Zjj2NgoTLyws57b0v566IiOApNHZN-alu9UIf7gfKJNBTQnAx5ZDg-hJ_lI/s1600/no-thumbnail_2.jpg' itemprop='url'/>

  <meta content='1200' itemprop='width'/>

  <meta content='1200' itemprop='height'/>

  </div>

    </b:if>

After that, warning validation in the search console, good luck.