Since Google has announced they will start ranking site by their mobile version in September I have had a lot of clients asking me what this means for their business and what they can do to make sure this doesn’t hurt their website. I am telling them 2 things 1) Focus more on how your mobile website looks on multiple types of devices 2) Start implementing AMP on your website as soon as possible.
What Is AMP?
This past October, Google declared Accelerated Mobile Pages (AMP), a very accessible framework for producing fast-loading mobile webpages. The open-source initiative is intended to enable publishers to quickly improve speed (and thus, the consumer experience) to their mobile readership without sacrificing any ad revenue that they may rely upon.
Publishers fail this because of resource limitations, although experienced developers can frequently achieve results through intensive performance optimizations. AMP permits these optimizations to be achieved without altering the mobile web experience.
There's also the benefit of its users and other prominent internet technology companies, who are encouraging its use by integrating it greatly in their various platforms.
How Does AMP Work?
Basically, a framework for Producing web pages that are mobile, AMP consists of three basic parts:
AMP HTML: A subset of HTML, this markup language has some custom labels and properties and many restrictions. However, if you are familiar with HTML that is regular, you shouldn't have difficulty adapting pages to AMP HTML. For additional information about how it differs from basic HTML, check out AMP Project's list of mandatory markups that your AMP HTML webpage "must" have.
AMP JS: A JavaScript framework for pages. For the most part, it handles resource managing and asynchronous loading. It must be said that JavaScript is not allowed with AMP.
AMP CDN: An optional Content Delivery Network, it will take your AMP-enabled pages, cache them and automatically make some performance optimizations.
The reason why it is important to add AMP to your website is that it increases your page speed for mobile. Google has stated that adding AMP to your website is not a ranking factor for Google. However, page speed is a ranking factor for Google and AMP is supposed to increase your page speed, especially for mobile. SEO experts have seen over the past couple of years that Google has shown a special preference for ranking websites higher that have fast page speed. This is done to the fact that Google wants the user to have a good user experience and page speed is a big factor in UX.
Implementing AMP is not an easy task because there are multiple steps and code that will need to change across the entire website. If you want, you can do the bare minimum and just add an AMP boilerplate on your website, or you can add AMP code to multiple elements on each page. The more AMP you add to your website the faster it will be, and Google will like and notice that change.
Because adding AMP to your entire website is a big task, especially for large websites, I would suggest doing it in phases and working on specific categories of pages at a time. Implementing AMP on your blogs first is a good starting point because blogs are the more relevant and content-rich pages on your website. This is also something that other SaaS websites like SquareSpace and Wix are doing currently until they can add it to all pages. This will also allow you to test the AMP code on the pages to make sure there are no errors that might pop up in the search console.
Below are the steps that you will need to take to add the AMP HTML code to your website.
1) AMP Boilerplate example:
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<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>
<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>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
2) AMP Image Code Example:
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
3) AMP Style HTML Example:
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
4) Linking Pages with AMP Canonical Tags Example:
Add the following to the non-AMP page:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
And this to the AMP page:
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
Conclusion
AMP provides a way that it is easy to enhance the rate of mobile sites for publishers. This is something that all website developers and SEO experts need to keep their eye on because the AMP features are only going to get richer. This can not only help your website user experience but can help you rank better as well. I also think this will help you get listed on Google Discover quicker as well. We will have to see what will happen in the future with AMP but if I was you I would start reading and joining some AMP social media groups and forums.
Are You an SEO or website developer? If so, you need to start thinking about Accelerated Mobile Pages.