All About Accelerated Mobile Pages For Better SEO

Posted April 10, 2017

In SEO

Your Guide To Accelerated Mobile Pages (AMP)

Mobile internet usage exceeded desktop for the first time in 2014, and it remains on a rapid, feverish ascension in popularity. With this in mind, we must direct our digital marketing efforts towards mobile optimization, especially in the areas of SEO, site navigation, and page loading times. Since mobile is now the most likely way that a visitor will arrive on your website, it’s important we make web pages fast and efficient for a better user experience. Welcome to the world of Accelerated Mobile Pages (AMP), a Google-backed project designed to meet the performance needs of a mobile world.

AMPs utilize a stripped down version of HTML to speed up the loading process and enable faster scrolling. While they’ve only been released since September 2016, AMPs are already making an impact in the areas of performance that we care about most.

SEO

AMP is still in its infant stages, but it is already showing some benefits for SEO. Since page loading time is such a critical factor leading to a better ranking on search engine results pages (SERPs), the lighting fast speed of AMPs will undoubtedly improve keyword rankings.

Generally speaking, Google appreciates sites that offer a better overall mobile experience, since this is where the majority of searches take place today. In the worse case scenario, Google penalizes slower pages, attributing speed to a better user experience. You can check your page speed (according to Google), here.

Another advantage to AMPs, is that mobile friendly results are placed in their own section of SERPs, right at the top of Google. We see this most commonly with news articles.

This is a great advantage for article-based content sites, such as blogs or news outlets. AMPs might be less effective on e-commerce sites, especially where you need consumers to checkout near the end of the sales funnel. What’s the reason for this? AMPs don’t allow the use of JavaScript, making it difficult to display things like on-page comments, polls, and order forms.

So then is it impossible for an e-commerce site to use AMPs at all? Nope. In fact, Google is starting to encourage non-news sites to implement them. We’re already seeing AMP success with one of the world’s biggest e-commerce websites.

AMPs for eCommerce Sites

AMPs are slowly but surely finding a home on eCommerce sites. eBay is among the most notable eCommerce publishers using AMPs, with over 8 million of these pages live today.

From an aesthetic standpoint, the AMP is much better organized and more concise than a normal page. Content is displayed much closer together to prevent too much scrolling, which can increase user engagement and decrease bounce rate.

They are also perfect for the more content-oriented pages, such as product pages, how-to explanations, and corporate news or consumer blogs.

Google recognizes that every type of online industry is transitioning to a more comprehensive mobile strategy. It’s clear that AMPs should be considered in your 2017 strategy, but what is the best way to proceed?. Next, we’ll discuss how to set up AMPs on your site.

How To Setup AMPs Manually (Without A Plug-In)

Before you start cowering in fear, please note that there are plugins available to convert normal URLs to AMPs rather easily. We’ll touch on those in a bit. First, let’s briefly explain how to convert your pages manually.

First off, be sure to backup your original web pages before proceeding. You’ll then need to maintain two versions of every page you want to convert. One should be a normal version, the kind your users will see on a desktop. The other is the AMP version.

When editing manually, you’ll likely have to rewrite significant portions of your regular templates to accommodate the stripped down AMP format. Certain AMP-specific tags and script changes are required.

Here’s a look at the AMP HTML and JavaScript syntax requirements, per Google:

AMP HTML – Similar in structure to a regular HTML document, only with several restrictions to ensure streamlining. A top-level <html amp> tag is needed, as well as <head> and <body> tags. You must also include a canonical tag which will link your AMP back to the original page. It’ll look something like this: <link rel=”canonical” href=”OriginalPage.com”. A <meta charset=”utf-8”> must be the first child of your head tag, and a <meta name=”viewport”> must be included to specify the mobile viewing medium. For external resources like images, you must state their size in the HTML as well as tagging them with a custom amp-img element. AMP Project includes a template version of an AMP HTML document that you can use as a reference when coding.

Amp-img example:

AMP JS – Third party JavaScript is not allowed on AMPs, but a more simplistic form is permissible. Since AMPs allow only asynchronous scripts, AMP JS is utilized for asynchronous loading and basic resource management purposes. This <script> tag must be included at the bottom of the <head>, underneath the other content.

IMPORTANT: The reason for a canonical tag relates back to SEO. Because you have an AMP version and an original version of your page, you don’t want to get penalized by Google’s algorithm for duplicate content.

The canonical tag on your original page to your AMP should appear as:

<link rel=”amphtml” href=”http://site.com/article.amp.html” />

And the canonical tag on your AMP to your original page should appear as:

<link rel=”canonical” href=”http://site.com/article.html” />

For CSS there are also some requirements as well. Here’s the shortlist:

All CSS must be inline
Style rules must be under 50kb
No external style sheets
Just 1 <style> tage allowed in the document head
Fonts must be loaded via a link tag or a CSS
Tag should be <style amp-custom>

How To Setup AMPs With Plug-In

For those of us that don’t enjoy coding, WordPress has stepped in with a plugin to make AMPs hassle-free. When applied to your site, it will automatically generate AMP-compatible versions of all of your pages.

Your original pages will remain intact with their proper URLs, while WordPress simply duplicates them into an AMP format, adding /amp/ to the end. For example: http://testing.com/ would become http://testing.com/amp/.

The results have been noticeable. Publishers are clamoring over the rapid load speeds and cleaner appearance as a result of the AMP plugin.

The only significant gripe is with regards to customization, or lack thereof. While the plugin excels at transforming your content into faster AMPs, the design of these pages may obfuscate the theme of your website. Publishers are finding themselves editing the code of the AMP HTML and CSS documents to match their original site’s appearance. That said, the WordPress plugin is still a great means of creating AMPs, especially among burgeoning bloggers and content marketers.

AMP-Analytics

AMPs offers a couple options for measuring analytics. First, you’ll need to have a Google Analytics account. Then you’ll add the element amp-analytics to the <body> of your page, like so:

<amp-analytics type=”googleanalytics” id=”analytics1”></amp-analytics>.

The beauty of the amp-analytics option is that it provides a more comprehensive range of data (page, social, and event tracking).

If you’re just looking to track your pageviews, try the amp-pixel option. It’s a simplistic tracking pixel that can be easily implemented within your code.

Amp-analytics is not automatically enabled through the AMP WordPress plugin, but you can activiate it by editing the amp-post-template-actions.php. You can access this through your WordPress dashboard.

Advertising On AMPs

Now let’s talk about money. Thankfully, AMPs are capable of being monetized through ads, despite a growing segment of users who are implementing mobile ad blockers.

The AMP Project maintains that it will embrace a wide range of ad formats and networks in the future. Currently, below you’ll find a few of the ad networks accommodating the new technology:

AdReactor
Amazon 9
AdSense
AOL AdTech
Doubleclick
Flite
Adform
Taboola
DotAndAds
plista
Smart AdServer
Yieldmo

AMP loads its ads after all of the content, so as not to slow down the loading process. Once on screen, they are strategically placed around content so as not to dilute the page or “pop up” in the way of the content.

At the moment, AMP supports 13 different video players for serving video ads. Among the winners:

YouTube amp-youtube
Vimeo amp-vine
Soundcloud amp-soundcloud
Dailymotion amp-dailymotion
JW Player amp-jwplayer
Brid.tv amp-brid.tv
Brightcove Video Cloud amp-brightcove
Gfycat amp-gfycat
AOL O2 amp-o2-player

Moving Forward

AMP has yet to be universally adopted by publishers, but it’s making active strides in reliability, reputability, and proven results. It’s open source nature is a huge positive in the name of transparency, allowing the world’s top developers to go to work on improving the product. It’s clear that this collaborative effort will make AMPs the gold standard in mobile internet usage over the coming years. It’s sort of like what DSL once was to dial-up, and we all know how that turned out.

Marccx Media

Michael Peggs is the founder of Marccx Media, a digital marketing agency specializing in Search Engine Optimization (SEO) and Search Engine Marketing (SEM). Before Marcxx, Peggs worked at Google in business development, forming digital media and advertising partnerships in the United States and Asia. He is also a contributor to The Huffington Post, FastCompany and Business Insider as well as and podcaster, hosting the iTunes Top 10 New & Noteworthy Podcast You University.