Since Google introduced Accelerated Mobile Pages (AMP) to mobile users back in 2016, it has become a major trend and a game changer for online publishers. They’ve embraced this technology the most out of all other industries, and naturally, they seem to benefit the most from it, as it is the only way to win a place in the AMP Carousel aka Top Stories. However, realizing 100 percent of the AMP potential is a daunting job that requires hours of dedicated work.
In this article we’ll have a look at the most common AMP implementation mistakes and issues, and explain why and how to fix them with the purpose of floodlighting the tasks webmasters should focus their efforts on. Faultless AMP implementation is even more important, as mobile users nowadays are extremely touchy about page load speed and overall user experience — user dissatisfaction measures in thousands of visits lost, making publishers’ race for page traffic quite intense.
Why it’s trending and who’s a fan
There are multiple case studies on the web, showcasing AMP advantages for businesses. Being one of the early adopters, Condé Nast have been very open about their journey: for Vanity Fair, the traffic and search rank results were very positive: click through rate (CTR) from Google search went from 5.9% (regular) to 10.3% (AMP), and average search position went from 5.9 (regular) to 1.7 (AMP). Today, AMP accounts for 79% of their mobile search traffic and 36% of their total mobile visits.
Wired have achieved a 63 percent increase in CTR on ads in AMP copy and a 25 percent increase in CTR from search results.
The Washington Post saw a 23 percent increase in mobile search users who return within 7 days, and an 88 percent improvement in load time for AMP content versus traditional mobile web. For the Guardian, 60 percent of their Google mobile traffic is AMP.
Monetization is key — and the guys from the AMP Project do it justice. Completely understanding the nature of the publishing business, they’ve done their best and provided the media with the tools to keep advertising and gaining new subscribers’ processes up and running. AMP support a comprehensive range of ad formats, ad networks and technologies. A little over a month ago, Google rolled out support of AMP landing pages for text ads. This feature is now available to all AdWords advertisers globally and enables them to ‘create the super-fast and delightful mobile experience that consumers expect’.
On top of that, social networks and feed aggregators have been strongly supportive of this initiative, providing AMP links where possible. Twitter started linking to AMPs from its native Android and iOS apps starting May 2017. Back in March LinkedIn said they saw a 10% increase in time spent on page (the most crucial success metric for them) for an AMP article vs non-AMP. Other supporters include Tumblr, Pinterest, Feedly, and Nuzzle.
AMP adoption rate across countries
The latest study by SEMrush, based on the data scope of top 300 publishers in 8 countries, shows that AMP adoption rate varies between 24.4 percent (Brazil) and 34.9 percent (USA). Out of all analyzed media that have implemented AMP, around a quarter (numbers vary from 20.4 to 27.1 percent) have made it flawlessly and don’t experience any technical issues.
Rather than judging whether the adoption rate is high enough, we instead suggest reviewing the most common mistakes and what they mean to webmasters.
AMP implementation mistakes and how to fix them
The top 10 mistakes we’ve tracked down are mostly related to HTML, with the only exclusion being Disallowed style attribute error. Sadly, it is the HTML related issues that rob you of all AMP privileges.
HTML tag and attribute mistakes
Going back to basics, one of the reasons why AMP is so high-speed is the enlightened code and a number of restrictions, which can be looked up in the AMP HTML Specification. For example, some HTML tags (<frame>, <object>, <embed> and others) are prohibited, usage of the !important qualifier is not allowed, and behavior and -moz-binding CSS properties are permanently banned.
Since these new rules aren’t common in general webmasters’ practice, building AMP pages is tricky, but definitely not impossible. Let’s dive into the list of the most common mistakes and see how they can be fixed (all errors and solutions are described based on the AMP HTML Specification):
- Disallowed attribute — Attribute names starting with the word on (such as onclick or onmouseover), the style attribute, XML-related attributes, such as xmlns, xml:lang, xml:base, and xml:space are not allowed in AMP HTML. Internal AMP attributes prefixed with i-amp- shouldn’t be used either. The fix here is quick — just remove the attribute from the HTML tag.
- Disallowed tag — pretty much the same as ‘Disallowed attribute’. Look through the list of the prohibited tags and choose the corresponding AMP tag (for <video>, it will be <amp-video>, for example). If there is no corresponding AMP tag, it means you will have to remove this tag forever.
- Invalid attribute value — indicates that a tag contains a prohibited value (quite often it happens because of invalid values for URLs). Many URL values in AMP require HTTPS. If you are getting this error, and aren’t sure why, check the relevant AMP tag’s specification to see if the attribute requires HTTPS. Once you understand why exactly your attribute value is considered invalid, make changes accordingly to resolve the issue.
- Invalid URL protocol — for some tags, href or src attributes must be set to certain protocols. For example, many tags require https. Otherwise, the validator returns an error. If you find that this is the case, make sure to use the URL with the proper protocol.
- Invalid URL — this error occurs when an attribute has a URL, but the URL is invalid. In this case, you just need to fix the broken URL.
- Mandatory tag ancestor with hint — the error occurs when one of the following tags is found in the AMP document, and isn’t properly nested in its mandatory parent:
- img isn’t within noscript parent.
- video isn’t within noscript parent.
- audio isn’t within noscript parent.
- noscript isn’t within body parent.
How to to fix it: remove the tag, make it a descendant of the specific tag, or replace the tag with the hinted tag.
- Mandatory attribute missing — there is a list of mandatory attributes for AMP tags, and if one of them is missing, you won’t be able to validate your page. Simply ensure that you have added all of the mandatory attributes to the relevant tags.
- Wrong parent tag — specific tags require an immediate parent tag placed one level higher. There are 11 pre-defined parent-child tag pairs, and once these rules are broken, an error occurs. So, your goal is to make the tag a direct child of the required parent.
- Missing URL — This error occurs when an attribute that requires a URL is missing it, for example, an empty href or src attribute. The fix is apparent: add the valid URL to the tag attribute.
Style and layout issues
For styling and layout there are also certain restrictions in AMP, created to deliver high page load speed. Every tag requires specified height and width for smooth rendering and scrolling. As seen on the above diagram, style and layout issues are not as common as tag and attribute mistakes, and occur in only 20 percent of the cases. However, they are just as harmful as the other mistakes on the list, putting you at risk of not showing up on SERPs.
- Disallowed style attribute — again, this error just means that you’re using some of the blacklisted attributes. Refer to the specification and remove the attribute that causes the error.
To sum up, detecting AMP implementation mistakes for multiple pages is more challenging than actually fixing them, as all top mistakes can easily be resolved after browsing the Specification.
AMP and HTTPS — mixed content issue
Although the AMP + HTTPS question hasn’t been included in the scope of our study, we’ve decided to cover it as well. Despite AMP being a very progressive technology, it doesn’t necessarily require HTTPS to be implemented on your website (although it is strongly recommended). Some components need to use HTTPS (e.g. videos, iFrames, forms), but a basic AMP page can be hosted on HTTP. This being said, you need to keep an eye on the types of content that you’re using on the page — both the page and its content should be using the same protocol (either HTTP-HTTP or HTTPS-HTTPS), so that you don’t face the mixed content issue. Also, if your main site is on HTTP and you don’t plan to migrate it, you can still host AMP pages on HTTPS.
Things to keep in mind — expert comments
While AMP has become an industry standard, it is important to keep in mind that it should not be your priority if:
- The mobile version of your site isn’t optimized enough — Aleyda Solis believes (and Google guys agree) that AMP isn’t for everybody: ‘AMP is meant to be an add-on to speed up your mobile web when you can’t do it yourself. It is certainly far from being a bullet-proof, actual solution for mobile speed’.
- You don’t have a mobile version of your website — if all you have at hand is a desktop version and an AMP version of your pages (a rare and slightly bizarre case, but still), Google will index your desktop version by default, and that will still be true when the mobile first index goes live, as John Mueller said here.
- The majority of SERPs in your industry isn’t occupied with AMP. If it happens to be so, you still have enough time to thoughtfully and carefully implement it for your website. As noted by Jenny Halasz at the recent Search Love conference, SERPs matter — if the SERP for your query is mostly AMP, you need AMP.
- You are not ready to get the full implementation completely correct — sloppy analytics setup and a slapdash approach to CTAs, menu and other navigation elements result in less pages per session, shorter session time and higher bounce rate, as pointed by Eric Enge in StoneTemple’s Guide to AMP and as reported by some users at Google Webmaster Central Help Forum.
Aside from that, here is an alternate view — despite the enhanced loading speed, some users aren’t fond of AMP pages, getting annoyed with the inability to turn them off, experiencing troubles with scrolling and being obliged to take additional steps to navigate to the full version of the page.
The future of AMP
Media are not the only industry that can benefit from AMP — Google keeps working hard and delivering new features to make it spread across other verticals. The latest innovations include AMP Start, a library of AMP-friendly templates and elements, meant to supercharge retail and travel companies, as well as local business websites.
Ebay, AliExpress and Zalando have already made it part of their SEO strategies. Since taking AMP on board, AliExpress have reduced their page load times by 36 percent, increased the number of orders by 10.5 percent, and conversion rate by 27 percent (which we can only assume looks even more impressive in $$).
If the AMP implementation is done right, positive results are sure to follow. Evolving templates and elements, constant improvement in tracking and analyzing made by the Project team makes us think that the Golden Age of AMP is right around the corner.
One last thing: although AMP isn’t an ‘official’ ranking signal per se, page load speed is — Google admitted they are obsessed with speed back in 2010. So, wider AMP adoption may bring changes to the list of Google ranking factors, as it happened with HTTPS.
What are your thoughts on AMP? Would you be interested in seeing the stats on AMP penetration and implementation mistakes for other industries? Speak up in the comments!