TehnoBlog

Article updated: 03 Feb 2019

Recently, AMP issues report appeared in our Google Search Console (successor of Google Webmaster Tools) with the message Image size smaller than recommended size. What this warning means and is there a way to fix it?

Google Search Console – AMP Pages Image Size Report

AMP Project Logo

First of all, this is just a WARNING. It is NOT an AMP ERROR (at least, not yet). Your AMP pages are still indexed and (probably) displayed in Google’s search results. However, they are marked as less-than-perfect pages, because they contain images which are less than 1200 pixels wide (likewise, height of portrait images should be at least 1200 pixels and minimum product of WIDTH * HEIGHT should be at least 800 000 pixels).

Google Search Console – AMP Page Issue – Image Size Smaller Than Recommended Size

This is, actually, nothing new – in fact, this recommendation (read: requirement) is almost a full year old. In 2018. Google raised minimum width for featured AMP images to 1200 pixels, with a grace period left for webmasters and owners to fix their amp-powered articles.

Important AMP Image rules

Below are listed most important properties of AMP article “featured” image (more in Google link posted above):

• Only a marked-up image that directly belongs to the article should be specified.
• Images should be at least 1200 pixels wide.
• Every page must contain at least one image (whether or not you include markup). Google will pick the best image to display in Search results based on the aspect ratio and resolution.
• Images must represent the marked up content.
• Images must be in .jpg, .png, or .gif format.

However, starting this week, many users reported increased AMP-pages related issues appearing in their Search Console. It seems that Google officially stopped ignoring the image size property and now issues a warning if the requirement is not met.

Recommended Reading

Google Chrome Lighthouse – A Brief Introduction

This change is reasonable, given the fact that many sub 300$ mobile devices now come with a standard Full HD 1920×1080 pixels display, and premium flagship models come in QHD / QHD+ and even 4k display resolutions! 8k display resolution phones anyone!? Welcome to Beyond 2020 TV show…

Where is the problem? AMP article JSON format

JSON format describes your page to machines, computers, phones and other smart devices. Without looking into your actual article, they can understand what the content format essentially is like through various “meta tags” (attribute-value pairs). Given the fact that we live in early machine learning / artificial intelligence stage, it is no brainer why Google requires those meta tags, and why they affect your SEO ranking. In essence, Google is using them to train their neural networks, classify and better understand web content.

Near the end you can see that there is an image attribute, with representative photo that describes content that that particular article is all about.

{
"@context":"http://schema.org",
"@type":"BlogPosting",
"mainEntityOfPage":"https://...",
"publisher":
	{
	"@type":"Organization",
	"name":"TehnoBlog.org",
	"logo":
		{
		"@type":"ImageObject",
		"url":"https://...",
		"height":60,
		"width":600
		}
	},
"headline":"Page Title",
"datePublished":"",
"dateModified":"",
"author":
	{
	"@type":"Person",
	"name":"TehnoBlog"
	},
"image":
	{
	"@type":"ImageObject",
	"url":"https://post-image.jpg",
	"height":1200,
	"width":1200
	}
}

PROPER WAY: MANUAL FIX

All you need to do is simply edit each and every article affected and set larger featured images. This means that you have to dig through all your old stories and blog posts, and replace or upscale existing photos!

Given the most likely fact that those articles are now obsolete and probably do not drive much traffic, this kind of excursion is something you don’t really need at the beginning of the year ;)

Instead, try to prioritize important content: perform a breakdown analysis what pages are worth your time and trouble and update them by priority, and leave the rest as they are.

EASY WAY: FIX WITH ANOTHER PLUGIN

Unfortunately, this is a bit of a problem right now, because there is no quick & easy fix, that is also the proper one (e.g. the one that fully satisfies AMP standard and requirements).

For WordPress there are no existing plugins that can easily fix this issue as of this moment by resizing existing images, but they might appear eventually, depending on the interest and needs.

One idea is to either upscale or letterbox existing images to meet new requirement, but that means you need to check every post you’ve ever made and since re-compression is involved, loss of quality will be inevitable in case of JPEG and GIF, and to a lesser extent in case of PNG image file formats. Also, images will become larger, occupy more space and bandwidth (downgrading performance, ironically) and not gain any more details (generally speaking, because there are ways to upscale certain types of images with lower amount of artifacts and loss of spatial information, but that goes beyond the scope and math available in standard programming languages and image libraries) than they already have, so this practice is going to be a bit absurd in our opinion.

Another idea is to use filter function present in the AMP plugin and dynamically check if the selected image meets the new requirement or not. In case it does, things will be exactly as they were before. But, in case they are smaller, you can replace them with some generic large logo. This is, technically speaking, against AMP guidelines that image must closely represent the marked-up content.

Initially, our code was integrated in the (active) WordPress theme’s functions.php file and we leave below code as part of the original article legacy. However, later we converted the code into a simple plugin, in order to keep your theme’s files completely separated. Because, in the event of theme auto-update you will lose all the changes inside functions.php file, unless you use custom child theme (not 3rd party). Plugin still requires some manual work from your part, though.

STEP 1

1-1 Create /images/ folder inside your wp-content directory

1-2 Create a large (>= 1200 pixels wide) amp_preview_image.jpg image file using your favorite image editor (Photoshop, CorelDraw, Krita, GIMP, Paint, Paint.NET etc.) and upload it inside above wp-content/images/ directory that you’ve just created:

wordpress/wp-content/images/amp_preview_image.jpg

STEP 2

Place below code in your WordPress theme’s functions.php file (take care not to duplicate opening and closing PHP tags – they are placed below for completeness). Alternatively, you can create on your own a simple WordPress plugin (see below extra instructions):

<?php
// amp pages: metadata filter
function amp_modify_json_metadata($metadata, $post) {
	if ('post'=== $post->post_type) {
		// set custom article image
		// if original is missing / not found
		// or if featured image width or height dimension is smaller than 1200 pixels
		// you must place "amp_preview_image.jpg" in /wp-content/images/ sub-directory
		// also you can change image extension to .png or any other instead of .jpg defined below
		// also UPDATE IMAGE height AND width NUMBERS TO MATCH YOUR GENERIC IMAGE SIZE (in pixels)
		$countArticleImages = isset($metadata['image']) ? count($metadata['image']) : 0;
		if (
			$countArticleImages == 0
			||
			( ($metadata['image']['width'] >= $metadata['image']['height']) && ($metadata['image']['width'] < 1200) )
			||
			( ($metadata['image']['width'] < $metadata['image']['height']) && ($metadata['image']['height'] < 1200) )
		) {
			$metadata['image'] = array(
				'@type'  => 'ImageObject',
				'url'    => WP_CONTENT_URL.'/images/amp_preview_image.jpg',
				'height' => 1200, // <-- UPDATE NUMBER TO MATCH YOUR GENERIC IMAGE SIZE (px)
				'width'  => 1200  // <-- UPDATE NUMBER TO MATCH YOUR GENERIC IMAGE SIZE (px)
			);
		}
	}
	return $metadata; 
}
add_filter('amp_post_template_metadata', 'amp_modify_json_metadata', 10, 2);
?>

With above filter warning should disappear within couple of days. However, this is not an ideal solution right now, and you should use it only temporarily, until more acceptable fix becomes available.

Alternatively, you can completely remove AMP featured image with below code (but this will also affect your perfectly valid AMP pages and degrade rich snippet appearance @ search results – use it with caution!):

<?php
// amp pages: metadata filter
function amp_modify_json_metadata($metadata, $post) {
	if ('post'=== $post->post_type) {
		unset($metadata['image']);
	}
	return $metadata;
}
add_filter('amp_post_template_metadata', 'amp_modify_json_metadata', 10, 2);
?>

Another alternative is to remove featured image only in case it does not satisfy current requirement. However, you will probably receive a warning that image attribute is missing, because it is required by Google:

<?php
// amp pages: metadata filter
function amp_modify_json_metadata($metadata, $post) {
	if ('post'=== $post->post_type) {
		if (
			isset($metadata['image'])
			&&
			(
				( ($metadata['image']['width'] >= $metadata['image']['height']) && ($metadata['image']['width'] < 1200) )
				||
				( ($metadata['image']['width'] < $metadata['image']['height']) && ($metadata['image']['height'] < 1200) )
			)
		) {
			unset($metadata['image']);
		}
	}
	return $metadata;
}
add_filter('amp_post_template_metadata', 'amp_modify_json_metadata', 10, 2);
?>

If you wish to use plugin format instead, and keep away from modifying your theme’s functions.php file, you should use following instructions:

PLUGIN STEP #1
Go to your WordPress install directory => wp-content/plugins/ and create a new directory amp-plugin-filter

PLUGIN STEP #2
Create an empty file named amp-plugin-filter.php inside the above created plugin’s dir

PLUGIN STEP #3
Copy/Paste below code and re-save:

<?php
/*
Plugin Name: AMP Plugin Filter
Plugin URI: https://tehnoblog.org/how-to-fix-google-search-console-amp-image-size-smaller-than-recommended-in-wordpress/
Description: Simple plugin to replace small or missing featured images in AMP plugin and avoid Google Search Console AMP pages warnings
Author: TehnoBlog.org
Author URI: https://tehnoblog.org/
Version: 0.0.1
*/

if ( !defined('ABSPATH') ) {
    exit;
}

// amp pages: metadata filter
function amp_plugin_modify_json_metadata($metadata, $post) {
	if ('post'=== $post->post_type) {
		// set custom article image
		// if original is missing / not found
		// or if featured image width or height dimension is smaller than 1200 pixels
		// you must place "amp_preview_image.jpg" in /wp-content/images/ sub-directory
		// also you can change image extension to .png or any other instead of .jpg defined below
		// also UPDATE IMAGE height AND width NUMBERS TO MATCH YOUR GENERIC IMAGE SIZE (in pixels)
		$countArticleImages = isset($metadata['image']) ? count($metadata['image']) : 0;
		if (
			$countArticleImages == 0
			||
			( ($metadata['image']['width'] >= $metadata['image']['height']) && ($metadata['image']['width'] < 1200) )
			||
			( ($metadata['image']['width'] < $metadata['image']['height']) && ($metadata['image']['height'] < 1200) )
		) {
			$metadata['image'] = array(
				'@type'  => 'ImageObject',
				'url'    => WP_CONTENT_URL.'/images/amp_preview_image.jpg',
				'height' => 1200, // <-- UPDATE NUMBER TO MATCH YOUR GENERIC IMAGE SIZE (px)
				'width'  => 1200  // <-- UPDATE NUMBER TO MATCH YOUR GENERIC IMAGE SIZE (px)
			);
		}
	}
	return $metadata; 
}
add_filter('amp_post_template_metadata', 'amp_plugin_modify_json_metadata', 10, 2);
?>

Install plugin from WordPress Admin Dashboard and you are done! Don’t forget to upload your generic image manually inside wp-content/images/ folder! Also, plugin is very simple, it does not have any options, settings menus etc.

STEP 3

Once you complete above modification, visit Google Search Console > AMP section and click on VALIDATE FIX button. It will usually take couple of days to validate and you should receive email notification once the process is (hopefully successfully) completed.

Free Tip
If you use static caching plugin, don’t forget to clear cache, otherwise Google will not see above changes!