Accelerated Mobile Pages 101: Everything you Need to Know About Google’s AMPs

The Google Accelerated Mobile Pages (AMP) project was launched a couple of months ago. This open source initiative was announced by the company in October 2015, and its purpose is to improve the performance of the mobile web by: “creating open technical standards to boost page speed and streamline ads.”

The ultimate goal of Google’s AMP is to build a more robust & engaging online ecosystem for mobile devices.

The release of Google’s Accelerated Mobile Pages follows the hugely successful launch of Facebook’s Instant Articles for iPhones and is clearly one of the company’s attempts to boost its presence on mobile devices.

Facebook was quick to realize that, while the mobile web is healthy, its engagement levels are not. According to data from Yahoo’s Flurry unit, only 5% of mobile media time is spent with the mobile web. This is partly due to faulty mobile user experience and disrupting ads.

According to Google, its Accelerated Mobile Pages have been extremely well received by developers and publishers. Since the announcement was made, last fall, thousands of sites and developers from over 30 countries have joined the program.

Google Vice-President of Engineering, David Besbris, explains that AMPs will load four times faster and use 1/10 the data used by normal pages. Furthermore, Accelerated Mobile Pages will also address the problem of native ads.

“Ad blocking is really a rejection of a slower user experience and AMP answers that. We’ve structured the AMP page, so content doesn’t’ get blocked by ads. AMP doesn’t permit bad ad experience.” he added

How Accelerated Mobile Pages Work

If you’re among those who wish to implement AMPs into their online strategy, you are probably wondering how the whole thing works.

AMP is, essentially, a framework for creating mobile-optimized web pages, and it consists of 3 elements: AMP HTML (a subset of HTML with custom tags, properties, and restrictions), AMP JS (a JavaScript framework for AMP pages that handles resources and asynchronous loading), and AMP CDN.

The question on everyone’s minds right now is: what will AMPs look like on SERPs? Google has provided an interesting demo that you can check out by accessing g.co/ampdemo (from your mobile device) or by emulating the experience through the Chrome Developers Tools.

How to Implement AMP for your Site

AMPing up a site seems slightly more complicated than implementing Facebook Instant Articles. You will have to maintain two versions of your article on the site: the original one (for desktop viewing), and the AMP version.

Accelerated Mobile Pages do not allow the use of third-party JS and form elements (e.g. lead forms, comments, etc.). The only way around this is through the use of an iframes hack. What’s more, you will also have to rewrite your site’s template to accommodate AMP’s restrictions (e.g. CSS must be in-line and less than 50KB).

What about media files? We’re glad you asked. Media items will also involve special handling. Images will require custom amp-img elements and must clearly specify the height & weight. For GIFs, you will have to use the amp-anim extended component, and for embedded YouTube videos you will have to use the amp-youtube extended components.

On the bright side, AMP also supports elements such as image lightboxes, slideshows, and social media embeds (for Facebook, Vine, Pinterest, Instagram, and Twitter).

Recommended Read: AMP HTML Extended Components

Important Note: Google also mentions that platforms which support Accelerated Mobile Pages might require Schema.org meta-data to specify the content type. (read more).

How AMP Will Benefit your Site

User-experience aside, publishers are wondering how Accelerated Mobile Pages will benefit them, especially considering the increasing popularity of ad blockers. AMP has a response for this problem:

“A goal of the Accelerated Mobile Pages Project is to ensure effective ad monetization on the mobile web while embracing a user-centric approach. With that context, the objective is to provide support for a comprehensive range of ad formats, networks, and technologies in AMPs.”

As a result, Google has set-up the amp-ad extended component that already offers support for popular networks such as AdReactor, Amazon A9, Google AdSense, AdForm, Taboola, Yieldmo, and more.

What About Analytics?

We are extremely excited about AMP’s analytics. There are two ways through which you can enable analytics functionality for Accelerated Mobile Pages:

1. Using the amp-analytics extended component – recommended for advanced users. It allows for a greater level of configuration & analytics interactions. (read more)

2. Using the amp-pixel element component – recommended for basic users. It counts page-views as a traditional tracking pixel, with GET request.

Google has published a complete guide to Analytics for AMP Pages on its developer’s blog.

How to Set-up Accelerated Mobile Pages

Now that you understand the basics of AMPs, it’s time to get your hands dirty by implementing them on your WordPress site. Here’s how:

· Download the plugin from the GitHub page as a Zip file. Install the plugin on your site and append the “/amp/” tag (or “?amp=1”) to any article on your page.

· The Search Console will eventually pick up the AMP version of your articles (with the rel=”amphtml” tag). Once this happens, you can start optimizing and correcting issues. The only problem with this is that changes are picked up rather slowly by the console.

· Validate with the Schema Mark-up. As I already mentioned, you will have to validate the schema mark-up on your Accelerated Mobile Pages. For this purpose, you will need the Google Structured Data Testing tool.

· Get Google Analytics to Work. Please read the official guide on Google Developers for more info.

So there you have it: Google’s Accelerated Mobile Pages in a nutshell. Are you excited? Will you be implementing them on your site? Let us know in the comments below.

Read More

Google Updates

Google Algorithm Updates: Changes You Should Look Out For

With the release of Hummingbird and Matt Cutt’s replacement as head of web spam, Google has become less and less transparent.

Best practices, such as creating great content, building high-quality backlinks, and improving on-site SEO may no longer be enough. The new age of digital marketing will be shaped by innovative branding, mobile, and user-friendly approaches based on what we have been seeing lately in the SERPs.

(more…)

Read More