How to Add Accelerated Mobile Pages to WordPress Site

Recently Google announced it will use AMP in its mobile search results. Specs are based on AMP project guidelines. For WordPress there is an official Automattic AMP Plugin which currently adds AMP versions to posts, as well as meta tags for Google to discover such pages.

I’ve added AMP versions to several WordPress sites to see how they work. There is a difference if you want to add such pages to a site with Yoast SEO installed or to a website without Yoast plugin. Here’s what I’ve found and how to add them to different WordPress installations.

First, install WordPress AMP Plugin. There is nothing to fine-tune. Your posts will get another version of your post accessible when you add /amp/ at the end of their URL. Now you could see what you get on AMP version of your post. Yes, it’s a very simple page, stripped of all fancy design tweaks. Only header with your site name and post content. No other design additions yet. If you didn’t added your logo via Appearance > Customize > Site identity > Site Icon you’ll not even have your logo in that header.

WordPress site with Yoast SEO Installed

AMP menu in Yoast SEOYoast recently released a plugin called Glue for Yoast SEO & AMP, which adds design modification capabilities to default Automattic AMP plugin. It will add some settings to setup inside Yoast SEO.

There are currently 3 tabs that you may set up.

AMP Yoast Tabs for Settings

Post types for now are just posts. You may try to enable your other post types, but looks like they don’t working yet. Tell me in comments if it works for you?

On Design tab you can set 2 important images. Your own “publisher logo” that should be up to 600px width and preferably 60px height, by AMP specifications. But I’ve used a larger rectangular image. And default image for posts, which will be a placeholder on posts that don’t have a featured image or any other image in their content. Post’s image is required on AMP pages by schema.org/Article type, so if you don’t provide a default placeholder, you’ll get errors in Google Search Console. By specs minimum 696px width for such images is required.

Now you may edit colors and add some custom CSS, if needed.

Third tab is for setting up Analytics code. If you use Yoast Google Analytics plugin, it’s enough.

WordPress site without Yoast SEO

But what happens if you don’t want to add Yoast SEO plugin to your site? There are several options. You may try Facebook Instant Articles & Google AMP Pages by PageFrog. It is also adding Facebook instant articles functionality, but first you must register on Facebook to have them. And looks like they are not available yet to common registrations. The plugin looks promising, but I didn’t liked how my pages looked after tweaking their AMP design options. Featured images were showing on top of the header at least in my template. So I’ve decided to use code snippets from AMP plugin GitHub page.

There are several things you should add. First is a logo. As I said before, you can add it from Customize > Site Identity. But if you want a special logo for such pages, use a code snippet. As usual this code should be added to your child-theme’s functions.php file.

/* page logo */
add_filter( 'amp_post_template_data', 'iggy_amp_set_site_icon_url' );

function iggy_amp_set_site_icon_url( $data ) {
$data[ 'site_icon_url' ] = get_stylesheet_directory_uri() . '/images/amp-site-icon.png';
return $data;
}

It will be displayed inside your header.

But after my pages were scanned by Google, I’ve got 2 errors, publisher logo was missing and as I said before, post image was missing too on some of my posts. To resolve this errors I’m adding  a default image for posts without any images and my publisher logo too. Publisher logo should be 60px height and up to 600px width preferably on a transparent background and with vertically centered image content up to 48px height. here’s how to add them.

/* publisher logo per scheme error */
/* default image for posts without images */
add_filter( 'amp_post_template_metadata', 'iggy_amp_modify_json_metadata', 10, 2 );

function iggy_amp_modify_json_metadata( $metadata, $post ) {
$metadata['@type'] = 'NewsArticle';

// publisher logo
$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => get_template_directory_uri() . '/images/fix-css-metadata-logo.png',
'height' => 60,
'width' => 600,
);

// default image
if (!array_key_exists('image', $metadata)) {
$metadata['image'] = array(
'@type' => 'ImageObject',
'url' => get_template_directory_uri() . '/images/default.png',
'height' => 800,
'width' => 1024,
);
}

return $metadata;
}

Now everything is set up, but we may need to add some custom CSS.

// custom css
add_action( 'amp_post_template_css', 'iggy_amp_additional_css_styles' );

function iggy_amp_additional_css_styles( $amp_template ) {
// only CSS here please...
?>
nav.amp-wp-title-bar {background: #3B1101;}
.site-info {text-align:center;font-size:0.8em; vertical-align:middle;}
<?php
}

And Google Analytics too

add_filter( 'amp_post_template_analytics', 'iggy_amp_add_custom_analytics' );
function iggy_amp_add_custom_analytics( $analytics ) {
if ( ! is_array( $analytics ) ) {
$analytics = array();
}

// https://developers.google.com/analytics/devguides/collection/amp-analytics/
$analytics['iggy-googleanalytics'] = array(
'type' => 'googleanalytics',
'attributes' => array(
// 'data-credentials' => 'include',
),
'config_data' => array(
'vars' => array(
'account' => "UA-1111111111-1" // change to your account
),
'triggers' => array(
'trackPageview' => array(
'on' => 'visible',
'request' => 'pageview',
),
),
),
);

return $analytics;
}

And finally I thought maybe my Accelerated pages need a footer. Still not sure, so please advise, if it shouldn’t be added. Something like that:

// add footer to amp
add_action( 'amp_post_template_footer', 'iggy_amp_add_footer' );

function iggy_amp_add_footer( $amp_template ) {
$post_id = $amp_template->get( 'post_id' );
?>
<footer class="footer-bar" >
<div class="site-info">
&copy; <?php echo date("Y")?> <a href="http://www.fix-css.com/">Fix CSS</a>
</div>
</footer>
<?php
}

Testing Mobile Accelerated Pages

You can test my page if you add /amp/ to this page’s URL.

Beware that seeing added AM pages in the Google Search Console will take several days after you first create and validate them. You can validate them first with some online validator or just using your browser dev panel console. Add “#development=1” to the /amp/ URL.

AMP Validation in Firefox

Scheme.org errors will not be shown there, so you may also use Structured data Testing Tool to check for errors before Google. You shouldn’t have any, if you successfully followed this post.

Oct. 9th 2016 Update: Version 0.4 Breaks AMP Template Display

Beware of v. 0.4 update, it has a new template, which is not polished well, so many many sites are getting some plugins content code get inserted into its featured image figure tag. Yes, it’s now having featured image by default, so you don’t need to add featured images from functions.php, but if your AMP pages were broken, you may want to use a snippet from the plugin’s developer to disable the new template and to use your previous template version 0.3.

// disable new template 0.4
if ( function_exists( 'amp_backcompat_use_v03_templates' ) ) {
amp_backcompat_use_v03_templates();
}

New template 0.4 has a different style and different tags for header, so you may need to change your CSS for AMP. It is adding a new footer too, you may want to hide “Powered by WordPress” there. Also you’ll have to remove previously added featured images etc.

There is also a new AMP validator available to check things better.

Waiting for some fix to use the new template 0.4 without featured image figure random content insertion problem. For now will use previous AMP template.

Share:
This entry was posted in WordPress and tagged . Bookmark the permalink.

4 Responses to How to Add Accelerated Mobile Pages to WordPress Site

  1. Pingback: Adding Accelerated Mobile Pages to Websites — WebProm Design

  2. Pingback: Enhanced Security HTTP Headers Addition | Fix CSS Problems

  3. John says:

    Hi, How i can hide “Powered by WordPress? i don’t find any option in Yoast or AMP automatic plugin.
    Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *