Before responsive web design and the ubiquity of high-speed mobile Internet, most websites built a special, mobile version of their site. A mobile version that stripped away most of the site’s fancy CSS and other functionality to provide a faster version. At the time, this was a necessary evil as a desktop site was never going to load or display properly on a tiny screen with a slow Internet connection.
With the introduction of a fast Internet connection for mobile devices, responsive web design allowed websites to create one design that could work on any device. But, as websites have become more complex and page load times have risen, mobile browsing has suffered. Another contributing factor to this is that not everyone has ample, high-speed data on their mobile devices.
There are currently a few competing standards for simplified websites to load better and faster on mobile. Facebook has their own Instant Pages specification, which was recently released as a WordPress plugin and will be fully available on April 10. Personally, I love it when I open a link in Facebook mobile and it opens in Instant Pages. It is so much better and faster than having it open in a full browser. Google’s accelerated mobile pages (AMP), an open-source initiative to make sites load faster, however, is available now. When compared to AMP, Instant Pages will require per-site approval.
Google’s accelerated mobile pages (AMP), an open-source initiative to make sites load faster, however, is available now. When compared to AMP, Instant Pages will require per-site approval.
AMP is an open spec for lightweight, mobile-friendly pages. You can use it as the mobile view on your site, and having it enabled actually allows the AMP version of your page to be used by Google for search previews and in other places on their platform. In addition, many SEO experts recommend adopting AMP as Google is likely to reward those who do in terms of rankings.
I recently implemented AMP on my personal site and wanted to share my first impressions as well as some of the code I wrote to customize it. Setting it up was as easy as installing two plugins, but I wanted to customize the top bar and add a menu and social sharing links to the AMP view.
Setting Up
In order to get AMP on your site, you need to install the AMP plugin from Automattic, and, if you are using WordPress SEO by Yoast, you should also install their AMP plugin. Honestly, at this point, you could be done. When you add a “/amp” to their permalinks, Google magically discovers the AMP version, since the plugin adds the “amphtml” meta tag to the header of non-amp pages with amp versions available to it.
As I said, I’m going to show you some customizations I made. Before I do so, it is important to note that mobile traffic will not automatically be routed to the AMP version of your post. If you want that to happen, you will have to add rewrite rules in your .htaccess file.
Customizing CSS
The AMP plugin gives pretty good CSS to make a post look nice with a minimal layout. That said, the top bar of the post uses the dark blue that you expect on WordPress.com. My personal site uses a theme that is black and white and not much color, so I wanted to make the top bar use black as its background color.
While I was adding custom CSS, I added rules for ordered lists since I knew I’d be making some lists for my menu and social sharing. To add the CSS, I used the “amp_post_template_css” filter and echoed my CSS. Here is what that looks like:
add_action( 'amp_post_template_css', function( $amp_template ) {
?>
nav.amp-wp-title-bar {background: #000;}
ul.jp-amp-list {
list-style: none;
display: inline;
}
ul.jp-amp-list li {
display: inline;
margin: 0 8px;
}
<?php
});
Modifying The Template
Adding A Featured Image
While the AMP plugin lets you use custom templates, I didn’t go that route because I just wanted to add a few things to the template. All three things I added — featured image, menu, and social links — were done using the standard “the_content” filter, but since I just wanted them to run on AMP pages, I only added these filters when AMP was being used. To accomplish this, I put these filters in a function hooked to the “pre_amp_render_post” action.
The first thing I want to do is add the featured image. The one important thing to note about AMP is that a standard image tag will not work. Instead, you have to use their special image tag. The AMP plugin will automatically transform the featured image to the correct markup for you.
Here is how I added the featured image:
add_action( 'pre_amp_render_post', function () {
add_filter( 'the_content', function( $content ){
if ( has_post_thumbnail() ) {
$image = sprintf( '<p class="jp-amp-featured-image">%s</p>', get_the_post_thumbnail() );
$content = $image . $content;
}
return $content;
}, 3 );
});
Note that I used a really low priority on that hook and put the featured image before the pre-existing content, which ensures the featured image is at the top of the post. I used the exact opposite approach to add menu and social sharing links at the bottom of the post.
Adding A Menu
A quick loading, minimal mobile view for a post is great, but without a sidebar or menu, I worry that the visitor won’t navigate around the rest of the site. This led me to add a custom menu to the bottom of the page.
Below is the example code for how I output the special AMP menu I created. The code is very standard and isn’t really worth going into. The one important thing to note is that I used the function amp_get_permalink() instead of get_permalink(). Doing so gives a special AMP link when possible — i.e. when the link is to a post type that supports AMP, which by default is only the default post or post type.
add_action( 'pre_amp_render_post', function () {
add_filter( 'the_content', function( $content ){
$menu_name = 'amp';
$menu = wp_get_nav_menu_object( $menu_name );
if ( ! empty( $menu ) ) {
$menu_items = wp_get_nav_menu_items( $menu->term_id );
$menu_list = sprintf( '<br /><ul id="%s" class="jp-amp-list">Menu: ', esc_attr( 'amp-jp-menu-' . $menu_name ) );
foreach ( $menu_items as $key => $menu_item ) {
$menu_list .= sprintf( '<li><a href="%s">%s</a></li>', amp_get_permalink( $menu_item->object_id ), esc_html( $menu_item->title ) );
}
$menu_list .= '</ul>';
$content .= $menu_list;
}
return $content;
}, 1000 );
});
Before using this code, make sure to create a menu called “amp.”
Adding Social Share Links
One way that AMP ensures a snappy page-load time is by preventing any JavaScript to be used. One problem with that is that all of your social share buttons, which use various JavaScript SDKs, can’t work.
But, Facebook and Twitter both let you share a page using a simple URL. Testing on my Android phone, these links opened up in the Facebook or Twitter apps with the right sharing dialog.
Here is the code I used to output the sharing links. This code uses add_query_arg() to add the right query arguments to the base Facebook and Twitter share links:
add_action( 'pre_amp_render_post', function () {
add_filter( 'the_content', function( $content ){
$post = get_post();
if( is_object( $post ) ){
$twitter = add_query_arg( array(
'url' => urlencode( get_permalink( $post->ID ) ),
'status' => urlencode( $post->post_title )
),'https://twitter.com/share' );
$facebook = add_query_arg( array(
'u' => urlencode( get_permalink( $post->ID ) )
), 'https://www.facebook.com/sharer/sharer.php'
);
}
$share = sprintf( '<hr /><ul id="amp-jp-share" class="jp-amp-list">Share: <li id="twitter-share"><a href="%s" title="Share on Twitter">Twitter</a></li><li id="facebook-share"><a href="%s" title="Share on Facebook">Facebook</a></ul>', esc_url_raw( $twitter ), esc_url_raw( $facebook ) );
$content .= $share;
return $content;
}, 1000 );
});
What Else Can You Do?
The AMP WordPress plugin is very basic but provides a lot of extensibility. I have yet to add Google Analytics support or add my Twitter and Facebook tracking pixels but they are supported — be sure to reference the docs for analytics and for adding tracking pixels.
Also, keep in mind that the plugin doesn’t work with custom post types out of the box, but you can add support to them pretty easily. Be careful, however, the more widely you use AMP, the more likely you are to run into its limitations. For example, I would love to add AMP support to my REST API course site, but right now there is no way to make it work with Easy Digital Downloads. Given the custom layouts I have used on that site, it would require custom AMP templates to get it to work. The benefits in terms of usability on mobile are extensive, however, so it might be worth investing the time.
5 Comments