Launched back in 2015, the AMP (Accelerated Mobile Pages) Project didn’t immediately get an influx of early adopters. Yet news outlets and bigger publishers soon jumped on the bandwagon to leverage the AMP benefits. Then, all those with large inflows of mobile traffic joined the club.
Yet with mobile-first now covering the entire web, we can expect more and more sites to try AMP, which - as simple as it may seem - actually comes with a few challenges that may hinder your anticipated results.
This post will uncover what AMP is, as well as reveal the top AMP issues you might face and show how to resolve them.
AMP, previously known as Accelerated Mobile Pages, is the “lite” version of your existing web page intended to provide users with a lightning-fast and more friendly mobile experience. Think of Facebook Instant Articles, or Apple News, as a similar-ish thing.
In Amp’s own words, it is “an open-source HTML framework that provides a straightforward way to create webpages that are fast, smooth-loading and prioritize the user experience above all else.”
Essentially, for going AMP, you should create a mobile-optimized version of your already existing HTML5 page. Only it has to be more lightweight, which means that you will face a set of limitations:
So, if you’ve correctly created an AMP alternative for your page, Google will prioritize it and serve the AMP version to the user rather than its original.
Key AMP Benefits
What you should know is that AMP pages are hosted on Google servers, thus, allowing for a faster load speed and boosted visibility on SERP.
But let’s deep-dive into where each AMP perk finds its roots:
Now, if AMP seems like a good fit for your site, you have to understand all the potential pitfalls you might face along the way. Like with any other page, you have to think of making it SEO-friendly.
Semrush has a really powerful Site Audit tool that runs sites through 140+ checks to detect any issues that affect its performance. Out of these checks, 40 are dedicated to the most common AMP errors.
In its extensive research that analyzed 250,000 sites for health issues, Semrush uncovered the key AMP errors which we will discuss here today.
In fact, this is the number one problem when it comes to mobile SEO - a whopping 27% of sites are faced with AMP HTML issues.
If you want your AMP pages to be properly served to mobile users, they have to meet the AMP guidelines.
If your HTML doesn't comply with AMP standards, your accelerated mobile page might simply fail to be indexed by search engines, and, hence, show up within mobile search results.
To go AMP, you have to limit your HTML, which may cause multiple issues - from invalid protocols and invalid attribute values to missing and duplicate tags.
You have run your page through the AMP validator, or a more intuitive and comprehensive Site Audit that has over 20 HTML-issue-related checks and hot-to tips to detect all the issues and fix them right away to leverage all the AMP benefits.
This issue occurs if you forgot to place a canonical tag on your AMP page:
In this case, the fix is quite simple: add a rel="canonical" tag within the <head> part of each accelerated mobile page.
Style and layout issues negatively affect the loading speed and even get your page to fall out of SERP, so you need to really pay close attention here.
AMP styling has to do with CSS, yet you get a set of restricted and disallowed styles and a ban on using external style sheets.
Furthermore, you should include the height and width attributes per each displayed tag to make your page more scrollable.
Also, make sure that you are using custom AMP, and not common HTML attributes within the path.
Within AMP, you can render dynamic content with the help of AMP-document-defined templates placed inside dedicated tags. The syntax of the templating language is checked by an AMP validator to safeguard AMP documents against various vulnerabilities.
The only tip to provide you with here is to simply escape the prohibited template.
Even if you’ve managed to get all your AMP pages in order, keep in mind that it is an ongoing commitment.
So, revisit your AMP page performance to timely spot any AMP SEO pitfalls that might deprive you of all the AMP benefits.
And to make your error detection job easier, try out our Hacker Noon special FREE Semrush trial to leverage the power of Semrush’s Site Audit tool that has the largest-on-the-market number of AMP health checks.