How We Added Support For AMP

AMP, or Accelerated Mobile Pages, is a new runtime developed by Google that aims to load web pages almost instantaneously on mobile devices. AMP achieves this by not allowing a lot of cruft, like most third party JavaScript and stylesheets, on websites.

Google has been urging web developers and creators to make their websites AMP-ready for a few months, and now it has started displaying AMP pages to mobile users all over the world. If a website doesn’t have AMP compatible pages, it’s probably going to take a hit. It’s not just Google – AMP has support from Twitter, Pinterest, LinkedIn, and, among others. These websites will also start sending their users to AMP versions of websites soon.

Seeing how important AMP is, we at Tech Orbiter finally set out to make our posts compatible with this technology. Here’s how we did it.

Note: If you’re using, Automattic has you covered and you don’t need to do anything.

Installed the AMP plugin

Tech Orbiter runs on WordPress(.org), and 80% of our job was done by just installing and activating the official AMP plugin. The plugin loads an AMP compatible template for every post (not pages or archives). The AMP version of the post can then be accessed by adding /amp to the end of its URL. This new URL is automatically notified to Google (and other AMP partners) by the plugin.

Here’s how an AMP post on Tech Orbiter looks like with the default settings.

techorbiter amp-wp default

Pretty good. And very fast! But not without issues.

Added this “glue” plugin to make Yoast SEO compatible with AMP-WP.

If you use Yoast SEO on your site, you should install it too. Eventually, this glue will be baked into the main plugin.

Disabled a few CloudFlare features that are incompatible with AMP

Tech Orbiter sits on top of CloudFlare, an excellent CDN and security service. Unfortunately, many of its features aren’t compatible with AMP, yet. We went around testing and disabling these features.

First off, in the CloudFlare plugin for WordPress, we disabled HTTPS protocol rewriting. This feature creates relative URLs, which are not supported in AMP. Relative URLs helped us move from HTTP to HTTPS comfortably, but we had to disable it for compatibility with AMP.

protocol rewriting cloudflare

As a replacement for relative URLs, we added a content security policy header to our website. In the root .htaccess file (Apache server), we added these lines at the top.

# BEGIN Security Headers
<IfModule mod_headers.c>
Header always set Content-Security-Policy "default-src * https: data: 'unsafe-inline' 'unsafe-eval'; upgrade-insecure-requests; block-all-mixed-content; report-uri https://our-report-url-here"

# END Security Headers

Those familiar with security headers will know that this is not the best way to implement a content security policy, but we did it just to load all elements over HTTPS and discard any insecure element.

You can build a content security policy for your site at this page. Beware that even a slight error in the policy can knock your website offline, so don’t do it unless you’re confident or your site displays mixed content warnings.

We also made some changes in the CloudFlare dashboard by creating a Page Rule. We set up the Page Rule to disable Rocket Loader, Apps, and Security only on the AMP pages. Here’s what our rule looks like.

cloudflare page rules for amp wordpress

The Page Rule works best if your URL ends with a forward slash (/).

Disabled standard AdSense ads and enabled compatible AdSense ads on AMP pages

We use a nifty plugin called Ad Inserter to, well, insert ads into posts. However, the regular ad codes do not work with AMP, so we blacklisted them on AMP pages with a URL filter that looks like this.

adsense blacklist on amp

Obviously, we still wanted to show ads on AMP pages, so we went to the AdSense dashboard and created one 250×250 unit and one 234×60 unit. We chose these units because, 1. responsive units are not supported on AMP (yet), and 2. any wider unit, and it would bleed over to the right on screens with narrow viewports, like low end Android and Windows phones.

After creating the ads, we modified their codes to be compliant with AMP pages, and inserted them into AMP pages by creating a URL whitelist in Ad Inserter.

adsense whitelist on amp

Modified the AMP template to make our AMP pages personal and add Google Analytics code

We already have an extremely useful site plugin for Tech Orbiter, and we added some code to it to modify the default AMP template. A ton of such configuration code is available at the AMP-WP GitHub page, which you should go through.

We added some custom CSS to replace the site title with a logo, and created a class to center the bottom ad unit. We used this class in a div wrapper over the ad code.

amp wordpress techorbiter

We also added code for Google Analytics as mentioned here.

Tested the site for AMP validation in Chrome developer tools

After doing all the above, we tested an AMP page of our site using Chrome developer tools to check whether it passed the AMP validation. And it did! For this check, add #development=1 to your AMP URL, open a new tab in Chrome, press F12 to open developer tools, load the URL, and look in the console for success or error messages.

amp validation chrome dev tools

Even if your site doesn’t pass AMP validation the first time round, you can check what the errors are and fix them.

So yeah, setting up AMP is no walk in the park, but the result is a blazing fast experience for your mobile visitors, and that’s something worth spending a day over. Try it on your WordPress site, and let us know how it went!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.