Speed is one of the strongest competitive niche for most websites. Slow browsing websites have higher bounce rate. We also have an article talking about easy ways to speed your WordPress site. Most website visitors are from a mobile device so it becomes even more important to make a faster loading website for mobiles. To fulfill the need of Speed in mobile pages AMP was born. In this article we will show you the simplest way to implement Google AMP in your WordPress site.
What is AMP?
The full form of AMP is Accelerated Mobile Pages. It is an open source project initiated with the goal of improving the mobile content environment for publishers as well as users. AMP contains all the important elements of the main web page whereas it removes the unnecessary fancy stuffs in order to make the page load quicker. AMP pages get caching service for free by Google. To encourage AMP implementation, Google drives more traffic to the websites that have AMP in it. AMP can build lightweight mobile web pages that improve the overall performance of the mobile pages by decreasing the loading time. AMP can be used by any app, browser or web browser. Currently it is used by many big names Google, Twitter, Reddit and others.
The Simplest Way to Implement Google AMP in Your WordPress Site
If you are looking for the simplest way to implement Google AMP in your WordPress site then using plugin can be the best option. For implementation of AMP, there are some strict guidelines that should be followed. Since the guidelines are well documented in plugin, so things become pretty simple with plugin.
AMP plugin is by far the best choice you have for creating accelerated mobile pages for your website. you can easily find the plugin in WordPress repository. All you need to do is install the plugin and activate AMP plugin from admin dashboard. To know what is plugin and how to implement it we have a article “What is Plugin in WordPress and How does it work?“.
The plugin will automatically create amp pages and you don’t even have to worry about any kinds of customization. To view the amp version simply add /amp/ at the end of your URL. For example if your post URL is http://example.com/2017/01/01/ then you can access your post URL at http://example.com/2016/01/01/amp/. If you haven’t enable the pretty URL then you can view amp by adding ?amp=1. So the above example URL will look like this http://example.com/2016/01/01/?amp=1.
You can use even customizer to view and make color changes to the AMP version of your website. Navigate to Appearance > AMP and you can see how your website looks on the mobile.
You can change header text color, header background color and color scheme of your website and save it. The link color will be same as the header background color. If you see 404 error while trying to view the AMP version then you may need to refresh the website’s permalink structure. You can do so by going to Settings > Permalinks in your admin dashboard and then click save changes button. Although the plugin is fairly easy to use, there are two important things that the plugin lack.
- The plugin do not support pages and archives.
- The plugin creates the AMP content but do not automatically display it to users.
To overcome these loopholes we can take help of other plugins. There are many plugins that allows you to add different customization options for your AMP.
Adding Customization Options for Your AMP
Using Custom AMP
Custom AMP plugin works in support of our previous AMP plugin. This plugin gives you the customization power that was not available with only AMP plugin. However this plugin cannot work individually, you will need the AMP plugin that we discussed earlier installed.
Once the plugin is installed and activated you can customize the following changes.
- Set Site AMP Icon, Logo
- Add Featured Image to AMP content (post)
- Change AMP Content Width
- Change default AMP template data
- Add Comment Count to meta AMP page
- Insert code to Head and Footer
- Change Endpoint of AMP
- AMP for WooCommerce content
- Google Analytic code for AMP
- Add Menu for AMP Pages
If you already have Yoast SEO plugin installed in your website then this option is suitable for you to make customization. If you have never heard of Yoast SEO plugin then you can read our article “Install and Setup WordPress SEO Plugin by Yoast”. Once you have Yoast SEO plugin, you need to install an add-on for Yoast plugin called Glue for Yoast SEO and AMP. This add-on will give you extended customization options for AMP.
Once activated visit SEO > AMP to configure plugin settings. In the post type tab, you can extend the support for other post types.
In the design tab, you can upload logo and header image for your website. You can also choose the content color for title, text and AMP header.
Similarly, in the analytical tab you can add your Google analytical ID. Finally click the save button to save the necessary changes.
In mobile, loading the full version of website can result in slow loading of pages. This gives bad user experience for visitors driving the traffic away. AMP can be a pretty useful in this case. Due to backing up from Google, AMP can be a powerful tool to boost the SEO. It’s a modern trend that you don’t want to miss out. In this article we discussed about the simplest way to implement Google AMP in your WordPress site. We hope the article was useful. You can also read our other article on “How to Make URLs SEO Friendly in WordPress”.
Latest posts by Kantiman Bajracharya (see all)
- What are Different WordPress Theme Licensing Terms? - December 21, 2017
- 4 Tips to Optimize Your WordPress for Social Media Share - November 30, 2017
- What is WordPress? Is WordPress Free? Why is WordPress so popular? - November 22, 2017