Accelerated Mobile Pages Validator Tool and Checker
- How to Use the Accelerated Mobile Pages Validator
- Accelerated Mobile Pages Error > Unknown syntax error
- Accelerated Mobile PagesInvalid attribute value
- Accelerated Mobile PagesProhibited attribute
- Common Errors
- AMP Testing Tool
Today many internet users use their mobile devices to browse the phone, so many so that the number of searches coming from phones outweighs those coming from computers. In order to make websites better optimized for viewing on mobile devices there have been several different inventions. The most recent, and most effective, is known as Accelerated Mobile Pages, or AMP. AMPs are at their core, a web page that has been stripped down to only the essential HTML code. With only the essential code these webpages load much faster.
There are currently numerous websites out there using AMP already, despite the fact it is still relatively new. These websites, when tested, were found to load significantly faster. The least improvement was around 15% faster. The best improvement seen was around 85% fast. The potential that your website has when running AMP is huge.
These Accelerated Mobile Pages were designed by Google to try to encourage web masters to have faster responding websites. Google has always been about encouraging faster load times and better visitor dynamics, AMPs are only a natural extension of that. By why are Accelerated Mobile Pages so important?
Google has found that websites that take too long to load on a mobile platform see a significant drop in visitors. Sometimes this drop can be as high as 29%. If a page takes 10 seconds or more to load that percentage goes up to 58%. Users don’t like to be left waiting on their phones for simple websites to load.
While many people are satisfied with load time on computer based websites, what a lot of designers and companies forget is that mobile websites are often accessed over the mobile network. Mobile networks are notorious for having really slow speeds as it is. When a slow internet connection tries to load a slow page, that is only going to make it worse.
Another item that Google has been experimenting with is marking websites in search results that are known to take a long time to load. A potential visitor seeing this mark might choose to navigate to another page. As such using AMP to accelerate the load time of your pages will help to prevent your website from being marked as slow.
This slow warning isn’t the only way your page speed effects your Google listing. A while ago Google announced that it was going to make page load time a factor in Google Search Results. For the last several years, your page load speed indeed has played a part in your ranking on Google. With the recent focus on this factor it is expected that it will only continue to play a bigger part in the future. Anything you do to improve your speed is important.
AMP is simple to install on most CMS platforms. If you are running WordPress for example, it is a one click install with a variety of different AMP plugins. A highly recommended plugin in the web design community is Auttomatic made AMP. The name is simple, just like the plugin. Why would you let your customers experience bad load times when it is that easy to implement. It also will help you receive a higher ranking on mobile searches.
To see if your page, or another page, is AMP ready is incredibly simple. Google’s Chrome browser has a built in tool that you use to analyze a page. Simply navigate to the page you wish to test and open the developer tools. There should be an option labelled “Is this an AMP page?” It will tell you not only if the page is an AMP page but if it has any problems.
Accelerated Mobile Pages is still a relatively new design but it is becoming more and more important as the demand for fast loading pages increases. With the simplicity of installing AMP on CMS ran websites there is no excuse not to use it for many platforms. Make your visitors happy, make Google happy, and you will be happy yourself.
How to Use the Accelerated Mobile Pages Validator
Verification When Using Static HTML Pages
- On your Chrome Browser, open the AMP url that you created. Example: https://asknoypi.com/amp.html.
- Add #development=1 at the end of your amp page. Example: https://asknoypi.com/amp.html#development=1
- Right click the page with the #development=1 on the URL, then look and click the Inspect option. Please see the screenshot below.
- Click the “Console” tab. Please see the screenshot below. You will know that you’ve sucessfully opened the right console or implemented AMP-HTML when you see this message “Powered by AMP ⚡ HTML – Version *********”
- The red logs are the errors related to your AMP implementation. See screenshot.
- Dont forget to visit this page to the required tags: https://www.ampproject.org/docs/reference/spec.html#required-markup
Validation When Using WordPress Plugin
- If haven’t installed the plugin yet, you may visit AMP.
- The AMP plugin will let enable AMP markup on your posts. After installing the plugin, add /amp/ at the end of a specific URL. Example: https://asknoypi.com/accelerated-mobile-pages-validator/amp/
- Add #development=1 at the end of your AMP post. Example: https://asknoypi.com/accelerated-mobile-pages-validator/amp/#development=1.
- Right click the AMP post then, choose the “Inspect” option from the drop-down.
- Click the “Console” tab, then check the errors logs. Just like the instructions given from html pages above.
Unknown syntax error
Error: The tag ‘script’ is disallowed except in specific forms.
Cause: The script tag is inside the <head> tag.
How to solve :
- Disable the plugins that might hold the GA script – check if the error still appears
- Check your theme options if you have added a script
- Are you using Hostgator as your web host? If yes, please comment below becuase I found out that Hosgator someway inserts a GA script on your website.
Invalid attribute value
Example Error: The attribute ‘border’ in tag ‘table’ is set to the invalid value ‘.5’.
<table class="alignleft" border=".5" cellspacing=".5" cellpadding=".5"></table>
Cause: I’m not sure.
Example Error: The attribute ‘scope’ may not appear in tag ‘td’.
Common AMP Errors
- Uncaught (in promise) Error: AMP files are required to have a <link rel=canonical> tag.
- The mandatory tag ‘link rel=canonical’ is missing or incorrect. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)
- The mandatory tag ‘meta name=viewport’ is missing or incorrect. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)TA.error @ validator.js ***
- Required tag missing (see this requirement)
- Error in schema.org Article
AMP markup is still new, most SEOs, front-end, back-end peps doesn’t even have an idea that such technology exists. For prediction, AMP will increase its support on some html tags.