It's nothing new: when Google rolls something new out, everybody jumps on it right away. And Google Accelerated Mobile Pages (AMP) are the latest "hot stuff" people and businesses want to know more. Yes, we spend a lot of time on our mobile phones and companies are developing new ways to monetize and have us caught within their ecosystem: Facebook with its Instant Articles, Apple with Apple News program and, of course, there's Google's answer to that: Google AMP.

In this 2nd part of the series, we'll talk about and dig deeper into Google AMP, getting to know more what they are, how they are different from standard mobile-optimized pages and how to implement them on your WordPress website.


What are Google Accelerated Mobile Pages?

On October 2015, Google announced its new Accelerated Mobile Pages project that aims at providing a faster mobile browsing and mobile consumption through its search engine by developing a new open sourced type of HTML, namely the AMP HTML.

In human language, this means that interested publishers and content producers have now the possibility to create a barebone, stripped-down HTML version of their content that uploads almost instantly when visitors are on their mobile.

Google AMP examples

Starting on February 24th, Google started to deploy AMP-compatible pages within their mobile search result page: as you can see in the video here, content from publishers with AMP HTML markup pages are displayed as a carousel in the SERP, letting the user swipe through the elements and tap directly into a page.

This also works for searches regarding Twitter, one of the big first players who stepped into Google AMP project, like this #tbt research I did:

Google AMP Twitter examples

The Google AMP carousel won't occur for any search a user performs; for now, it just fires up for news search term like "Elections 2016", "Syria", "Obama". For the sake of showing how Google AMP pages render and display, Google created some generic terms searches that have nothing to do with news like "recipes" or "fashion" as well.

How Google AMP pages are different from mobile-optimized pages?

When comparing standard mobile-optimized pages with those AMP-compatible, there are two main differences here that show up: a) speed and b) how content is rendered and delivered:

a) How fast Google AMP pages upload?

Even if there's nothing official here from Google itself, tests proved AMP pages load on average 4x faster than any mobile-optimized page. As Jon Parise, product engineer at Pinterest and part of the AMP project, shared:

We found that AMP pages load four times faster and use eight times less data than traditional mobile-optimized pages.

and to confirm that even further, here's the test from PenguinWP, who tested a single page and a blog post on their WordPress website:

Google AMP speed test on WordPress

See these numbers? That's possible because of how Google AMP pages are formatted and delivered. That's the 2nd point here we're discussing.

b) Why Google AMP pages upload so fast?

As the documentation shows, Google AMP consists of three main elements, specifically:

  • AMP HTML: a subset of HTML, with custom tags and properties such as amp-ad, amp-img, and amp-video
  • AMP JS: a JavaScript framework for mobile pages that manages resource handling and results in loading asynchronously all external resources
  • Google AMP Cache: a proxy-based CDN for delivering all valid AMP pages

How fast (or slow) a page uploads can depend on many factors that I'm not going to list here. What's important here for you to understand is that Goole AMP pages are lightweight versions of a given page that, for its by own nature has to leave out something for it to be blazing fast when uploading. How? With the AMP HTML, they get rid of "superfluous" tags, plus all non-compliant (read: third-party) Javascript is forbidden, and they get to leverage a CDN from Google for the delivery aspect.

In other words, Google AMP pages are what you could get if you'd pass standard HTML pages through a sieve delivered with an aggressive caching system.

This is just to give you the gist of it. If you'd like to get more and detailed information, please check the AMP project documentation.

AMP HTML, Javascript, CDN, fast uploading, and so on... but how all of this is affecting SEO? you might want to ask. Let's dig into it.

How Google AMP affect SEO

Now it's time to answer the one question you'd have asked right at the beginning of this post: are Google AMP pages a better fit for SEO?

Well, let's start with something we know for sure: AMP-enabled articles and pages rank higher in SERPs. In fact, if you run a test on g.co/ampdemo for "Kim Kardasian", you'll see how these AMP-enabled pages are up on the page, shown above the fold, ranking for the 2nd result (even before Kardasian's official Instagram and Twitter pages):

Google AMP ranking SEO

Higher ranks likely mean your pages will get higher click-through rates; thus, your content will experience more views and engagement. But... (there's always but's when talking about SEO).

But are Google AMP pages what your business website really needs?

First, if you don't publish content on a regular basis, Google AMP pages don't make any sense to you.

Second, are you and your business ready to give up on using your content pages as a lead magnet tool? Well, you should be since Google AMP pages don't allow opt-in forms (at least for now).

Third, are you running an e-commerce website? If your marketing and onboarding strategies don't heavily rely on content (like creating how-to's, tutorial, listicles, etc. on your blog), you don't want to go down the AMP road. And no, sales pages and press releases aren't articles, nor news-like kind of content.

How to start with Google AMP on WordPress

So, are Google AMP pages a good fit for your business? If your answer is yes, let's see how to get them on your WordPress website. Don't get scared, it's nothing that hard, even if it requires a little effort for fine tuning. Here's a useful tutorial from Jesse Hanley:

And here listed you'll find the single steps you'll need to take to have your WordPress website create Google AMP pages:

  1. Download the plugin from Automattic here

  2. Upload, install and activate it (no Settings page available for the moment)

  3. Done

To confirm the plugin is working, simply search for an article on your site and add "/amp/" at the end of your URL. But you haven't finished your work yet at this stage, you'd want to validate your AMP pages too.

Nedd help with this? Post your project and get one of our top-notch WordPress developers do it for you!

How to track Google AMP pages

Publishing content worths nothing if you can't track how your content is performing, and Google AMP pages are no exceptions. How can you track these blazing fast Google AMP pages, then?

You either pick one of the two components available: amp-pixel or amp-analytics. Here's an example of the latter configured to track pageviews and events:


<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMP Analytics</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>

    <script async custom-element="amp-analytics"
        src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>

  <amp-analytics type="googleanalytics" id="analytics1">
  <script type="application/json">
  {
    "vars": {
      "account": "UA-XXXXX-Y"  // Replace with your property ID.
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      },
      "trackEvent": {
        "selector": "#event-test",
        "on": "click",
        "request": "event",
        "vars": {
          "eventCategory": "ui-components",
          "eventAction": "click"
        }
      }
    }
  }
  </script>
  </amp-analytics>

  <h1 id="header">AMP Page</h1>

  <span id="event-test" class="box">
    Click here to generate an event
  </span>

  </body>
</html> 

The Google AMP project supports several analytics vendors, yet the list might grow in the future.

Wrapping up

One one side, Google AMP pages look kind of interesting because they upload 4x faster than standard pages. Plus, if you happen to make it to the carousel for a given query, your AMP-enabled pages will rank higher and have higher click-through rates. Speed, higher rankings, better CTRs, "this sounds like Heaven" you might shout, but hold your horses, cowboy! because there's a huge but here worth considering.

Google AMP pages are targeted to news publishers and content producers who heavily create content on a daily basis: news websites, tech blogs, verticals, etc. This means Google AMP pages don't affect, nor improve anything for non-publisher websites. If you run an e-commerce, for example, you'll have to kiss one of your top lead generation tools goodbye (aka forms), since they're not allowed for now and will have to accept the design constraints AMP pages have.

Is your business ready for this?

It's not an easy answer, and you know it best whether your business might benefit from implementing the AMP markup or not.

But let me share one last piece of advice from Jake Goldman, President and Founder of 10Up:

News outlets and publishers, particularly those seeing substantial inbound traffic from Google, should adopt AMP HTML as soon as possible, but use it as an entry point to push visitors to their "full" site. Others should wait and see how AMP—and Google's use of AMP—evolves over time. Either way, web developers and designers will need time to understand and address the constraints of this nascent technology, so allocate budgets accordingly.

Now it's your turn: What's your take on Google AMP? Have you started using them on your WordPress website?

Don't forget to learn more about Facebook Instant Articles and how to add your WordPress website to Apple News app

Codeable... Where Realistic Clients Meet World Class WordPress Developers

Post Your Project Today