Setting up AMP for WordPress: Accelerated Mobile Pages

Google introduced its Accelerated Mobile Pages (AMP) technology back in 2016, and its goal is to reduce web page loading time on mobile devi...

Google introduced its Accelerated Mobile Pages (AMP) technology back in 2016, and its goal is to reduce web page loading time on mobile devices. Regarding the Google SEO positioning, the current trend is that Google is starting to position in the first results of organic searches from mobile devices contained implemented under the AMP technology. Would you consider implement AMP to your website?

Setting up AMP for WordPress: Accelerated Mobile Pages
Google AMP is a platform aimed at enabling the media to improve performance on their mobile web pages. This is a new opportunity for the media as an alternative to native content and what other platforms like Facebook Instant Articles or LinkedIn Pulse offer.

What is Google AMP?

Accelerated Mobile Pages is an open source initiative that aims to make websites that have a large amount of content, such as videos, images, animations, graphics, advertisements, etc., loaded instantly on the mobile. Also, the same code is also intended to work the same way on any device. This Google project is based on AMP HTML, which would be a new open format, which is born of existing web technology and allows web pages to create light versions of a standard web.

It should be noted that this Google project comes after the company contacted media, publishers and technology companies around the world to learn about the problems they face when accessing a website in the Mobile.
Also read: How to increase WordpPess site speed

How to implement AMP in WordPress?

The simplest way is through the official AMP plugin, developed by Automattic, and free download.

Once the plugin is active, all the entries in your site will dynamically generate AMP compatible versions. Can you check it from your desktop web browser by adding  / amp /  or /? Amp = 1 to the end of the URLs of your posts.

When implementing an AMP version of your content, you must keep in mind that it is still a copy of the pages you already have. Thinking about the SEO of your website, is it considered duplicate content? No, since the plugin establishes default relationship tags between the original versions and the accelerated mobile pages, or in other words, it indicates with the canonical tag in the AMP version, in which URL is the similar content of the desktop version.

If you have doubts about the indexing and correct use of the AMP version, in Google Webmaster Tools  (Search Console) you will be able to corroborate its operation, as well as the possible errors that may present.
Also read: How to Make an Impressive Landing Page

How to customize MPAs

The plugin, by default, leaves room for some customization of MPAs. In the WordPress admin panel of your website, in Appearance> AMP, you can change the header and text color, as well as the color of the links.

Before this little margin of change, have been developing complementary plugins to accelerated mobile pages that allow extending the customization of the design. Below is the option you can use to make accelerated mobile pages.

Amp WordPress plugin- Pagefrog:

From the WordPress admin panel, in AMP> Mobile Formats> Styling, you will find a section where you can configure basic elements such as header and footer colors and fonts. It also allows you to customize Facebook Instant Articles and Apple News Format.

Among its high points, it can connect the Analytics code to filter the visits generated through AMP, as well as include ads with Adsense.

AMP Toolbox

It allows modifying the CSS, the header image and the colors of the pages. Also, it makes it possible to add a link to the articles, in its AMP version, that takes to the original version in the web of desktop, or responsive (if it had it).

Custom AMP

This plugin is the AMP patch that allows more parameters to be modified. In addition to configuring the icon and logo, it allows changing the width of the content in AMP, inserting a comment counter in the accelerated mobile pages for each article, and adding content in the header and footer of the AMP version (such as related post, author, and tags ).

Also, let's configure the Google Analytics tracking code, and include the menu of your website in drop-down mode.
Also read: Importance of Building a Mobile-Friendly Website

The only drawback is that it does not contain Adsense, but for that, it brings you a bonus track that will make it easier to add it through the FTP of your website, just follow the following steps:

Create an adaptable ad unit in your Adsense account with 300 × 200 measurements.
Copy the publisher ID (data-ad-client); For example, ca-pub-9876543211234567, and the ad unit ID (data-ad-slot): for example, 012345689
Replace these values in the following code:<amp-ad width = 300 height = 200 type = "adsense" data-ad-client = "ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot = "xxxxxxxxxx"> </ amp-ad>
Locate and edit the single.php file that you will find inside the AMP plugin, in the Templates folder, and select your location as you wish. Example: if you want it underneath the text, you must place it next to <div class = "amp-wp-article-content">
( Important: To include Adsense, you must have the WordPress version updated to 4.7.0, or higher)

You Might Also Like

0 comments