Should you be providing AMP pages?

On a few of our recent projects we took the step to implement Accelerated Mobile Pages (AMP). Therefore we thought it would be good to talk about the pros and cons of adding AMP to your site and share some tips on our approach.

What is AMP?

AMP is a Google-led initiative which aims to speed up the delivery of content on mobile devices. Accelerated Mobile Pages use custom markup, which is mostly HTML with custom AMP properties. AMP also provides it’s own JavaScript library and cache system. Google has several motivations for introducing AMP but the most obvious is that Google’s primary business revolves around the web and they want to keep people on the mobile web. The native app space is far less lucrative for Google and AMP appears to be attempting to boost the mobile web experience.

Should You Provide AMP Pages?

Unfortunately, this question doesn’t have a yes or no answer. In our research we found many arguments for and against implementing AMP, here is a summary of our findings:

The Cons

AMP implementation isn’t straight-forward.

Developing AMP pages essentially requires you to build two versions of your templates and pages must meet the strict validation rules to be recognised by Google. We have opted to use the AMP plugin by Automattic to speed up development, but we still needed to provide a custom template to build a comparable user experience to our non-AMP pages. Keep reading to find more about the technical requirements below.

Limited Functionality

AMP functionality is improving all the time, but as custom JavaScript is prohibited you may not be able to replicate all desired functionality. Users can get confused as an AMP page may differ in functionality, the navigation may not have the same behavior, or the user interactions may be simplified in your AMP versions. You can find the feature support in the docs here.

Analytics and Tracking Limited

Due to the custom JavaScript restrictions, the tracking and advertising possibilities are limited. It’s worth pointing out that this can be seen as positive aspect from a user experience point of view as they will see faster less intrusive ads. Some of the issues with AMP analytics are outlined here.

The Pros

Visibility

Google recently introduced carousel components into their mobile search results, which are scrollable cards with feature images and titles which recommended results. To appear in the Google carousel, your pages must be AMP enabled, for significant publishers this is essential and is why AMP is supported by most of the larger publishers. Although Google insists search ranking isn’t affected by AMP support at the moment, they haven’t ruled this out. If your competition is using AMP and you are not then they are likely to have the edge over search visibility.

Potential improvement in User Experience

Many publishers revenue stream relies heavily on ads, and this can often come at a cost for the user’s experience. AMP uses it’s own advert tags, and no ad network-provided JavaScript is allowed to run inside the AMP document. This can help publishers generate revenue while the user doesn’t have to endure intrusive ads that ruin the experience of the user.

Advertising Revenue

Google claim some impressive statistics regarding advertising revenue from AMP pages:

Recent data from the DoubleClick Ad Exchange indicates that advertisers see better performance on AMP pages as well. 85% of publishers see higher viewability and higher click-through rates on AMP pages compared to non-AMP pages

This, of course, depends on the specific implementation.

Performance

This may seem obvious but in our experience page load times were improved when using AMP. Although AMP isn’t specifically a ranking factor, page speed certainly is and this is a big motivator for implementing AMP. That being said, please don’t think that because you’ve added AMP support that you can ignore page speed performance for your non-AMP pages.

Conclusion

Whether AMP will provide a benefit depends on use case, if you’re a major publisher you probably can’t ignore AMP for the improvements in search visibility, specifically in the Google carousel. Some publishers have reported improved statistics after adding AMP support. For smaller sites, the benefits may not be worth the time involved in the implementation. AMP certainly shouldn’t be used as an excuse to ignore performance, and I would encourage you to invest time in page performance before adding AMP support. If you think adding support is suitable for your scenario then continue reading to find out some tips on how to add support.

Adding AMP Support to WordPress

We used the AMP for WordPress plugin which is a great starting point for adding AMP functionality. By installing and activating the plugin, you will have basic AMP support with a basic default theme. To give maximum flexibility we used a full custom template and custom styles. To do this first set a custom template:

add_filter( 'amp_post_template_file', 'xyz_amp_set_custom_template', 10, 3 );

function xyz_amp_set_custom_template( $file, $type, $post ) {
    if ( 'single' === $type ) {
        $file = dirname( __FILE__ ) . '/templates/my-amp-template.php';
    }
    return $file;
}

You’ll also need to add this action to the head of your custom template:

<?php do_action( 'amp_post_template_head', $this ); ?>

and this to just before the closing body

<?php do_action( 'amp_post_template_footer', $this ); ?>

Add custom CSS:

// Add this to the head of your custom template
<?php amp_custom_css(); ?>
function amp_custom_css() {
    include get_template_directory() . '/assets/styles/amp.css';
}

Post Content into AMP Markup

The AMP plugin does an excellent job at converting your post content into AMP markup, but if you have custom shortcodes, you can use the the is_amp_endpoint check inside a regular the_content filter to output your own amp markup.

Ad Placement

The AMP project supports most ad networks, and ad blocks are easy to place into your template. Firstly include the amp-ad script in the head fo your template:

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

Then include the amp-ad tag in the template

<amp-ad width=300 height=250
    type="doubleclick"
    data-slot="slot_id_here"
    data-multi-size="300x250,1x1"
    data-multi-size-validation="false">
</amp-ad>

What About Duplicate Content?

The AMP for WordPress plugin automatically adds a <link rel="canonical"> tag to prevent any issues with duplicate content. If you’re not using a plugin, you may need to add this in manually, but it’s probably worth checking as it could have a significant impact on your search rankings if the canonical isn’t included. The rel=amphtml' and 'rel=canonical tags are documented here.

If an AMP page fails validation it will automatically fallback to the non-AMP version.

Other Recommendations

Ensure All Content Appears on Your AMP Pages

Always make sure your AMP pages include all of the content of their non-amp equivalents. Some publishers were found using the AMP pages as ‘teasers’ and promoting users to click through to non-amp enabled pages. To prevent this Google will no longer index pages unless they have a ‘close parity between AMP and canonical page’.

Consider Partial Rollout

We enabled AMP to a limited number of pages to analyse whether to use AMP for all posts. We used popular posts and assessed bounce rate, ad revenue and time on page. This isn’t a foolproof technique as you can’t accurately compare the AMP vs. non-AMP equivalent.

Use The AMP Validator Chrome Extension

The AMP validator for chrome makes ironing out validation issues much easier than submitting pages for manual validation.

CSS Restrictions

Specific CSS properties are not allowed with AMP. Inline styles, the use of !important and behavior, -moz-binding will cause your AMP pages to fail validation. You can use transition and @keyframe but only with opacity, transform.

Keep An Eye On The Search Console

The AMP specification has evolved, and changes can quickly invalidate your pages, make sure you promptly fix any validation errors to avoid your pages from no longer appearing in search results. It’s worth noting however that if an AMP page fails the Google validation steps the original non-amp version will still appear within search results. It is also beneficial to trigger a manual recrawl in the search console after any AMP errors are resolved.

Further Reading:

Want to know a little more about us?

We are a friendly bunch and love talking all things WordPress. Whether you’re using one of our open source projects, want to discuss a blog article or hire us for your next project, we would love to hear from you.

Contact us