If you have a website or WordPress blog and check the "Mobile Audience" in Google Analytics, you would definitely find more than half of your website visitors are now coming from mobile devices. The worst part, if your website takes longer than three seconds (3s) to load on a mobile device, then around 53 per cent of these visitors will abandon your website. That's a big chunk of visitors leaving your website even before it's getting loaded. Thus, losing out a potential customer or a valid sale or a regular reader of your website.
With more Google searches happening right from a mobile device, it's very important to improve and optimize your website or WordPress site's mobile page speed. Thanks to Google, we have a perfect new technology which can boost your websites mobile page speed, Google Accelerated Mobile Pages or simply the AMP.
The AMP framework has three parts, the AMP HTML with web components, AMP JavaScript that manages resource loading and AMP Caches that validates and caches AMP documents published to the web. Taking away the tech jargons, Google AMP helps you to build a lightweight and highly optimized mobile version of your website which is then cached on Google's servers for faster loading. For your visitors, the mobile version of your website loads incredibly fast without any delay. This helps you to retain your visitor on your website and they are less likely to abandon your site due to slow loading.
What's AMP and how it benefits your Website
- Accelerated Mobile Pages Project (AMP) is an open-source initiative led by Google to improve the performance of web contents and ads through a publishing technology known as AMP.
- Instead of loading your responsive mobile website, you can build AMP pages for your website. A barebone/ stripped down version of your website with essential contents only.
- AMP version of your website will load faster on mobile devices even with a slow internet connection.
- Google highlights AMP websites on its mobile search result with a thunder icon (). Also, AMP websites are shown higher in Google mobile search results.
- AMP version of your website help to retain your mobile visitors with faster website loading.
So, now you have an idea of Google's AMP technology and its benefits. Now you probably want to implement AMP for your website or WordPress site. Through this guide, I'll show you how easy to setup Google AMP on your WordPress site using free plugins. Also, a way to further boost the WordPress AMP pages with more features using AMP for WP WordPress plugin.
How to set up AMP on WordPress website
You have a WordPress website and want to take advantage of Google AMP? Well, it's way easy to make your WordPress website AMP compatible or build an AMP version of your WordPress website. Thanks to the official WordPress AMP plugin build by Automattic, the company behind WordPress.
By simply, installing and activating the AMP plugin on your WordPress will make an AMP version of your website. Once activated, all posts on your WordPress site will have dynamically generated AMP-compatible version. You can access AMP pages by adding /amp/ to the end your post URLs.
Make sure, you have pretty permalinks ("Permalinks" under "Settings" in WordPress dashboard) enabled and saved again for the changes to take effect. If not, then you can access the AMP version of your post by adding ?amp=1 to the URL. One important thing to note that the official AMP plugin currently does not add AMP versions of your Pages and archives. To add AMP version of Page, Category, Tags and other pages you may need to install another plugin called AMP for WP. We will go into detail about this plugin further in the article.
SEO for WordPress AMP
Guess what, we also have to take care of the search engine optimization part of our AMP versioned WordPress website. Luckily, there won't be any duplicate content issues (as AMP is a separate version of your original post) as the official AMP plugin for WordPress adds rel="canonical" tag to the AMP version of the pages. This helps Google to understand that the AMP content isn't duplicate of your original content.
If you are using Yoast SEO, one of the top WordPress SEO plugin, then the plugin developers have released an extension for AMP. The Glue for Yoast SEO & AMP WordPress plugin essentially integrates Yoast SEO into AMP version of your WordPress post or pages. It adds your SEO meta-data (like SEO title, SEO description and other meta tags) to the AMP pages. Once installed and activated, a new "AMP" menu will appear inside the Yoast SEO section in your WordPress dashboard. From there you can easily integrate the SEO meta-data to different post types and AMP pages.
In addition to the AMP SEO meta-data, the Glue for Yoast SEO & AMP plugin comes with certain customization options for your AMP pages. This includes an option to add a website logo for AMP version of your website and a default featured image to post that doesn't have an image associated with it.
You also get to change the aesthetics of AMP pages by changing the colours and link styles. If you are looking to be creative and need to add some custom styling or modification to the AMP pages, then there is an option to add "Extra CSS" and "Extra meta and link" tags. More importantly, the plugin has an option to add a Google Analytics tag to your WordPress AMP pages.
Extensions for WordPress AMP
Sadly, the official WordPress AMP plugin doesn't come with lots of bells and whistles (it's still in development). If you want AMP support for WordPress pages, Archives, Search result pages, Custom Post Types along with other cool features, then you need to install the AMP for WP plugin.
AMP for WP plugin works in conjunction with the official WordPress AMP plugin. So, you need to install the official WordPress AMP plugin to able to work with the AMP for WP plugin. Once installed, the plugin will add a configuration option for AMP in your WordPress dashboard ("AMP").
- Get started with AMP for WP configuration by clicking on the "General" tab. There you will be able to upload your website logo and define custom logo size. You will also able to enable/disable AMP on all Pages/Posts.
- The "Design" tab offers a drag-and-drop post-builder for AMP posts along with custom style option for AMP pages.
- The "Advertisement" tab offers a way to add Google Adsense to your WordPress AMP pages. There are multiple locations where you can add your Adsense code. For adding other Ads to WordPress AMP you may need to purchase the "Advanced AMP ADS" extension.
- AMP for WP plugin also comes with its own AMP SEO customization option. However, you can also easily configure the AMP pages to work with Yoast SEO.
- Another useful feature is the "Menu" option. Here, you can define a custom navigation menu to show up on AMP pages.
- Analytics tab allows you to add Google Analytics tracking code or Google Tag manager code to WordPress AMP pages.
- You can individually customize the AMP single posts to add AMP social media sharing option, pagination, author bio and related post option on WordPress AMP pages.
- You can show custom notifications on all of your WordPress AMP pages for cookie purposes, or anything else.
- There is a "contact form" tab, where you can enable Contact Form 7 support on WordPress AMP pages. You can also enable support for Gravity forms on WordPress AMP pages (paid AMP extension).
- The "Comment" section allows you to display your post comments on the AMP pages. It also supports Disqus comments and Facebook comments. If you are looking to include full WordPress comment form on AMP pages then you may need to get the "Comments Form" paid extension.
- There is also an advanced option to solve any AMP validation error on your WordPress AMP pages.
Essentially, AMP for WP plugin adds an extensive option to the default/official WordPress AMP plugin. I would say it's a must-have a plugin to your WordPress site, to take full advantage of Google AMP features.
To further add features to your WordPress AMP pages, you will need to purchase extensions of AMP for WP plugin. It adds support for different Ads providers, Advanced Custom Field (ACF) support for AMP, Custom Post Type support for AMP, WoCommerce support for AMP, Email subscription option in AMP pages, Comment Form for AMP and more. We will get into the details about the paid extension of AMP for WP plugin in a future article.
That's it, you probably have enabled AMP on your WordPress site and customized it to your website needs. If you have any doubts in implementing AMP on your WordPress site, let me know in the comment section below.