So, lately so many people are talking about AMP/Accelerated Mobile Pages even though it got introduced by google somewhere around end of 2015.
AMP Logo from http://ampproject.org
Just Like you, I too got puzzled whether I am missing anything important in the blogging landscape.
Don’t worry, I got a detailed explanation on:
- What is AMP?
- How AMP works?
- How to implement AMP for your website?
- Example: Using AMP on WordPress
- Validating AMP on you site
What is AMP?
AMP stands for Accelerated Mobile Pages. Just like the name conveys this project makes sure pages are loaded pretty fast on the mobile.
So this project which is backed by google, creates a standard which can followed by publishers to make pages load fast in the mobile.
If you are already this post on your mobile, you should already be knowing why everyone else does access internet in mobile.
If you see the above market share by device types, mobile internet access is growing.
And you never want to lose a pie just because your site is not AMP optimised.
Also google already started showing AMP icons in all AMP compatible websites to distinguish them from other sites.
How AMP works?
So when an user request your site from mobile device or search engine crawling your website. I has its own validation mechanism to identify whether your site is AMP compatible.
Once validation is done it will serve the AMP content in the mobile device request.
In order for smooth working of this, AMP project recommends you to follow the basic three core components of any AMP page.
1. AMP HTML
This is same as normal HTML which used to construct the page. But it has some restrictions on normal HTML to provide better performance.
Search engines would be able to discover that your site is AMP if it contains <link rel=””> In the <head> section.
For example: Non-AMP page should contain link tag in format like below:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
And AMP page should contain link tag in format like below:
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
For more reference to the AMP compatible HTML tags check this documentation.
2. AMP JS
This library would help in fast load of the page by making the images, JS or CSS files asynchronous which are otherwise blocking the content to load.
This library has set of best practices which needs to be followed on the page.
3. AMP Cache
Once google AMP validates that your page supports and follow AMP convention, then your page will be cached in the google CDN to deliver the content much faster.
How to implement AMP for your website?
Right now there are not many libraries for your self hosted pages and it also very difficult to define how it works for every page in this post.
But, I promise I will write detailed post on how to implement for different technologies.
However, I will explain how to implement AMP on your wordpress site which is almost used by many people to host their blog/website.
Example: Using AMP on wordpress
This is an example with an assumption that you have your wordpress already being setup and running.
It is just going to be another bite just by clicking.
To make AMP work we need to install the following plugin:
Base AMP plugin:
Plugin to enable more features to use all of the AMP offerings:
Once installed, activate both the plugins.
Following video from the team who developed the plugin given a detailed description:
I hope this video would have helped you in setting up the AMP.
Validating if your site is AMP capable
I know, doing all these steps would already be making your site AMP compatible.
But, If you wanted a proof you can use this validation site which is been created by the amp project team to validate.
This is the validation for bloggy.co.
I wanted to leave you with the following resources which can use to learn more about the AMP and future updates which you need to be in track of in case of AMP.
Official project site: https://www.ampproject.org/
AMP validator: https://validator.ampproject.org/