AMP Errors Solved: User Authored JS-Invalid HTML Tag Use

Jun 28

AMP Errors Solved: User Authored JS-Invalid HTML Tag Use

Over time we start to see themes develop with regards to what is most important to a website, even though the digital industry is always changing.  Right now the two most important trends are security and speed.  While our technical team focuses on the security aspect of websites (more to come!) the SEO and Social Media department is focusing on speed.  When it comes to speed-AMP for articles can be very helpful.  However, if you’ve gone through the process of setting them up it’s likely that one or two AMP Errors have been encountered.  After reading this blog and Justin’s recently published post on how to set up Facebook Instant Articles for WordPress, you will be able to set up two tools that make articles/posts lightning fast.  Google’s bots will be happy with your website and so will every day users and potential customers.

I first learned about AMP via Search Engine Land, more about it at SMX West (2016) and then I started trying to implement it for our blogs.  Everything seemed to go smoothly until I saw the graph saying that all of our pages had errors!  Initially everything looked great (see the image on the left) and the AMP pages were being indexed (blue,) but then Google recognized the issues and marked them as “AMP pages with errors” (red.)  In this post I’ll walk through the steps I took to implement AMP into our WordPress blog posts, when the errors appeared, what they were and what I did to resolve them.


Initial Attempt at AMP Setup for WordPress

Based on what I had learned along with additional research, AMP seemed so easy to implement in WordPress thanks to a few plugins.  My dad always told me “if it seems too good to be true, it probably is” and that was the case here (at least in the beginning.)  The first thing I did was download the two plugins that were supposed to make it all work in a simple way.

  1. Glue for Yoast SEO & AMP by Joost de Valk
  2. AMP by Automattic, Joen Asmussen and Mohammad Jangda

After installing and activating both of these plugins and running through the settings to make sure everything was set up properly in Glue (which will appear in the existing Yoast SEO plugin as an added feature if it’s installed) I tested the pages utilizing AMP by adding /amp/ to the end of one of our blog URL’s.  To validate, you should be able to add #development=1 to the end of the URL, but for me this was not functioning.  I ultimately found that the pages were not properly set up through Google Search Console.  This is also where I verified that the pages were properly set up and indexed later on.  In Search Console under the “Search Appearance” drop down in the left hand side navigation, “Accelerated Mobile Pages” is listed.  This is where we can begin to see what pages are being indexed and what pages have errors.


Approach to Solving the AMP Errors

When the initial appearance of quick success transitioned into all of our AMP pages having errors, I started to explore and problem solve.  Our two AMP errors were invalid HTML tag use and user-authored JavaScript, the latter being more prevalent.  Fortunately, Google (Search Console) provides a lot of resources to identify the root cause of each error and what to look for in fixing it, while the AMP creators designed a detailed AMP Project website that details everything from FAQs, to guides and even reference sheets.  Working with all of that information along with doing research on forums and the Yoast Development Blog, I was able to resolve the problem.


How To Fix The AMP Errors

How to Fix Invalid HTML tag Use AMP Error

When encountered, this error it will likely be easy to fix.  In our case we had two issues.  First, there was a “malformed URL (google may specifically list the specific URL here) for attribute ‘href’ in tag ‘a’.”  All this means is that there is a link that is broken or not properly set up.  If you go to your AMP version of that page, view the source code and then explore the href’s (or use a crawler to identify broken links) you should be able to locate and easily resolve this issue.  In our case, the anchor text was accidentally placed as the link, causing a broken link.  By placing the accurate link in, the issue was fixed.

The second issue was “the attribute ‘shape’ may not appear in tag ‘a’.”  I’m not sure why we had this attribute in place, because it wasn’t doing anything in this case.  I’m thinking that it may have been a simple accident.  I went into the code and deleted the attribute and it resolved the issue.  This particular issue made me realize that AMP isn’t only making articles and posts faster, but it may help find and eliminate minor general issues or code that is unnecessary.

How to Fix User-authored JavaScript found on page AMP Error


When this error is encountered, it may not be so easy to fix (unless you’ve taken the time to read this post!)  Often times there are several scripts on website pages, and although AMP eliminates a lot of these scripts, there are still scripts remaining that they allow.  Our issue in all cases with this error was “The tag ‘script’ is disallowed except in specific forms.”  When viewing the source code I found a few scripts (see all of the correct/approved scripts below.)  Most of them seemed to be affiliated with AMP, and the other was associated with Analytics through Yoast Glue. There were 2 AMP CDN scripts, an AMP application script and then google analytics towards the bottom of the source code.  After finding a hint on the Yoast developer blog and comparing our source code with the sample AMP document I realized that the issue must have been the Analytics code.  I originally implemented analytics through the Glue portion of the SEO Yoast plugin.  When I used monster insights (formerly Analytics by Yoast) it resolved the issues.  Therefore, to fix this issue just remove the Analytics code from Yoast Glue, get the Monster Insights Plugin, and run all google analytics scripts through that plugin.  It seems to automatically recognize when someone is on an AMP page vs. a regular page, which is great!


Before and After AMP

AMP simplifies the page, makes it lighter, moves content up and provides a clean user-friendly experience.  We can see this in the images below.  Before AMP Google PageSpeed Insights gives the post a 59/100 on mobile and 73/100 on desktop (something we can and will improve,) but with amp it scores an 84/100 on mobile and 91/100 on desktop.  When people perform a search and come across an AMP article in the carousel it will have a lightning bolt logo, indicating to the user that the page is fast (because it uses AMP.)  These are just a few of the many benefits AMP can provide for a website.  At a recent conference Gary Illyes of Google said “AMP is not a ranking factor.”  However, speed is and continues to be important, making me think that it could be a ranking factor in the future.  I would encourage anyone with a website to stay ahead of the curve and implement AMP!  It can’t hurt!


AMP For Your Website

If you’d like to install AMP for your website, but are having trouble or would like for someone else to do it, you know who to contact!  We encourage discussion and comments.  If you have a question or thought that the article was helpful, please let us know!  We also want to give a big thank you to Yoast and Automattic for developing these great plugins that are so helpful to webmasters around the world.  Thank you!