When I first heard about Google’s AMP, which stands for Accelerated Mobile Page, I was excited to apply this in my website. Waving valediction to slow loading mobile pages, I started to experiment AMP with WordPress, using different configurations to understand which setup gives me the best performance with no point loss in terms of appeal.
I was using “AMP for WP,” which is still a very popular plugin, and honestly, at first, it was pretty easy to configure just by enabling few options in AMP dashboard. After that mobile version of my website was changed entirely, it was fast, better UX and clean too.
I have never used Adsense on that website so had no idea how it works with ads, does it improve or cut the revenues. The idea was obvious to improve the mobile version of my website.
That was my story. I know you are here to find the proper configuration of AMP plugin, but before starting the tutorial, I do believe that knowing about AMP and its pros and cons are essential.
What Is AMP?
Accelerated Mobile Pages shortly AMP is a free, open-source modern-day framework which allows you to create mobile pages that deliver it’s contents quickly. The reason behind this is the preloaded libraries in AMP which consist of HTML, JS, and other cache libraries which can accelerate the load speed of mobile pages.
It doesn’t matter whether you have some heavy contents like infographics, videos, pdf files, or some live data charts amp will work on its way. It will display contents that matter to your readers but get rid of all the unnecessary elements that force your website load slowly. Here’s how a mobile page with and without AMP looks like:
Do You Need to Implement AMP?
Well, it depends on your choice and requirements. From the pros and cons I have mentioned below, you can find out whether you need AMP or your usual responsive theme is better. Think twice before making your decision.
AMP Pros
- Speed up your website load time.
- It will improve server performance.
- It will positively influence on mobile ranking due to its faster load time.
AMP Cons
- Your mobile site cache is on google’s control.
- Your analytics may suffer sometime.
- Ads revenue is reduced. (I was not sure previously but after a few months of experiments now I can say your income will be reduced ).
How to Properly Configure AMP With a WordPress Website
To setup amp with your website, first of all, you need to install any amp plugin from WordPress repository. In this tutorial, I am using the AMP for WP plugin, which is very popular with 100,000+ Active Installations.
Go to WordPress plugin – Add New Plugin – and search “AMP for WP.”
Activate the plugin, and you will automatically be redirected to the AMP homepage where you can either use an installation wizard or AMP option pannel. I would recommend using AMP wizard if you are a beginner or you can use the options panel instead.
Assuming you are just beginning with AMP plugin, let’s click on the installation wizard.
This Installation Wizard helps you to set up the necessary options for AMP. The steps are optional & only take only a few minutes. To get started click on “Start.”
First thing first, you have to upload your website logo from your WP gallery or your local storage. If you have not created a logo yet create a logo here for free.
Remember that your logo should be of size 190×36 for proper appeal.
In the next step, you need to define where you are going to apply AMP pages. You usually should use AMP on the whole website like posts, page, homepage, category pages, even with the tags. But some times implementing AMP on categories and tags result in 404 errors.
You can first apply AMP for all the options then if you detect 404 errors in category pages, you can uncheck the option later.
The following step is to configure your Google analytics with AMP. If you do not configure analytics tracking code with AMP plugin, mobile traffic won’t be counted on analytics, which is horrible to see half of the visitor’s count may drop just after configuring AMP plugin. So it’s highly recommended to track your AMP traffics too.
You can find the analytics tracking code from the admin settings of Analytics. Go ahead and select the property on which you are configuring AMP and copy the code from tracking info.
Now paste the code into the AMP settings.
Now select any design from the given four designs. I prefer the SWIFT mode, which offers a beautiful look to the website.
Following the design setting finally, you will see the welcome message and your website is now AMP enabled. However, you have a couple of more things to look inside the advance settings panel.
Advanced Settings for AMP Plugin
To find the advanced settings go to the WordPress dashboard and click on AMP, from there, click on settings.
1. General Settings
The first tab is general settings where you can resize your logo and enable and disable AMP support in some aspects of your website, such as page, post, categories. This is the option for you where you can enable or disable AMP support on tags and categories that I have mentioned earlier.
2. Ads Configuration
If you use AdSense or MGID ads on your website, you can set them globally, and those ads will appear in specific positions in all the posts. To place ads, select any position where you would like to display them and then fill the Data AD Client and Data AD Slots. If you check the responsive ad unit, your ads will be responsive for different screen sizes.
3. Configure SEO Settings
You can configure SEO settings such as enabling meta description, open graph, integrating your SEO plugin in this tab. Moreover, enabling link inspection tool is also available here.
4. Enable a Page Builder
Enabling page builder is an option where you can integrate popular page builders like Elementor, Divi, WPbakery. By default, the AMP builder is enabled, but if you want to use any these, you can simply enable it here for building custom pages.
5. Performance Enhancements
In this tab, you need to enable both the option for minifying and leverage browser caching.
6. Analytics Configuration
If you use other analytics tools like Tag manager, Facebook pixel, or Statcounter, you can enable those service inside the analytics settings.
All you have to enable them and assign their tracking code in it.
7. Structured Data Settings
Structured data settings are available to set up the schema types for your articles, regular posts, and pages. Generally, in your SEO tools, these configurations are available, but in AMP, it’s recommended to re-configure because it uses a different version of your website.
By default, the AMP plugin has some schemas, but you can install the free plugin to improve schema and add new types of it.
8. Notice Bar & GDPR Settings
Notice bar settings are used to display cookie notification. You can show a simple cookie notification to the visitors for the first time. Or you can use a GDPR compliancy design. With a message to the visitors where they can either accept your policy or ignore it according to their choice.
Remember, only one types of notification can be applied at a time.
9. Push Notification Settings
Push notification is a great way to notify your subscribers about a new post. It’s more useful to bring back your readers again and again without email campaigns.
In case you want to integrate push notification with your AMP website, you can easily do it from the settings. Create an account on One Signal and paste the ID in AMP settings. Once you have done that your site will be ready to receive subscribers and send post notifications to them.
10. Contact Form Settings
By default, the contact forms are not supported by AMP plugin. To enable contact form support check the specific form from the list. Available forms are Contact Form 7, Gravity Form, Ninja Form.
11. Custom Comment Settings
Comments are essential parts of a website. To enable comments for AMP version of your site you can check or uncheck the settings inside the comment configuration.
The number of displayable comments also can be set. Moreover, a different commenting platform such as discus and Facebook, can be enabled from here.
12. Advanced Conditions For AMP
This is the last and very important part of the configuration. Some of the settings in this tab can control the conditions of whether a mobile device can detect the amp or not. What types of link style you will use. Your internal links behaviors in terms of AMP, tablet redirections, etc.
Make sure before enabling any settings know about it correctly from the info icon on the right-hand side.
13. Fix Plugin Conflicts
When you are done with the plugin configuration. Download and install the AMP plugin manager plugin. Which will help you avoid some of the plugins like caching plugins, sharing plugins if they create any problem in your AMP pages? Only you have to check those plugins which you want to avoid.
Track AMP Status With Search Console
Since you have configured the plugin successfully and your AMP page is now live, search console will start detecting AMP links automatically. But you should have submitted your website to search console earlier. If you have not submitted yet follow this guide.
As soon as the search console discovers AMP links a new tab will appear under enhancement. Here you can check the status of all the AMP links along with their indexing status.
You can find the AMP errors, warnings, and valid AMP pages. Tracking AMP links is very important. Discovering any fault, errors, and then fixing AMP links is never going to be more comfortable.
Your search console AMP dashboard will appear like this:
In case you have some errors or warnings fix them by following the guidelines provided by search console and then validate them to display them as valid pages.
Final Words
Whether you are implementing AMP or the normal responsive mobile site optimizing the page and its performance is essential. Before publishing your AMP pages, make sure you have configured everything correctly and test the AMP site a few times.
All the required actions to fix the issues should be taken immediately, and tracking your AMP page status on search console is essential. Since you are converting your website to a new mobile version, it’s a good practice to look after every component of it.
Since most of the settings are available in the AMP for WP plugin, I believe you can set up an excellent AMP page without problems and take your mobile site to a better level in terms of readability and performance.
Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission.