AMP PLUGIN FOR WORDPRESS: OFFER QUICK PAGES ON MOBILE

In 2018, Google began to communicate around a new format designed specifically for mobile visitors: the Accelerated Mobile Pages ( AMP) format .

Its objective is simple: to offer Internet users who consult your site from a smartphone a real comfort of navigation, with a very fast loading time.

 

In this article, I will explain how to use AMP on WordPress using the AMP plugin for WordPress (AMP for WP)!

Why adopt AMP on WordPress?

The AMP format first offers increased browsing comfort for the visitor who comes to your blog from a mobile. We know that mobile connections are sometimes slow. AMP is one of the methods that can increase the loading speed considerably.

The faster the page loads, the more likely the visitor will continue browsing the site instead of giving up. By offering AMP pages on your blog, you can reduce the bounce rate and increase the average page time .

Then, even if AMP is not, in itself, a referencing criterion , the AMP pages are powerful ... and on the mobile index of Google, it can make the difference: you make sure not to be part of the sites the slower your theme and therefore not to have "malus" in terms of SEO .

In addition, Google gives more and more room to AMP :

• AMP pages are reported in the search results;
• They have a dedicated section in Google Search Console;
• Google quickly made sure that its AdSense advertising network is compatible with AMP in order to offer ads on these pages ...

All these signals indicate that AMP is an important project for Google. All the more reason to get on the train!

Finally, Google can highlight some AMP pages in the form of a carousel in the search results, a guarantee of visibility not insignificant.

AMP is also developing innovative formats such as AMP stories , a more immersive format ..

What does an AMP page look like?

The AMP format advocates a return to simplicity . It puts forward the content and limits all the artifices that can be around. An AMP page is text, images, basic links. It's sometimes a little advertising, the possibility to follow his statistics ... But design side, we play on sobriety!

The page is limited to what is strictly necessary in order to keep the loading time reduced to a minimum. To date, the AMP format therefore primarily concerns sites that focus on content. As a blogger, you are well placed to use it! Here is for example one of my articles on AMP:

THE AMP FOR WP PLUGIN TO USE AMP ON WORDPRESS

When I set up AMP on my blogs, I used the "official" AMP plugin supported by the WordPress team ... and encountered many bugs. So I opted for AMP for WP , a plugin not only very complete but also constantly evolving because its creator is very involved in it, to develop the features and overall quality of the extension.

Therefore, it is quite possible that new topics appear only a few hours after the writing of this tutorial :) I hope that the article will help you activate and set up AMP on your WordPress blog !

AMP plugin settings for WordPress

I will now guide you through the main setting options of the AMP for WP plugin.

General Settings (Global)

The global settings of AMP for WP plugin allow you to upload a logo for your site in AMP format but also to choose on what type of content this format will be used. Indeed, you can selectively enable AMP on articles, pages, homepage, custom home page, archive pages (ie category and WordPress label pages). ).

I advise you to test the rendering of these pages in AMP to see if it suits you, before making a decision.

Finally, the global settings offer you two options to make AMP the "default" rendering of your blog on mobile:

• Convert AMP to WP theme - The plugin will try to adapt your classic mobile site so that it has the same rendering as AMP pages.
• AMP Takeover - Users will always be redirected to the AMP version rather than the classic mobile version of your site and the AMP theme will take over the theme of your blog.

Here, the choice often depends on the features you offer on your site. Some do not adapt well to the AMP format, the monetization possibilities are often more limited also on AMP because few advertising agencies still offer AMP compatible tags ... and it can be a decision criterion.

On my travel blog for example, I automatically push the AMP format "default" to mobile visitors ... but it clearly deprives me of a lot of revenue.

Advertising (Advertisement)

The AMP plugin for WordPress makes it easy to integrate Google AdSense ads into your AMP pages with predefined placement and setting options.

For example…

• Under the header.
• Under the footer.
• Above the content of a post.
• Under the content of a post.
• Under the title of a post.
• Above similar items.

Just choose the size of the ad slot and enter the AdSense client ID (Data AD Client) and the ID of the ad itself (Data AD Slot).

If you're not sure how to get this information, go to your Google AdSense account in My ads> AdSense for content pages> Ad units and click on "Get code" in the ad unit you want to embed to your AMP pages (it must have been created beforehand). You will see both information (data-ad-client and data-ad-slot) in the code.

The AMP for WP plugin also gives you an option to indicate if the ad unit is responsive . You can also check the option "Optimize For Viewability" for the plugin to try to further optimize the loading time of the advertisement.

SEO Options

The AMP plugin for WPPropose some SEO options , including the ability to integrate the meta tags (title and meta descriptions) from Yoast SEO or All-In-One SEO, the main SEO plugins market.

In this section, you also have the possibility to add code in the <head>site if you wish: attention however, it must be written according to AMP standards, otherwise your site will return errors.

Progressive Web App (PWA)

Beyond the AMP format, there is another format thought for mobile: the Progressive Web App, or PWA. It is a concept halfway between the application and the website : the idea is to make part of your site available offline, in an environment similar to that of a mobile application ... but without it you need to install a mobile app.

The PWA format is in full development, so it's a feature that actually is not directly related to AMP and that installs on your blog another plugin, PWA for WP .

If you activate it via the plugin AMP for WP, you will have access to some basic settings but at the time of writing this article, the functionality is still embryonic and in beta test , which means that it is not not necessarily advised to use it on a site in production.

Performance

Only one option to activate in this section: "Minify", to reduce the size of the code of your AMP pages and thus optimize the loading time .

Statistics and audience measurement

The AMP for WP plugin makes it easy to integrate a host of statistical tools . Google Analytics, Google Tag Manager but also many tracking and analytics tools (Facebook Pixel, Quantcast, comScore, Adobe Analytics, StatCounter ...).

In general, the setting is very simple because you just have to activate the tool that interests you and enter your username.

Structured Data

This AMP plugin for WordPress supports different types of structured data : these are code elements that allow search engines to indicate that you are publishing a certain type of content, for example a blog post, a recipe, information about a product ...

By default, articles and pages integrate the structured data of type "BlogPosting" which is appropriate for most blogs but you can modify this parameter if you wish, by defining if necessary a default image to integrate with the structured data. .

You can also install an add-on plugin for further management of these structured data .

Cookies and RGPD (Notice Bar & GDPR)

This AMP plug-in for WordPress also integrates two options to take into account European legislation:

• The Notice Bar option displays a banner that informs your visitors about the use of cookies on your blog. You can choose the sentence that appears (Notice Content) and the text of the button that accepts the notification. Note that such an information banner is not sufficient in France under the current law.
• The GDPR option allows you to post a more complete message, to include a link to the site's privacy policy by offering users to accept or reject it.

Push Notification

This feature is very interesting if you want to inform users of an update of your site directly in their browser or on their desktop: the AMP for WP plug-in integrates with the OneSignal service, which will display notifications push in the browser of those who will have chosen to subscribe.

To use the system, your site must be in https and you must first have created a OneSignal account . Then just enter the OneSignal ID in the WordPress AMP plugin settings.

Contact Form (Contact Form)

The plugin offers integrations with some form plugins for WordPress (Gravity Forms, Contact Form 7, Ninja Forms). They sometimes require installing an add-on.

Comment Management (Comments)

At first, when we activated the AMP format on WordPress, it was impossible for visitors to post comments ... which is still a bit of a shame when it comes to a blog!

Things have happily evolved and today, we can activate the display of comments with a single click on articles and pages.

You can then choose the commenting system you prefer: either the default WordPress comments, indicating how much you want to display and if you want the user's profile picture to appear; a third-party commenting service, for example, Disqus, Facebook comments, or others.

Facebook Instant Articles

The plugin offers to activate in one click the support of Facebook Instant Articles . The principle is very similar to AMP: it is to offer articles in a light version easy to consult on mobiles. The articles are loaded directly into the mobile application Facebook.

To enable support for Facebook Instant Articles, simply enable the option in the AMP for WP plugin. You must then reset the permalink settings by going to the Settings> Permalinks menu and clicking "Save Changes" without touching the other settings.

If you then return to the "Facebook Instant Articles" part of the AMP for WP plugin, you will see the link of a feed ("Feed URL"). This is the link you will need to submit when registering for Facebook Instant Articles .

Disable AMP (Hide AMP Bulk Tools)

You can choose to disable AMP in one click for certain categories or labels of your WordPress blog. Just check the pages or sections concerned.

Advanced Options

This is undoubtedly one of the richest options for the AMP for WP plugin. It allows slightly more advanced users to add additional parameters.

Among the most interesting options ...

• Mobile Redirection - Default by default all mobile visitors on the AMP version.
• Change Internal Links to AMP - Automatically change the internal links of your articles to point to the AMP version.
• Enter HTML in Head / Body / Footer - These options allow you to add custom HTML code in the header, body or footer of the site.
• Auto Add AMP in URL Menu - This allows you to automatically edit the AMP menu URLs to include "/ amp /", so that mobile visitors do not switch to the responsive version of the site by clicking the menu but they remain on the contrary in the AMP environment.
• Category / tag base remove in AMP - This is to remove the word "category" or "tag" from the AMP URL, as it can do for "classic" WordPress URLs.
• Featured Image from Custom Fields - This allows you to choose the image highlighted from a custom field, in case you have created a custom field for that :)
• Featured Image from The Content - The highlighted image is the first image found in the content.
• Duplicate Featured Image - To highlight an image even if it is also present in the content.
• Retina Images - An option to activate if your images look blurry on Apple devices.

You finally have options for developers (development mode) and you can decide if all the plugin data is deleted during the uninstallation of this one.

Ecommerce

If your blog is associated with an e-commerce site under WordPress, you can activate here the AMP support for WooCommerce (with the installation of an additional extension) as well as that of the Easy Digital Downloads plugin , which allows sell "virtual" goods (software, ebooks, photos, graphics, etc.).

Translate the plugin: Translation Panel

The Translation Panel section allows you to customize the translations of the different important elements of the plugin. Indispensable so that your visitors do not have the impression to be hurt, linguistically speaking, compared to the users of the site responsive!

Create an AMP menu for WordPress

Once you have set the plugin to your liking, do not forget to create a dedicated AMP menu . Indeed, the plugin has a special menu location.

Just go to the Appearance> WordPress Menus section and create a new menu by assigning it the "AMP Menu" location.

Note that you can also create a special footer menu for your AMP pages on WordPress, thanks to the "AMP Footer Menu" location.

AMP page design on WordPress

The "Design" section of the plugin first allows you, in free version, to choose between 4 different themes 

You then have several sub-sections to customize the design of the AMP pages.

In the "Global" section, you can define a color universe and add custom CSS code if you wish.

The heading "Header" allows you to add a navigation menu at the top of the page or to include a search engine ("Search") and customize the colors of the header of your AMP pages.

The "Home Page" section allows you to customize the home page : with a slider, by displaying extracts of recent articles ("Excerpt") whose maximum length can be defined, by displaying the date of publication of articles or not (Published Time). You can also include a "Read more" link if you wish ("Read More Link") and exclude certain categories from the latest articles that appear.

The "Single" section allows you to customize the articles . For example, you can add a lightbox effect on images ("Lightbox for Images"), display a breadcrumb trail , show categories and labels and make them clickable or not, display share buttons on social networks (" Sticky Social Icons "), links to easily move to the previous or next article (" Next-Previous Links ").

You can also manage the pagination, view the biography of the author of each article and similar articles("Related Posts"). Moreover, these have their own dedicated options. You can decide on which basis to choose them (articles related to the same category, the same label), how to classify them, how to display them ...

The "Footer" section is quite small but has some interesting options: you can for example display a link that links to the "classic" mobile version of the site, for users who do not wish to stay on the AMP format, or propose a button "Back to top", handy if your content is long enough.

On the pages side, customization options are more basic than articles: you can activate social networking icons.

The "Social" part is more interesting because it allows to define on which social networks the users will be able to share your contents (it is enough to check those which interest you) and, below, to indicate your profiles of social networks (Social Media profiles). On some designs, it displays links to your social networks.

The "Date" section allows you to choose whether you show the date on your posts ... and, if you do, which date to display: date of publication or last modification of the article, format of the date (the date " "Posted" X days / months / years ago ").

Finally, some additional options are available, especially for people who use alphabets written from right to left or who want to display subcategories on the page of a category.

AMP compatible extensions

The AMP for WP plugin offers about thirty integrations with well-known WordPress plugins : most are paid, at prices ranging from $ 19 to $ 89.

These include integrations with WPML and Polylang translation plugins, form plug-ins such as Contact Form 7, Ninja Forms, Gravity Forms, and support for custom post formats, AMP Stories or structured data.

AMP for WP: free version and paid version

The plugin also offers a paid version, which targets especially professionals (rates from $ 150 / year). Above all, it offers a more advanced approach to certain functionalities (advertising, forms, e-commerce, call-to-action , cache, etc.) as well as a more complete selection of designs for AMP pages.

It also offers more responsive technical support , both during the installation of the extension and during its configuration.

How to check that your AMP pages are valid?

To verify that your AMP pages do not contain an error, it all depends on whether you want to validate a particular page or validate all the AMP pages of your site at once.

Validate all pages

I advise you to use Google Search Console (you must have validated your site in advance on this free tool proposed by Google ). In the menu on the left, go to the "AMP" section.

You will be able to follow the indexing of your AMP pages in order to verify that they are well taken into account by Google but also to identify any errors that your pages contain.

If an error is found, simply click on the page in question for Google to provide you with additional information on the origin of the error in question.

Validate a single page

If you want to check the validity of a single page, you can use an AMP validator.

• The online AMP validator : it is available on the AMP project site itself. Just copy and paste the code of your web page or its URL. The validator will tell you if it complies with AMP standards.
• The AMP Validator browser extension : This is an official extension proposed by the AMP project. She settles on Google Chrome. When you go to an AMP page, the icon for that extension is displayed in green if the page has no error; Conversely, if an AMP error is detected, the icon is displayed in red and you can click it to get more information about the error.

The AMP format on WordPress, a meteoric growth

I set up AMP on my blogs in early summer 2016. In September 2016, it represented less than 1% of my monthly page views ... Today, 58% of page views are via the format AMP . This is not a negligible trend, especially if your visitors are very mobile!