Menu

How to get AMP pages to validate with CloudFlare and WordPress

amp-validate-cloudflare

If you’re using AMP pages (Accelerated Mobile Pages) and CloudFlare on your WordPress website/blog you’ve probably noticed some validation errors. This guide assumes you have the WordPress AMP plugin installed.

To fix the validation errors go to Page Rules on the CloudFlare dashboard and add a rule for your website. Use the following url pattern:

*thewirelessguy.co.uk/*/amp/*

Obviously replace thewirelessguy.co.uk with your own website domain.

Then use the following settings:

Disable Apps

Disable Performance

Keep SSL Full set as ON as you’ll need that keep the AMP pages using https.

If you are using the CloudFlare plugin (or a plugin such as WP Rocket) go to the plugin settings page and make sure HTTPS Protocol Rewriting is set to off. The reason for this is because AMP doesn’t allow any other URL format but https:// in script tags, for example:

<script src=”https://cdn.ampproject.org/v0.js” async=””></script>

Setting it to ON results in the following which doesn’t validate:

<script src=”//cdn.ampproject.org/v0.js” async=””></script>

The above rules can be adapted for any Content Management System (CMS) that uses CloudFlare.

There are AMP validator extensions available for Chrome and Opera. They automatically validate each AMP page visited and give a visual indication of the validity of the AMP page as a coloured icon.

  • John Graham-Cumming

    Hi. I’m CloudFlare’s CTO. Curious why you decided to bypass cache for AMP.

    • thewirelessguy

      The post was based on various forum tips that I collected together. I’ve just tested without bypassing cache and everything validates. I’ve updated the post accordingly. Thanks.

      • John Graham-Cumming

        Cool. Thanks.