How to AMP up your content with Google Accelerated Mobile Pages (AMP)

How do Google Accelerated Mobile Pages influence your online marketing? It’s a question many businesses and marketers are challenged by.

We know how the search engines value your page load speed and how it can affect the engagement of your audience. More recently Facebook and Apple released their versions for making content more easily accessible from within their platform. Not to be left out, Google too released its plan to change the way mobile content is consumed. They released an open source, web-based solution called Google Accelerated Mobile Pages or AMP, a demo of which you can view below.

While Facebook and Apple have had a head start with their solutions, we believe that AMP will catch up to be a go-to solution for many businesses. So if you are a publisher or marketer and need the why, what and how of Google Accelerated Mobile Pages – we have you covered with this guide.

Google has made no secret of wanting to improve the performance of the mobile web. Why?

Consider this –

61% of users said that if they didn’t find what they were looking for right away on a mobile site, they’d quickly move on to another site.

In fact, you have probably experienced the pain of trying to get on a slow loading mobile page. And like most people, you likely ended up bailing or trying a competitor’s site. It is those painful moments that Google wants to dispense with through its AMP solution.

What makes traditional mobile pages so slow?

We have talked about what makes websites slow and how to speed them up. The issue with viewing pages on mobile devices is that like viewing a web page on a desktop, you need to pull several packets of information, often from different hosts. For example, the mobile browser could be calling images, carousels, social plugins, videos, ad tracking and analytics scripts, etc.

All of these make sense to have, but they all add up, and the mobile device just doesn’t have the processing power to pull all that’s required quickly.

It’s a bit like going to the bank and asking to withdraw $200 but asking for it in the following manner: 1 hundred-dollar bill, 2 twenty dollar bills, 3 ten dollar bills, 5 five dollar bills and 10 one dollar bills. The teller operating like the browser requesting traditional pages would make a trip to collect the required number of notes for each type of bill separately.

In other words, it would take a while before the teller had all the money you asked for in the denominations you requested to complete the transaction.

How do Google Accelerated Mobile Pages help?

Google Accelerated Mobile Pages (AMP) are essentially a striped down version of the mobile web which run off a reimagined version of HTML known as AMP HTML. So essentially, this removes the need for the teller to make separate trips to get each denomination of bills and instead just hands all that you asked for at once.

Google says that pages created with AMP HTML can load anywhere from 15 to 85% faster than their non-AMP version.

Nieman Labs, in an attempt to find out how fast it worked, tested the desktop version of a New York Times story against the AMP version of the same. The desktop version loaded in 3.82 seconds, but the AMP version loaded in 0.646 seconds. AMP achieves these speeds by:

  • Streamlining website code. In other words, removing third-party elements and JavaScripts.
  • Serving pages from its own high-performance global servers when you visit an AMP optimized page.

This sounds like good news, except that it strips out a lot of the elements such as scripts and code for social plugins, advertising, etc, which is not so nice.

Pros of Googles AMP

  • Accelerated Mobile Pages load 4 times faster and use 8 times less data, so this will contribute to better user experiences and better website performance.
  • Satisfies mobile friendly ranking signal though it is not a ranking factor.
  • AMP is open source, so its evolution is not limited to Google’s engineers.
  • Lower bounce rates due to faster page load times.
  • Visitors are likely to consume more content that loads quickly.
  • AMP content is highlighted with a green/grey lightning bolt in the “Top Stories” section.
  • AMP content can be embedded on other sites (for example, Twitter and Pinterest).
  • AMP loads content first, then ads.
  • AMP allows an analytics tag to be inserted. This allows publishers to send data to analytics providers such as Chartbeat, Adobe and Parse.ly that the AMP projects have pre-screened.
  • You can use a Google Content Delivery Network, which will take your AMP-enabled pages, cache them and automatically make some performance optimizations.

Cons of Googles AMP

  • Building email lists and acquiring leads will be a problem as forms are currently not allowed, but there is a work around to add lead capturing forms.
  • External style sheets and third-party JavaScripts are not permitted.
  • AMP articles that appear in Top Stories could push paid search results down.
  • It doesn’t currently support all ad formats, hence limiting monetization opportunities.
  • The manner in which ads are served will change.
  • Sites that link to AMP content will not be linking to the publisher’s domain name, but to google.com.
  • AMP strips out non-essential design to increase the speed of the page loading. This, in turn, limits functions.
  • Publishers will have to adhere to Google’s AMP standards and ensure that every page is free of errors. While they have provided a validator to help with this, it could mean more developer hours.

Who needs to make modifications because of AMP?

As I have said before, Google has been focusing on optimizing mobile web performance. Why? Because they believe that users love content and that they like it more when it is delivered fast.

Facebook Instant Article and Apple News are essentially fancy news aggregators or a new version of RSS. Google Accelerated Mobile Pages are different as they require publishers to optimize their content for consumption on the open web and on mobile devices. In other words, this makes for easier content entry and distribution.

So should you worry about AMP?

Well, it is something that any business that publishes content should keep on their radar, but the extent to which you need to take action depends on your business.

If for example:

  • You are in a niche market that doesn’t have much competition, then you’ll want to start optimizing your content for mobile users.
  • If you are a major publication, then you should already have a strategy to optimize for mobile user experience. You may need to make some adjustments to your overall strategy or, if unprepared as yet, will need to get one underway asap.
  • If you have a site that gains a lot of traffic, then again you will want to check your mobile user experience strategy and see how AMP develops.

If you don’t fit any of the above, then watch how things unfold and act accordingly, but it wouldn’t hurt in the mean time to experiment and build out a strategy to help your mobile users.

What does AMP optimized content look like?

brexit example screenshot 1To test out AMP optimized content:

Pull out your smartphone.

Open up a browser.

Type in the url – g.co/ampdemo.

Search for something via the Google search box – Ed Sheeran or Barack Obama for example.

I typed in “brexit” and found AMP articles listed in the Top Stories section as per the screenshot alongside.

Some publishers have embraced the AMP format. Here are a couple of examples of their design comparisons.

What does this mean for advertising?

According to the Accelerated Mobile Pages Project –

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, ad networks and technologies in Accelerated Mobile Pages. As part of that, those involved with the project are also engaged in crafting Sustainable Ad Practices to ensure that ads in AMP files are fast, safe, compelling and effective for users.

AMP features basic ad support but will support sticky ads, flying carpet ads, and AMP ads or AMP Pages.

AMP ads are essentially written in AMP HTML and therefore should load as fast as the AMP Posts. Sticky ads, on the other hand, will stay at the bottom or top of the page as you scroll through an article. Flying carpet ads are the kind of ads that hijack the pages scrolling behavior so a large ad can scroll by.

According to Google, more than 80% of publishers that have used ads on AMP have seen higher viewability rates, and more than 90% of them say they are getting higher click through rates along with better revenues.

The popular ad networks are using the AMP-ad extended component. To see what they look like, you can view them here within the .md files on AMP’s GitHub Page.

If you are using paywalls or subscriptions, you can check the documentation for implementing it on AMP, along with using the “AMP Access” extension.

What does this mean for tracking?

To overcome the issue of having multiple analytics programs slowing down a site, Google has implemented a solution that measures once but reports to many. There are 2 options to implement analytics with AMP on your site:

  1. The Amp-Pixel Element: This can be used like a tracking pixel to count page views using a GET request.
  2. The Amp-Analytics Extended Component: This is used to measure activity on an AMP page or post. If you want to get Google Analytics working, then this is the option to go with. Details of what is measured and how the data is sent to an analytics server is specified in a JSON configuration object. So it allows for a greater level of configuration for analytics.

To learn more, check out Google’s AMP Analytics section on their developer page. It has several examples of implementations.

Let’s say you want to try AMP out for yourself, then follow the instructions below to get started.

How to install AMP on WordPress

Step 1: Type “AMP” into the plugin search box to locate this plugin by Automattic.

AMP plugin

 

Step 2: Click Install and once installed, activate the plugin.

Step 3: Add a new plugin by searching for “Glue for Yoast SEO & AMP” via the plugin search box.

Glue for Yoast plugin

Step 4: Again install the plugin and then activate it.

Why use multiple plugins?

While the WordPress AMP plugin provides the base AMP functionality, you have little control over the design side of things. We recommend using the Glue plugin, as it provides an easily configurable set of design options. PageFrog is another plugin option you could use, but we encountered a number of issues with it and so decided against it.

Step 5: To configure the styling, go over to the SEO menu and click on the AMP option.

yoast amp

Select the appropriate tab for style, design and analytics options.

AMP Glue plugin options

Step 6: To get Google Analytics working, click “Analytics” under Mobile Formats in the main menu and add your Google Analytics account information here.

Once you have setup your AMP content on WordPress, you can verify whether Google has indexed it properly through the Google Webmaster tool. It usually takes 4 to 5 days for Google to index this content.

How to install AMP on non-WordPress sites

If you are not using WordPress, the AMP Project has a guide to creating your AMP pages.

To get started with AMP or not to?

Is AMP a ranking factor for your content? That’s a question that a lot of people seem to be worried about.

According to Google – No

It does however help satisfy the mobile-friendly ranking signal but is not a ranking signal in itself.

So should you even bother with AMP?

The fact that AMP content seems to get straight to the top of the page, even above organic results, would be a good reason to get started on AMP. The other being to take advantage of the fast delivery that Google’s caching servers offer.

Let us know if you have started using Google AMP, but in the meantime, be sure to download our guide to improving your WordPress page load times below.

WordPress speed guide

About

Vinay is the content marketing manager for WP Curve. Follow him @wpcurve

WordPress problems?

Our WordPress experts have you covered.

Hyper-responsive 24/7/365 WordPress support, maintenance and small fixes.