For every webmaster that has keyed into the Google AMP project, at one point or the other, you are most likely to get faced with AMP (accelerated mobile pages) related issues. Most of them are very easy to fix. However, you may find yourself, at some, stuck trying to understand and fix certain AMP issues.
From my experience, I have decided to make a compilation of the issues I have faced using Google AMP by Automattic and how I fixed them.
After setting up Google AMP in WordPress, it is highly recommended you verify your WordPress website with Google Search Console.
Occasionally, error reports will be sent to your email address concerning any AMP issue found in your website.
You can learn more about the AMP error by following the link sent to your email address.
Click on fix Accelerated Mobile Pages issues.
A list of all the errors found in your AMP pages will be displayed.
As you can see from the image above, I currently have zero ‘error’ and zero ‘valid with warnings.’
However, prior to having zero AMP error, I was faced with several AMP issues and have fixed them all.
Popular Google AMP Errors and how to fix them
AMP pages show 404 error after installation
After installation of the AMP plugin in WordPress, you should immediately be able to visit your AMP pages by adding the AMP extension to your post URL in a mobile browser (preferably Chrome).
This link may generate a 404 error if you have just installed the plugin. It’s a minor issue and very easy to fix. All you have to do is refresh your permalinks.
Under settings, click on permalinks.
Under permalinks, don not change your link structure. Just hit the save button without doing anything.
What you just did will refresh your permalink structure (including the AMP versions). This should immediately correct the 404 AMP issue.
How to fix AMP loading blank pages
Another issue I’ve encountered using the AMP plugin by Automattic was: AMP pages not loading or AMP pages showing a blank white space.
This is quite different from the 404 AMP issue – because it’s a sign to show that your AMP pages exist but contain error(s).
This AMP issue can also be corrected by refreshing your permalinks. If that doesn’t work, then, you have to check your AMP setting under AMP>>General.
Make sure Templates and Pages are selected, and click the save changes button.
Check if the issue has been rectified by visiting the AMP version of any of your blog posts.
How to fix “A value for the logo field is required”
This is one of the most popular AMP errors in WordPress. If you are getting this error in your AMP error report, it simply means you have not added a favicon to your site.
After creating your site icon, hover your mouse on appearance and click on customize.
depending on your theme, site identity should be located under your customization options.
Click on site identity and under site icon, click on select image.
locate and select your site icon and click on publish.
How to notify Google that you have fixed an AMP issue
Visit Google Structured Data Testing Tool, and at the top-right corner, click on new test.
Enter the URL of the AMP page you want to fix errors in and click on ‘Run test.’ If no issues are detected in your AMP page, click on ‘submit result to Google.’
How to fix Invalid URL for HTML attribute ‘href’ in tag ‘a’
When you get an error report like: Invalid URL for HTML attribute ‘href’ in tag ‘a’, it simply means there’s a link in your website that points to an inexistent website or that generates a 404 error.
You can correct this error by clicking on it and testing live version. Your AMP page will be tested live and displayed in html format. The line where the error is located will be highlighted.
If you are not able to understand html codes, you can simply visit that webpage and test all the links in it. Correct or remove any link that generates a 404 error or site doesn’t exist error.
How to fix “The tag ‘*********.js script’ appears more than once in the document.”
Whenever you add a .js script to your AMP pages, make sure it is not added more than once. Or else, it will generate an error in AMP.
I got that error when I added AdSense auto ads script to AMP pages by directly configuring the AMP plugin. However, the auto ads was not implemented early enough. So I added the .js script again, this time, to my Theme Functions (function.php) and as a result, got that error.
You can fix that error by removing one of the duplicate .js script and notifying Google that you’ve fixed that AMP error.
How to fix content mismatch in AMP
Content mismatch in AMP simply means a page that was previously indexed no longer contains an important element indexed along with that page. In my case, it was a YouTube video I embed and the video was deleted.
Embedding a deleted video will not only hurt your site UX, but will also generate AMP errors.
To fix this error, you either remove that page element or replace it. And after doing that, notify Google that you’ve fixed that AMP error.
That’s all about fixing AMP errors. If you have been faced with a different AMP error, feel free to share using the comment section of this post