Google and some other partners like Twitter jointly built AMP Project earlier this 2016 and actually changed the way we browse websites on our mobile.
Besides Responsive Design; Google actually want the websites to load even faster on mobile and this was the idea behind Accelerated Mobile Pages (AMP) project.
Let’s get to know it in detail.
What Is AMP?
AMP stands for Accelerated Mobile Pages which actually lightweight version of an existing website specially targeted for Mobile Users. AMP is built by 3 core elements named AMP HTML, AMP JS and AMP cache pages.
How AMP Works?
AMP actually has their own set of tags that replaces the regular set of JS, HTML tags/codes to make website insanely customized for instantaneous loading.
For instance, AMP uses their own set of JS elements those doesn’t block page rendering. They load the website layout first instead of loading images, ads and other stuff following just one HTTP request. They also use inline CSS styles and zero HTTP requests for downloading webpage’s fonts.
To understand more about how AMP works; please watch the following video –
What are The Benefits of AMP for SEO?
You know, Google love the websites those load faster than other websites. If you install AMP; your website will be loaded almost instantly and thus the User Experience will be improved and Google takes it as a positive signal.
Google announced on their blog already that; site speed is an essential metric for web search ranking.
So, in essence, we have to make sure that our web pages load faster both in Mobile and Desktop to have the better ranking on Google.
The takeaways would be like – if your site loads faster, you will get more CTR from SERPs and more CTR means a signal for Google that it’s a good site to drive visitors.
Now, let’s install AMP to make your website insanely faster on Mobile.
How To Install AMP on a WordPress based Website?
To make the installation process easier; I am going to place some Screenshot below so that you can follow the steps and implement on your WordPress based site on the way?
Step 01: Head over to your WordPress dashboard, go to plugin tab and click on Add new. Then search the plugin by typing “AMP” on the Plugin search box.
Step 02: Install the AMP for WP plugin authored by Ahmed Kaludi or download the plugin from here and upload it.
Step 03: Activate the plugin and once activated it will ask you to install another “AMP” plugin authored by Automattic.
Step 04: After installing and activating both the plugins above; go to your admin dashboard and find “AMP” settings tab on the left sidebar. Click on it and it will open the AMP for WP option panel where we will customize the look and functionalities of our AMP website.
You have successfully set the AMP up on your website.
Now explore the options that those two plugins are giving you for free!
Step 5: Go to the General button of the options panel; and upload the Logo, change the color of your site and customize your menu from the Menu tab from this options panel.
Click on the “Advance Settings” and enable “Mobile Redirection” so that your mobile users automatically redirected to the amp version of your website.
How To Validate Your AMP Version?
You must have to check your amp codes and pages before you start redirecting visitors to your amp page.
Luckily Google has introduced a Web Tool to validate your amp version and pages. Click here to access the tool and place your amp site there. Your AMP URL will look like this – example.com/amp.
If you have successfully set up AMP and everything seems okay; you will get a message like an image below:
After the validation, click on the “Submit to Google” button to submit your site to google for indexation.
How To Add Ads on AMP Enabled Site?
You can easily implement Adsense or other network’s ads code on your website using the above mentioned AMP plugin.
Just go to the options panel and click on the “Advertisement” tab.
Enter your Ad size, Client ID (your publisher ID) and Ads Slot ID following the image below –
This is the basic and everything about setting up AMP pages for a WordPress Blog or Website.
If you have any question; feel free to comment below so that I can help you.