In this post, we will be reviewing the top 3 Google AMP plugins for your WordPress site in 2017. AMP stands for Accelerated Mobile Pages. It is a new open-source community driven initiative led by Google. It rivals Facebook’s Instant article.
Google first announced AMP in October of 2015, Starting on February 24th, Google started to deploy AMP-compatible pages within their mobile search result page. Articles from publishers with AMP HTML markup on their pages are displayed as a carousel in the SERP, letting the user swipe through the elements and tap directly into a page. Google later expanded this to all thier search results on mobile.
According to the documentation, Google AMP consists of three main elements, specifically:
- AMP HTML: a subset of HTML, with custom tags and properties such as amp-ad, amp-img, and amp-video
- AMP JS: a JavaScript framework for mobile pages that manages resource handling and results in loading asynchronously all external resources
- Google AMP Cache: a proxy-based CDN for delivering all valid AMP pages
Setting up AMP on WordPress
The first step is to install and activate the AMP plugin created by Automattic. Just like the installation of any other plugin. You first download it, and unzip it into your plugins directory, visit the plugins dashboard and enable it. If you have FTP installation turned on, you can also install using the approach. Once you activate the plugin, it will automatically create the AMP versions for all your pages and add links to the original posts. The way AMP post are referenced from their original posts is by adding an amphtml url right after the canonical url.
1. Glue for Yoast SEO & AMP
Glue was developed by the Yoast team, the same team behind the popular WordPress SEO plugin called Yoast and as such this plugin integrates AMP with their Yoast SEO plugin. Once you install and activate the plugin on your website, you will find the plugin’s settings options at the SEO -> AMP page. The settings options have 3 main sections.
The “Post Types” section allows you to control which post types should have AMP support. While regular posts will be enabled by default, you can enable custom posts types too.
The “Design” section allows you to set a default featured image and the colors for various elements like the title, text, post meta info, link text, link hover, and blockquote colors. You will also find separate fields for providing custom CSS and adding custom code to the header.
The “Analytics” section includes a single field which allows you to add Google Analytics ID for the AMP pages.
2. Custom AMP Plugin
Custom AMP is a complementary plugin which offers additional features to the original AMP plugin. The plugin will create a new menu item titled “Custom AMP Panel“, where you will find the available options. There are separate fields to upload the AMP logo and the metadata logo for the mobile visitors.
You can perform other actions like adding featured images, displaying comments, showing related posts, adding right-to-left direction by using their respective checkboxes. Custom AMP also allows you to show a custom content width for your AMP pages. Thanks to the menu selection feature, you can choose which menu should be displayed on the AMP Pages. There is a dedicated field for providing the Google Analytics code. Last but not the least, the plugin also makes it very easy to apply custom CSS and add custom HTML code to the footer.
3. PageFrog plugin
The PageFrog plugin works independently of the AMP plugin. And as you can guess from the title, the plugin supports both Google AMP and Facebook Instant Articles formats.
To use the plugin, you have to enable the desired format(s) from the Mobile Formats -> Setup page. You will find the configuration options at the “Settings” page. You can choose to enable AMP for all the existing posts and the future posts. The plugin also allows you to show the featured image on the AMP pages.
The “Styling” page includes all the customization options. You can upload a custom logo, and select the fonts for title, article heading, body, quotes, and footer. It is also possible to choose the color for all of these fonts. After making all the changes, click the “Save Settings” button. The “Preview” section on the right will show a live preview of the changes.
The plugin comes with a handy preview feature. You can use this feature to check out how your posts will look as AMP and Instant Articles. The preview pane will be available on the right sidebar of the post editor. The PageFrog plugin also allows you to show AdSense ads and enable Google Analytics, or other analytics on the AMP pages.
