The Why of Accelerated Mobile Pages

Click To See An Example AMP-Enabled Search For 'mars'Recently, Google unveiled their Accelerated Mobile Pages project (also dubbed AMP). The project aims to make the mobile web faster by creating a less-flashy, less-cluttered way to view content on your phone, potentially competing with Apple News and Facebook’s Instant Articles.

To see an example of an AMP-Enabled search,  click here to search Google for “mars” (this will only work on your mobile device).

Mobile’s Explosive Growth

In the past few years, many websites have seen a surge in mobile traffic – with many predicting that 2015 would be the year that smartphone usage overtakes desktops. To accommodate this change in usage, many websites and web developers create responsive websites – sites that will display appropriately for any device such as a desktop, tablet, or phone.

Mobile’s Achilles Heel

The issue is that many times full-featured websites can run slowly on phones. Things such as larger graphics, complex scripts, and even ads are meant for a rich user experience on a desktop and can make the same pages feel sluggish on a phone. That’s one of the goals of Accelerated Mobile Pages – to improve the speed and user experience for content.

Why AMP Is Different Than Responsive…

AMP is hoping to achieve this promised speed increase by limiting the tools a developer can use to display content. AMP guidelines include

  • no form fields
  • no external javascript
  • no external stylesheets
  • no inline styles
  • everything must adhere to limits for file size

…But Not As Different As Apple News Or Facebook’s Instant Articles

Some speculate that this is Google’s entrance into an arena that Apple News and Facebook’s Instant Articles created. Google is hoping that the open-source and community-focused project will gain traction. It’s clear that many publishers and web developers need to keep up with several schemas to publish content, but so far AMP seems straightforward to implement.

AMP For WordPress – Code And Examples

We took a look at many ways to set up AMP, and we’ve found the plugin provided by WordPress is the fastest and easiest way to implement Accelerated Mobile Pages. Your needs may require some customization to make this work.

  1. Download the official WordPress plugin

    The official WordPress AMP plugin is hosted on Github. Download the plugin to your computers.

  2. Upload And Install Plugin Via The WordPress Admin

    Once inside the admin, locate Plugins from the left side menu and then choose “Add New” from the Plugins header.
    addnew
    Upload The Plugin
    upload
    Select File and Upload
    install

  3. Activate Plugin

    activate

Testing AMP On Your WordPress Site

By taking a peek into the source code you will notice you now have a link in the head directing crawlers to your “amphtml” version of the page.

source

Now your AMP Version of your site should look similar to this. You can find this by opening your site and add a trailing “/amp/” to any URL. For example, https://www.redclayinteractive.com/blogging-from-the-bottom/ will become https://www.redclayinteractive.com/blogging-from-the-bottom/amp/

rendered

Customizing AMP For WordPress

Customization of the template is common and likely necessary to match your branding. The template.php file in the AMP plugin folder contains the contents of the new template, and modifications can be made there. Of course, create a backup of your file as future plugin upgrades are likely to overwrite your template modifications.
after

Summary

Creating a third, competing but open standard for content delivery may cater to publishers. It’s clear that Google is serious about speeding up the mobile web, and protecting its ad revenue base.

6 Comments

  1. Good article, sure this wll be the next big SEO thing.

  2. AMP is going to be a strong ranking signal on mobile devices in coming days. WordPress users must use the WP AMP plugin to speed-up their webpages for mobile screens. Being a professional SEO trainer, I started recommending and providing training on this new development to all of my marketing & optimization students. I will share this content with my contacts on my networks as an additional AMP resource. Thanks for sharing.

    Regards
    Soumya Roy
    PromozSEO Academy

  3. Hi Greg,

    With AMP version, ads didn’t show up (ads using javascript code). What do you think about this issue?

    Thanks

    1. Hi Jimmy,

      I think that it makes sense – AMP was designed to speed up pages for mobile users. When you enable Javascript, you can remotely call a nearly unlimited amount of things (both good and bad), but all of those things ultimately come at the expense of the user’s data plan, speed, and sometimes security. It makes sense for AMP to have Javascript disabled in that sense. However, I doubt the ad industry will be denied and I predict that we’ll see some sort of blended ad model with static ads, or perhaps some server-side libraries.

  4. Hi, is there a reason why the meta description has been taken out? I thought that having a meta description was included within Google’s Webmaster guidelines or has that changed?

  5. Is AMP intended to work for static wordpress pages as well (about us, home page, etc..), or only posts?

Leave a Comment

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