4 Ways to Optimise Your AMP Content

As we mentioned in our recent article, How to Enable Google AMP on Your WordPress Site, Google’s AMP is becoming an important channel for maximising your content exposure and visibility. However, the previous post simply focused on getting the fundamentals in place for making sure your content is ready and available in your WordPress site. In this article we’re going to build on that with 4 essential tips to optimise those new pages, which are important if you are to make the most out of your AMP content.

Add Google Analytics Tracking

It’s difficult to quantify the success of any content marketing effort without proper tracking in place. Google Analytics is one popular tracking service which is easy to integrate into your AMP content. To enable Google Analytics on your AMP content make sure to include the following tag in the HTML HEAD, before the main AMP JS file inclusion, eg.

<script custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" async></script>
<script src="https://cdn.ampproject.org/v0.js" async></script>

As well as the JS file inclusion you also need to include a tag in the HTML BODY, which specifies what you want to track and your Tracking ID, eg.

<amp-analytics type="googleanalytics">
 <script type="application/json">
 {
   "vars": {
     "account": "UA-XXXXXXXX-X" 
   },
   "triggers": {
     "trackPageview": {
       "on": "visible",
       "request": "pageview"
     }
   }
  }
  </script>
 </amp-analytics>

Google recommends a separate profile to track AMP content and keep it out of your main web traffic tracking. However you can always separate that with a filter later.

Include a Call-To-Action

By default the WordPress AMP plugin ends the page abruptly after your article content has finished. Any web design or UX specialist will tell you this is not a good way to keep a user on your website. The common band-aid fix for this problem is to place a relevant call-to-action straight after the article content. Here’s what we do on our articles:

Without a call-to-action there will be no hook to keep a user on your site unless you include it in the base of your article itself. So make sure to include one automatically on the end of all AMP content by utilising the amp_post_template_footer filter provided by the WordPress plugin.

Brand the Header

Another default provides by the WordPress plugin is to include your site title in the header as text. This is fine when getting started but soon enough you’re sure to want your website logo in the header to ensure consistency across all types of content available on your website. Luckily the plugin also provides an easy method to adding this too. Just make a call to the filter amp_post_template_data and set the site_icon_url variable to your logo image path, eg.

add_filter('amp_post_template_data', 'flaunt_amp_set_site_icon_url');
function flaunt_amp_set_site_icon_url($data)
{
  $data['site_icon_url'] = get_template_directory_uri().'/images/flaunt-icon.png';
  return $data;
}

Insert the Featured Image

If you make use of featured images in WordPress you’ll be disappointed when you realise that they aren’t pulled into your AMP content using the WordPress plugin. If you’re happy inserting the image directly below the title then here’s a quick way to achieve that.

add_action('pre_amp_render_post', 'flaunt_amp_add_custom_actions');
function flaunt_amp_add_custom_actions() 
{
 add_filter('the_content', 'flaunt_amp_add_featured_image');
}

function flaunt_amp_add_featured_image($content) 
{
 if(has_post_thumbnail()) 
 {
 $image = sprintf('<p class="xyz-featured-image">%s</p>', get_the_post_thumbnail());
 $content = $image . $content;
 }
 
 return $content;
}

This is a little more long-winded than the other code examples because we want to attach some HTML to the content before it gets inserted into the template, however there is no action available to do that. So we first have to define a custom action and then utilise it.