The Accelerated Mobile Pages (AMP) project changes the mobile search industry as we know it. Or doesn’t it? Earlier this year, we mentioned Google AMP as one of the top SEO trends for 2017 when it comes to mobile optimization.
In this post, I’ll explain what’s the project about, how it works and how to implement it so your AMP website will be correctly recognized by Google search.
The AMP is an open-source framework to enable fast website loading and content distribution. It’s basically a faster version of HTML called AMP HTML. In case you want to keep the non-AMP version of your site, the AMP version will have “/amp” in the URL.
While this is a Google project, it’s not a ranking factor. Not yet! Implementation won’t directly improve your positions. But I recommend doing so for certain types of websites. Mostly for improving UX, which leads to better mobile optimization. And that’s a ranking factor.
Every AMP page has an AMP logo in search results to indicate faster and better mobile experience.
People want to seamlessly find what they’re looking for and expect to be served quickly. That’s why page speed is incredibly important, especially, on mobile devices.
If a mobile page takes longer than 3 seconds to load, 53% of all visits are abandoned. No doubt Google works on improving mobile SERP.
Implementing the AMP requires 3 main components:
The AMP HTML is a usual HTML with custom AMP properties. For example, <amp-img> is a replacement for <img> tag. You’ll find the full list of components and tags on AMP.
Here’s an example of the code:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head> It’s responsible for fast delivery of AMP sites thanks to swift resource loading and adding the custom tags. The biggest advantage is asynchronous external source making. That means nothing on the site can block anything else.
The AMP JS library is available on GitHub.
The AMP Cache is placed on Google. It’s a proxy-based content delivery network that enables fast website rendering.
Once you visit an AMP page, Google caches its contents. This way, every other person who visits the same page, it will be loaded from the Google AMP Cache.
On top of that, it includes a validation system to verify whether the page is working properly and meets all AMP requirements.
In case you run a WordPress site, you can use the AMP plugins. They will basically do the job. Depending on the plugin features, you’ll have to customize the AMP version appearance.
You can test the AMP validity here: https://search.google.com/test/amp
The report is detailed so you immediately know whether the AMP tags, CSS or AMP HTML isn’t implemented correctly.
Checking the actual number of AMP indexed websites, errors and tips to fix them is available in Google Search Console (Webmaster Tools).
The Google AMP project can be a game changer in mobile optimization. From what I observed during the last couple of months, it’s not such a big shot. I know, it’s an ongoing project. There are many optimizations to be made. We’ll see if it doesn’t end up as a useless innovation project.
I think you don’t need to rush and implement the AMP if you aren’t a news portal, blogger, or content publisher.
One thing’s for sure – AMP sites provide faster content delivery while browsing on a mobile device – and that’s crucial. According to Google, the project gets faster and grows every day.
Social networks such as Twitter or Tumblr are working on AMP support in their iOS and Android apps. E-commerce joins the AMP ecosystem too. We’ll see how it goes in the future.
This post was last modified on February 23, 2023 3:20 pm