Are you planning to enable AMP pages for your blog and not sure what to do? Here is a guide which can help you setup AMP pages and serve them correctly to your readers.
Google has launched AMP (Accelerated Mobile Pages) as an alternative to serve readers on the low bandwidth devices. They wanted to handle search results on low bandwidth devices and improve the user experience.
The major problem is when people search for any information on low bandwidth devices, they have to wait long for getting the page load.
Most of the web pages on the internet load so much extra information which takes a lot of time low bandwidth devices. For example, any WordPress blog will show so many widgets in the sidebar/footer. They will not add any value to the user who is looking for specific information.
AMP is supposed to solve it by stripping all the extra things from a web page and display only the required information.
Table Of Contents
What is AMP
AMP is Google’s created open source projects which aim to improve the loading speed of a webpage on all distribution platforms. You can get more details on their official site.
Now, don’t get me wrong, AMP is not an incomplete or stripped version. It works on a principal of MVP (Minimal Viable Product).
MVP (Minimal Viable Product) – A product with a basic set of features but enough to provide information for your users.
They want to present the information in front of the user as fast as possible. It should not matter on which platform or which network they are on. So, they are looking for minimal information which is needed to fulfill user requirement.
I Don’t Have Anything To Remove
Many webmasters can complain that those sidebar/footers are not extra information. They do engage users with the blog as most of them will have a list of related articles, recent articles etc. So they do provide relevant information which user can explore.
Engagement is not a key metric with AMP. Google understand that engagement takes a hit when you strip many elements out of a webpage. With some development skills, you can increase the user engagement on your AMP pages.
Sidebar, Footers, Comments, and Popups are some of the ways webmaster try to engage with users. They help in reducing the bounce rate but here Google wants a fast loading page. It should improve user satisfaction with fast loading relevant information.
Now, the webmaster community is divided on the implementation of AMP for websites. Some say it’s good for Google but bad for webmasters as we lose on revenue while Google makes money on searches.
I am not going to argue either in favor or against AMP. I hope you have done your research and make up your mind to implement AMP.
In this post, we are going to check how to configure & enable AMP for a WordPress blog.
How To Enable AMP on WordPress
WordPress comes from Automattic, Inc. They also create some useful plugins which can extend the functionality of WordPress.
AMP for WordPress is a plugin created by them and other contributors including Google. It is available free on WordPress repository and can be installed from Dashboard.
There are some other plugins available which have paid versions to make it easier but I will be using AMP for WordPress in this post. It can be used for most of the AMP configuration and provide enough flexibility to render your pages correctly.
Just install the plugin and activate it to enable AMP webpage for your posts. If you want the AMP version for your pages also, you can enable it in the AMP -> General setting panel.
You can check the amp page for any blog post by adding /amp/ to blog post URL. For example, if your original URL is https://example.com/, your AMP URL will be – https://example.com/amp/.
When you check it the first time, you will notice that it is a very minimalistic page. There are no ads, no widgets, even your site logo is changed to the text version.
If you are using some scripts in between the content, those scripts will also be stripped. So you might be missing some components on your pages.
For example, I use Gist for displaying the code snippet on my blog. When I first enabled the AMP plugin, all of the Gist snippets were stripped out of my AMP pages. Which means people will see the incomplete article and might not appreciate it.
So, we need to do some work to make sure that AMP and non-AMP content is same.
Suggested Read: How To Use AWS Load Balancer to Scale Your WordPress Site
Enable Google Analytics On AMP Pages
After I enable the AMP version, I noticed that my JetPack and Google Analytics counts are not matching. JetPack counts were high and reporting activities on AMP pages where nothing is coming on Google Analytics.
So just because you have Google Analytics on your blog does not mean that it will be active on your AMP pages also. You have to enable it.
AMP for WordPress comes with inbuilt support for Google Analytics and you can enable it from the settings. Go to AMP -> Analytics page on your WordPress Dashboard.
Enter ‘googleanalytics’ in the type field and enter the below JSON to the value field. You need to replace the account with your Google Analytics property ID.
It will generate the ID automatically, save the value and you will have working analytics on your AMP pages.
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
This will allow you to track the AMP pageviews in your Google Analytics Account.
You can also track event or social actions with the help of this. You will need to expand the JSON to include those.
Check this guide to look at the detail explanation of JSON and how you can track multiple things.
You can skip the scripts section as AMP for WordPress will automatically load the scripts based on elements present on the page.
Enable SEO Options on AMP Pages
By default, your SEO settings on the regular site will not work on AMP pages. You need to make sure all your meta tags and other settings are carried over correctly.
Luckily, Yoast has made it easy to implement with the WordPress Plugin – Glue for Yoast SEO & AMP. It is also available free on the WordPress repository.
Once you download and install, you can enable the type of post where we should enable this Glue to connect the data.
You can also set some more basic design template in the plugin which includes color for your link, site favicon etc.
It can also take some additional CSS which you want to load on AMP Pages. Just make sure your overall CSS should not cross the 50kb limit set by AMP guidelines.
You should have Yoast for SEO plugin installed and activated to make this work.
It also allows adding the analytics details. Use this or the method above to activate Google Analytics, do not activate it in both the places.
Enable Site Logo On AMP Pages
This step is only needed if you are not happy with the text version of your blog name. You can display your site logo rather than just the simple text on your AMP pages.
By default, the plugin will show the name of your blog on the left and your favicon on the right side. If you do not want that and would prefer to show your logo, you can use the below code.
This will show your logo centered on the header bar. You can also change the color of the header bar from the background CSS tag.
Just change the URL to point to your logo and it should start displaying your logo on AMP Pages.
Suggested Read: How To Block Brute Force Attack on WordPress Blog
Make Shortcodes AMP Compatible
AMP for WordPress takes the final rendered page and convert into an AMP page. So if you are using any shortcode which is generating <script> HTML tag, it will be stripped out of the AMP version.
Those might be important elements which you may want to display on the page. So you need to make sure they are rendered correctly on your AMP page with the help of some code.
You can load anything in the AMP components. Check their official reference docs to see all the supported components.
For example, I have talked about using the Gist on my blog posts which were not displaying on AMP pages. AMP has a dynamic content amp-gist which can be used to display those. I want to use the existing JetPack shortcode on the normal page and use amp-gist component on the AMP Page.
I can do that with the help of below code. You have to check if its the AMP page, if yes, use amp-gist otherwise fall back on JetPack shortcode.
You may have to define AMP version for every shortcode you want to replace. Once done, your content will display correctly on the AMP and non-AMP version.
Include Google Ads on AMP Pages
One of the important revenue mechanism for webmasters is Ad networks. By default, AMP pages do not display any ads on your blog pages. So you need to some extra coding to include the Ads.
I am going to enable Adsense on the AMP Pages if you are using any other network you need to modify the code according to that network.
amp-ad is the component which you need to add to your page. Above code will add it on top and bottom of your post to display two ads.
If you want more ads, you can just create a similar function for other filters or action to display additional ads.
I would suggest using the responsive ad unit so that it can display correctly irrespective of the platform.
Suggested Read: Locked Out Of WordPress, Here Is How To Get Back In
Update Footer Text To Remove WordPress URL
By default, your AMP pages will have a footer which links to WordPress rather than your blog. So you would want to update that to reflect your blog design and links rather than WordPress.
You can create a folder named ‘amp’ on the active WordPress Theme folder and put the templates which you want to use for AMP pages.
To change the Footer, you need to create a new template footer.php and place it in the amp folder.
Here is a sample footer.php file which adds a link to your non-AMP blog and copyright notice rather than default back to WordPress link.
You can take the file and change domain name from example to your domain name. Once you edit and upload the file to your amp folder.
Here is how your footer will look on AMP pages after the update.
You can edit the code to add more customization to your AMP Page footer.
How To Test Your AMP Pages
It becomes very important to be able to test your AMP pages while making any changes or adding any new plugin to your WordPress installation.
Check Preview of New Blog Posts
While you are writing any new blog posts, you should check the previews of the AMP page also. You can check it by clicking on the AMP icon located on the right of the preview button.
Make sure that AMP page has all the important elements and content which your readers might look for.
AMP Validator
One way to test AMP pages is to look from the naked eye and find errors. Another is to use tools and let the tool decide on the issues on your AMP pages.
AMP project has created a good online AMP Validator which can test any AMP pages and let you know if there are any syntax errors on your page.
Note that it will not report any errors about the missing content or incomplete post. You still have to compare the content on AMP and non-AMP pages and find errors.
Hopefully, the above post will get you started on your AMP implementation for your blog. There are many other things which can be done with AMP like adding menu, ads within content, enabling search option etc.
I will be talking about those things in future posts. If you would like that information, go ahead and subscribe to our RSS feed or connect with us on social media to get the updates.
