March 23, 2016

What to know about Accelerated Mobile Pages

If there is one thing that Google does not hide from webmasters, it’s that their site(s) better be well-optimized for mobile. We all remember the panic last year, code name “Mobilegeddon”, where Google announced it would drastically adjust its algorithm to give preference to mobile-friendly pages. When one looks at some of the numbers, it’s clear to see why Google implemented such drastic measures.

Just today, it was reported by Greg Sterling of Search Engine Land that search query volumes for PC peaked back in 2013. In May of last year, Google stated that mobile queries surpassed PC in ten countries, including the United States and Japan.

While responsiveness and layout are crucial factors in a healthy mobile website, site speed deserves equivalent attention. Why?

Low Site Speed –> High Bounce Rate –> Disappointed Users –> Lower Rankings

Luckily, Google gave webmasters and publishers a relatively easy opportunity to boost their mobile game with the unveiling of Accelerated Mobile Pages Project (AMP) last October.

AMP is an effort “to improve the entire mobile content ecosystem”, according to the official AMP website. The solution that AMP puts in place is specialized markup that replaces standard HTML, opening the door to faster load times and potentially lower bounce rates.

If you’re not yet familiar with AMP, here are some things to know.


1. AMP-powered pages set restrictive guidelines for front-end developers

In order for a piece of content to fall within AMP guidelines, a certain set of tags with AMP HTML are implemented within the document. Google makes it clear on the AMP Project website that in order for correct rendering, the following must be in place. Note that body content in this example is not required, but body tags are:

Although tags such as <html> and <body> are optional in HTML, AMP makes it a required factor. Google also makes it clear that no third-party JavaScript is allowed in an AMP HTML document, certain fonts and image tags can’t be used, nor can a stylesheet be larger than 50 kilobytes.

Stripping back a lot of front-end language is essentially what gives AMP the power to provide faster load times. You just have to know how to play by the rules .

2. AMP isn’t for every website…yet.

If slow load speed is holding back conversions on your Ecommerce site, jumping on AMP sounds like a sound decision, right? You certainly could, as AMP states that consumer platforms are open to get in on the action.

But the first focus that the project zeroed-in on was news delivery. Look up an example of AMP right now, and a majority of stills will be from major news publications such as The Washington Post or The Guardian. These examples follow the specific definition of what Google constitutes as “articles” – investigative, well-researched pieces of content that steer clear of a sales pitch.

If your site is strictly focused on conversion and is short of richer content such as a blog, then there’s little good that implementing AMP can do for now. But since AMP is an open source project, consumer platforms can expect to get in on the action as the project continues to evolve.

In the meantime, you are better off thinking about how you can implement some richer content on your site if you have not yet developed a strategy.

3. Third-party content CAN be included in AMP.

As restrictive as I might be making AMP sound, it’s not all that bad. While restrictive JavaScript and CSS parameters might act as a turn-off, there is still plenty of room for third-party content to be shared.

If publishers wish to embed a YouTube video in AMP HTML, for example, a few extra steps just need to be taken in place of simply embedding iframes.

The following script must be placed in the <head> of the document. This is assuming you would have already added the necessary script as mentioned in point #1:

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Then, place the <amp-youtube> tag with the following elements.:

<amp-youtube width="480" height="270" layout=responsive data-video-id="lBTCB7yLs8Y"> </amp-youtube

Note that the “data-video-id” is unique to the YouTube video you wish to share. In the example above, the user would see this video:

If you view this in YouTube, the ending “lBTCB7yLs8Y” in the URL serves as the data-video-id.

This is just one example of how third-party content can be included in AMP. For more, visit the AMP Project’s Third Party Components guide.

On top of media, AMP has allows third-party ads through <amp-ad>. In fact, lost revenue on slow page loads seems to have a lot to do with the creation of AMP in the first place.

4. AMP has not been, and will never likely be, a finalized product.

As I discussed how AMP may not be for every website yet, I had mentioned how it’s an ever-evolving open-source project. What’s not available for implementation today might arrive tomorrow. As Google continues to place further preference over mobile-friendly content, one can expect AMP to be a growing factor in the mobile game.

If you’re looking to explore even more technical aspects of the project and seeing what  others are building out, I would recommend giving the GitHub AMP Project Portal a gander.

  • accelerated mobile pages, AMP, content marketing, google, mobile marketing,


Leave a Reply

Your email address will not be published. Required fields are marked *