09 Jul Configure Accelerated Mobile Pages (AMP) For WordPress Site – A Step-by-Step Guide
Worried about high bounce rate, fewer page views in your mobile site?. And looking to increase your ad earnings through your blog’s mobile traffic?.
Though many factors like website navigation, usability, website content that can cause high bounce rate on your site, site speed considered as the primary factor.
46% of people will leave if a site is not loading within 3 seconds in mobile.
The problem with most of the bloggers like us is, we can’t spend so much money and resources for website performance optimization, and also you can’t lose the traffic because of slow loading page.
To help with this problem and make mobile website’s faster, Google recently launched an open source project called AMP (accelerated mobile pages) by partnering with many other companies and publishers to improve the page speed in mobile.
In this post, I will cover
- What is AMP(Accelerated Mobile Pages)?
- How to configure AMP in WordPress Site/Blog?
- Designing AMP articles and Tracking AMP pages with Google Analytics.
What is Accelerated Mobile Pages (AMP)?
AMP is a striped version of your site which is specially designed to give better speed and interface to the user. And AMP framework is built using AMP HTML, AMP JS, and AMP CDN to optimize your pages for better performance.
Any page should have two versions – the Original Version and the AMP version. Regarding SEO AMP version is canonicalized so need not bother about the duplicate content.
If you have already enabled Facebook’s instant article for your blog, it will have an effect inside Facebook because it is a closed infrastructure.
By configuring AMP on your site, you can make your pages load almost instantly which will result in low bounce rate, more page views, more ad impressions and more ad earnings.
Why does it matter?
- Instant Loading – AMP version of the site will load within 2-3 secs.
- Since the page loading speed is one of the main factors that causes high bounce rate, by enabling AMP you can reduce the mobile visit’s Bounce Rate drastically.
- As page speed is one of the 200 factors that affect search results, AMP Pages will have an advantage in SERP especially in mobile search results. Google also shows AMP pages in search results in the top as Carousel so that you might have an advantage in SERP.
How to Configure AMP on WordPress Site/Blog
Once you activated this plugin, it will automatically create AMP version of all posts.
You can check newly created AMP posts by appending “/amp/” or ”?amp=1” in your blog post URL.
For example, if you blog post URL is www.example.com/hello-world/
You can see AMP version at,
- Right now this plugin works only for posts not for pages.
- This plugin will create only the AMP version of your post and it won’t be ensuring serving AMP version while your visitor visits from mobile. You can ensure that AMP version of your post is serving to mobile users by redirecting mobile users to this AMP version.
- Right now this plugin won’t be displaying Featured Images in the AMP version but still there is a way to add it through code. You can learn it here.
- This plugin uses only the default styling.
- This plugin will remove the commenting option.
After you have completed the above steps, you can validate AMP post to check whether is there any error.
And open console in Google Chrome while loading to check any mistake.
If you don’t have any error, you should be getting the result like in the below image.
You can also markup the AMP posts and can make sure it with the markup testing tool.
Right now AMP versions have a lot of restrictions like you can’t have a contact form, third party JS, or a regular commenting system. It can be only possible through iFrame as of now.
Styling AMP Articles
The above plugin will create only default template of AMP version. If you need to make those to match your brand, you need to add some more custom CSS to it.
To make this easy Yoast has developed Glue For Yoast SEO AMP plugin.
You need to use Yoast SEO for this plugin to customize the AMP pages and also to make sure AMP posts have proper markup using markup checkup tool.
Once you enable this plugin you will be getting, AMP option in SEO menu in WordPress dashboard.
Tracking AMP with Google Analytics
You need to add analytics code separately to assess how AMP affected the site’s performance. If you are using “Yoast Analytics Plugin”, then you need not bother. That plugin automatically will add the Google Analytics Tracking Code in AMP post.
Otherwise, enter Google Analytics Tracking code in this option to add it in AMP posts.
Indexing AMP Pages
After creating AMP pages, you check the indexing status of AMP pages in Google Search Console in the Search Appearance option. You can also check if any AMP pages have an error.
AMP (Accelerated Mobile Pages) is still in the early stage, and we can expect more update from Google on this. And right now AMP is not having any influence in the Google’s SERP, but it may have in future.
Let us be future ready and also make our mobile visitors happy with AMP Pages.
If you have any problem in configuring AMP Pages in your site, let me know in comments.