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.
What is AMP?
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:
- CSS shouldn’t exceed 75KB;
- JavaScript can only be up to 150KB;
- Ad and UI design restrictions.
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:
But let’s deep-dive into where each AMP perk finds its roots:
- Accelerated page load time
While Google’s John Mueller stated that AMP isn’t a ranking factor, page speed definitely is. When AMP is correctly implemented, you can see a drastic improvement on the speed front. As per Google, AMP pages median load time is less than a second. And, in its turn, higher speed has a triple down effect on other crucial UX factors that positively affect your bounce rate, time on site, and eventually, conversions.
- Extra SERP visibility
AMP pages are believed to bring enhanced performance within Google search results on mobile. This, essentially, has to do with two factors - the visual one (the AMP badge) and the technical one (structured data for getting into rich results). Some studies show that the lightning bolt icon, or the so-called AMP badge, is widely recognized by users and can bring in 11% higher CTR.
Moreover, combining AMP with validated structured data can also up your chances of showing up within a host carousel (movies, recipes, bars, etc.) or other rich result features like Top stories, Visual stories, and more.
The Most Common AMP Optimization Issues
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.
Start your Semrush 14-day FREE trial now!
In its extensive research that analyzed 250,000 sites for health issues, Semrush uncovered the key AMP errors which we will discuss here today.
1. AMP HTML errors
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.
2. Missing canonical tag
This issue occurs if you forgot to place a canonical tag on your AMP page:
- If you only have the AMP version, you should add a self-referential canonical tag.
- If you created an AMP page out of a non-AMP version, you should add a canonical tag to both to avoid any duplicate content issues.
Troubleshooting
In this case, the fix is quite simple: add a rel="canonical" tag within the <head> part of each accelerated mobile page.
3. AMP style and layout issues
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.
4. AMP templating issues
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.
Over to You
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.