October 18, 2021

SEO, Wordpress Support & Insurance, Mortgage, Loans, Legal, Etc Blogs

SEO, Wordpress Support & Insurance, Mortgage, Loans, Legal, Etc Blogs

, SEO, Wordpress Support & Insurance, Mortgage, Loans, Legal, Etc Blogs

How to Test Your AMP Pages: The Complete Guide via @sejournal, @dansmull

Share This :
, SEO, Wordpress Support & Insurance, Mortgage, Loans, Legal, Etc Blogs

AMP is all about the user experience and fast loading pages.

This is done by limiting CSS to 75KB and JavaScript to 150KB, clearing the critical rendering path, and preloading cached content. (You can learn more about how AMP works here.)

Even so, AMP is not for everyone.

In fact, its restrictive framework and constantly evolving standards (among other quirks and limitations) have made AMP somewhat controversial in SEO circles.

If you do decide to use AMP, testing is crucial in order to get your pages indexed by Google and enjoy the organic ranking advantages this format can provide.

What Are the Requirements for Valid AMP?

In order to be considered valid, AMP documents must:

  • Start with the doctype <!doctype html>.
  • Contain a top-level <html ⚡> tag (<html amp> is accepted as well).
  • Contain <head> and <body> tags.
  • Contain a <link rel=”canonical”> tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
  • Contain a <meta charset=”utf-8″> tag as the first child of their head tag.
  • Contain a <meta name=”viewport” content=”width=device-width”> tag inside their head tag.
  • Contain the AMP boilerplate code (head > style[amp-boilerplate] and noscript > style[amp-boilerplate]) in their head tag.

If any of these mandatory elements are missing or misconfigured, the AMP HTML will be considered invalid, and may not show up in mobile search results.

Advertisement

Continue Reading Below

3 Steps for Testing AMP

There are three stages to testing AMP:

  • AMP Implementation Testing.
  • AMP Validation.
  • AMP Performance Monitoring.

How to Test That AMP Has Been Implemented Correctly

Only valid AMP URLs are eligible to be displayed in the search results. Therefore, it is recommended that a website test its AMP implementation before releasing it live.

Generally, developers will password-protect their test and staging environments. This is considered best practice to prevent Google from indexing these.

That’s why at this stage, the AMP Validator is your fastest option for testing.

With the help of this free tool, you can directly paste your source code and check for any possible errors.

This tool will let you know the validation status by displaying PASS or FAIL.

, SEO, Wordpress Support &amp; Insurance, Mortgage, Loans, Legal, Etc Blogs

, SEO, Wordpress Support &amp; Insurance, Mortgage, Loans, Legal, Etc Blogs

Another quick way of testing AMP is by downloading the AMP Validator browser extension for Chrome.

Advertisement

Continue Reading Below

This plugin will automatically check each page for AMP validation.

It will turn to green if the page passes AMP validation or turn to red if the page fails the test.

, SEO, Wordpress Support &amp; Insurance, Mortgage, Loans, Legal, Etc Blogs

, SEO, Wordpress Support &amp; Insurance, Mortgage, Loans, Legal, Etc Blogs

And in case you wanted to triple-check, you can also use Chrome developer tools.

Simply append “#development=1” to the URL and use the Chrome DevTools console to verify there are no issues found.

, SEO, Wordpress Support &amp; Insurance, Mortgage, Loans, Legal, Etc Blogs

, SEO, Wordpress Support &amp; Insurance, Mortgage, Loans, Legal, Etc Blogs

Note: As explained in Google’s debug guide, it is also possible to test AMP on locally-hosted or firewalled pages using Ngrok by following this guide.

How to Ensure the Discoverability and Crawlability of AMP

Outside of having valid AMP code, it is important to ensure that these pages can be discovered by search engines.

Google discovers AMP by crawling the canonical URL. Therefore, there is no need to have a separate XML sitemap for your AMP URLs, unless your website is canonical AMP.

As shown below, the canonical URL should have the following “amphtml” link tag.

The AMP page should reference the original with the “canonical” tag.

, SEO, Wordpress Support &amp; Insurance, Mortgage, Loans, Legal, Etc Blogs

, SEO, Wordpress Support &amp; Insurance, Mortgage, Loans, Legal, Etc Blogs

A simple, no-tool-required way of testing this is to visit the canonical URL in your browser view source and search for “amphtml”.

Advertisement

Continue Reading Below

For example, for this search engine article on how Google ranks news sources, we would inspect the HTML page source:

, SEO, Wordpress Support &amp; Insurance, Mortgage, Loans, Legal, Etc Blogs

, SEO, Wordpress Support &amp; Insurance, Mortgage, Loans, Legal, Etc Blogs

Then, by clicking that link, we can inspect the HTML page source and verify that we can find a link tag to the canonical:

, SEO, Wordpress Support &amp; Insurance, Mortgage, Loans, Legal, Etc Blogs

, SEO, Wordpress Support &amp; Insurance, Mortgage, Loans, Legal, Etc Blogs

You may wish to automate this process by using a crawler that automatically extracts the < link rel = “amphtml” > from the HTML source code of all crawled pages.

Advertisement

Continue Reading Below

For more information on how AMP indexing works, check out the really helpful FAQ Google has put together on AMP indexing.

How to Test AMP Validation

Once AMP has been implemented, it is important to do a status check once in a while to ensure your pages remain error-free.

The quickest method to verify that an AMP URL is valid is to use Google’s AMP test.

It is also possible to bulk check AMP validation for free on 100 URLs using this tool.

Or, you can even use this free Google Sheet AMP validation tool to run daily, weekly or monthly spot checks. You can set it up to keep track of thousands of AMP URLs automatically.

However, if you are looking to run AMP validation on an unlimited URL set, it is probably best to invest in a paid solution such as Screaming Frog, Sitebulb, DeepCrawl, or Botify. When set up correctly, each of these will validate AMP at scale.

Advertisement

Continue Reading Below

For more information on how to scale AMP validation using these tools, Screaming Frog has a great step by step guide. Sitebulb has also put together a really helpful checklist of AMP issues to look out for when auditing AMP.

How to Monitor AMP Performance

The best place to monitor AMP performance is Google Search Console.

Using GSC to monitor AMP is especially helpful for understanding the search performance of AMP and any issues Googlebot may have had when crawling your pages.

There are two ways to access the data:

  1. For search results performance: Check the performance report in the Search Console and apply a filter for the AMP search appearance.
  2. For error checking: Search Console > Enhancements > AMP.

The AMP status report is particularly useful as it shows all AMP pages with issues found by Google, grouped by issue type.

Simply click a specific issue to see the details, including a sample list of pages affected.

Note: Google only provides a sample list of 1000 URLs experiencing that issue. However, it generally tries to provide information based on similar URLs. Typically, sites have templates for various page types.

Advertisement

Continue Reading Below

Once you’ve identified which URLs are having the issues, the next step is to fix them.

How to Fix Common AMP Errors

Here are the most common AMP errors and how to fix them.

1. Content Mismatch Error

One of the most common AMP errors is a content mismatch.

This error was so common that in 2017, two years after AMP launched, Google announced the AMP content parity update. This was Google’s retaliation to the AMP bait and switch, and required that the AMP page content be comparable to the (original) canonical page content.

It is fine if the AMP version has more ads than the HTML page. But in general, you want to ensure that the AMP variant uses the same content.

This includes embedded content metadata, schema, and a tag pointing to the canonical version.

Other common issues to check here include ensuring that:

  • The canonical URL returns a valid status code.
  • The canonical does not have any 3XX, 4XX, or 5XX errors.
  • The canonical referenced in the AMP version is not canonicalized.

Advertisement

Continue Reading Below

The trailing slash is a common error here.

For example, the AMP variant may reference the non-trailing slash as the canonical, whereas in reality the canonical may use the trailing slash, or redirect to the trailing slash version.

2. Non-Indexable AMP Errors

Another common mistake when it comes to AMP implementation is ensuring that the AMP variant is indexable.

For example, you’ll see errors if the AMP variant is blocked at robots.txt, or if it contains a no-index meta robot tag.

Make sure to inspect the HTML page source of the AMP variant to ensure that the page is accessible to Google.

At the browser level, this can be done using a simple free robots exclusion checker.

, SEO, Wordpress Support &amp; Insurance, Mortgage, Loans, Legal, Etc Blogs

, SEO, Wordpress Support &amp; Insurance, Mortgage, Loans, Legal, Etc Blogs

Or you could even use Google’s URL inspection tool to validate that Google can crawl the AMP variant.

Advertisement

Continue Reading Below

3. AMP Has Validation Errors

The most common validation errors fall into the following three buckets.

  1. Missing mandatory elements.
  2. Including disallowed, depreciated, or duplicated elements.
  3. Containing style, layout, or templating errors.

The best way to diagnose and fix these errors is to equip your development team with the AMP validator.

This tool will flag up any of these errors and can be used as a raw HTML code validation tool to help your team proactively produce clean, AMP-compliant code.

It’s also good to provide your team with Google’s AMP validation error guide. And if your site is on WordPress, the AMP plugin troubleshooting guide is helpful.

4. AMP Analytics Errors

Google has a great guide on measuring AMP pages in analytics. However, forgetting to join up AMP versus and non AMP sessions is still a common mistake in AMP implementation.

This is particularly prevalent in news publishers, as the majority of their AMP pages are served from Google’s AMP cache.

Advertisement

Continue Reading Below

This is why a lot of publishers report an increase in bounce rate with their AMP versus non-AMP pages.

This is because when a user is on the AMP cache, they are not on your actual website — they’re on Google’s servers. And when a user clicks another article link to read, the user moves off the AMP cache and back to the publisher’s website.

What a lot of publishers don’t realize is that if the AMP sessions are not joined to non-AMP URLs, this can artificially inflate user and session counts.

To remedy this error, you need to set up the AMP linker when implementing AMP and measuring user journeys across the AMP Cache.

More Resources for Testing AMP

Google has created a useful guide to AMP validation errors. Check it out when debugging the more nuanced AMP validation errors.

If you want to take advantage of the rankings boost AMP can provide, it’s well worth thoroughly testing to ensure there are no errors standing between you and AMP success.

Advertisement

Continue Reading Below

Additional AMP Recommended Reading:


Image Credits

All screenshots taken by author, June 2021

Share This :