How to use Accelerated Mobile Pages in WordPress

Google’s Accelerate Mobile Pages have recently launched, improving user experience for all kinds of mobile pages across the web. But how can you utilize this new technology for your own website? We’ve put together a few tips that tell you what AMP is, how it benefits you, and how you can incorporate it into your own WordPress website.

What are Accelerated Mobile Pages (AMP)?

Google’s new Accelerated Mobile Pages (AMP) is an open-source initiative that allows publishers to create mobile pages that load faster, and provide a better user experience. The idea is that with faster mobile load times, your readers will be able to consume more content, more regularly than they would have before the content was AMPed.

Here is an example of a traditional responsive WordPress blog (on the left) and one optimized with Google AMP (on the right). As you can see, while the responsive version looks great and works well on a phone, the AMP version allows the user to get to the article much quicker.


HADM-Responsive-exampleHADM AMP site on cell phone

So now that we’ve got a little bit of information on AMP, how can you make it work for your WordPress website? Luckily, a plugin is being developed for precisely this function.

How to Implement AMP into your WordPress site

The first thing you have to do is install the official AMP plugin. This part is simple, so long as you know how to install a WordPress plugin. If not, check out the link for an easy how-to.

The WordPress team is working on an official plugin that makes AMP implementation as easy as possible. For now you can go to the GitHub page and click the ‘download ZIP’ button and install it on your site. It’s that easy.

UPDATE: You can now download the official AMP plugin from WordPress.org. 

What happens after installing the plugin?

Once you get the plugin installed, you will automatically have an AMP version of each of your blog posts, that will look something like this: http://hadigitalmarketing.com/how-to-install-wordpress-plugins/amp/. The plugin will ensure that the proper rel tags are in place, most specifically rel=”amphtml”. This will tell google where the AMP page is located so it can be indexed in mobile search results.

Once you’ve got the plugin installed, thanks to Search Engine Land, there are a few tweaks you might consider making, to further optimize your pages.

Have Valid Structured Data on all AMP Pages

It’s important that your structured data is valid on AMP pages, and the best way to check this is with Google’s Structured Data Testing Tool.

According to Search Engine Land, some people were having issues with the publisher logo for the article snippet and need to make a modification to the plugin. Follow the steps below to make this change.

Edit the class-amp-post-template.php file, either via FTP or within your WordPress Dashboard (go to Plugins > Editor and then select “AMP”) and change:

if ( $site_icon_url ) {
$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => $site_icon_url,
'height' => self::SITE_ICON_SIZE,
'width' => self::SITE_ICON_SIZE,
);
}

to:

$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => 'http://domain.com/wp-content/uploads/logo-60.png',
'height' => 60,
'width' => 170,
);

Make sure to replace the URL for the publisher logo to the path where your logo is located and be sure to specify height and width in pixels. According to structured data guidelines, logos should be exactly 60px tall with a width ≤ 600px.

How to add Google Analytics Tracking to AMP Pages

Now that you’ve done all this work optimizing your mobile pages, you’ll want to be able to track your progress and see how the AMP plugin worked for you. Unfortunately, the plugin doesn’t automatically hook up to Google Analytics, but you can enable it yourself fairly easily.

To do this, you’ll have to edit your amp-post-template-actions.php file either through your WordPress plugin editor or via FTP, and add the following to the end of that file. (Click the image to view a copy & paste version of the code of find it here)

Google AMP analytics modification

Then, make sure that you change the UA-XXXXX-Y to match you Google Analytic’s website ID, and you can re-validate your AMP pages.

At this point, you should have tracking enabled for your basic AMP setup on your WordPress website.

How to check to see if Google is recognizing AMP pages

Search Console has an Accelerated Mobile Pages section under ‘Search Appearance’ that will tell you how many of your AMP pages are being recognized by Google and if any of those pages have errors you should address. One complaint most people have is that it’s currently taking Google a couple days to recognize any changes related to AMP pages.

HADM search console snapshot

Are you also using the Yoast SEO plugin for WordPress?

If you are, you’ll probably want to install this handy plugin that makes Yoast more compatible with AMP, optimizing your site even further and making less work for you. Sometimes, when you install the AMP plugin, your metadata won’t transfer correctly to the AMP pages. This plugin fixes that issue, ensuring that your titles and metadata remain optimized for search engines.



Lead Generation Tips, Tricks & Tools: DOWNLOAD FREE EBOOK

About
Showing 3 comments

Leave a Comment

Start typing and press Enter to search