The Problem: Google’s Webmaster Tools for Accelerated Mobile Pages says your pages are throwing errors like this:
Invalid attribute values: src=//cdn.ampproject.org/v0.js, href=//fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic|Open+Sans:400,700,400italic,700italic
I am using the official AMP plugin created by WordPress’ company Automattic to make my site AMP usable so my pages will open in a mobile friendly format… and so Google will improve my site’s ranking – I hope!
I am also using a free Cloudflare account to improve speed and security. The problem is Cloudflare is not quite AMP friendly yet.
So far I have found 2 settings that I needed to change. There are other errors I still need to figure out, but I wanted to list the solutions I have found so far.
First change: Notice in the error above, it is showing the “src=//cdn.ampproject.org…” That really should be “src=http://cdn.ampproject.org…”. So where did the http go?
After doing the requisite disable all the plugins and reenable them one at time test, I found the culprit was the Cloudflare plugin. The setting you want to turn off is “HTTPS Protocol Rewriting”. More information about HTTPS Protocol Rewriting here.
You can test the change in your browser by browsing to the AMP version of your page and adding #development=1 to the URL, like so:
http://my.domain.com/post/amp/#development=1
Then inspect the page by right-clicking anywhere on the page and clicking “Inspect”. The inspect console should tell you where in your code the errors are occurring.
Second change:
The inspect console showed me 3 errors:
- The attribute ‘type’ in tag ‘script type=application/ld+json’ is set to the invalid value ‘text/javascript’.
- The attribute ‘type’ may not appear in tag ‘amphtml engine v0.js script’.
- The mandatory tag ‘amphtml engine v0.js script’ is missing or incorrect.
The first of which told me the error was located at this piece of code:
<script type=”text/javascript”>
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:0,byc:0,owlid:”cf”,bag2:1,mirage2:0,oracle:0,paths:{cloudflare:”/cdn-cgi/nexp/dok3v=1613a3a185/”},atok:”aaa2921d785eb7e8392eb6471163ca07″,petok:”bbf60e63c6b61a1e9259ef20cff044a4274db7be-1456423541-1800″,zone:”bourbonblog.com”,rocket:”a”,apps:{},sha2test:0}];document.write(‘<script type=”text/javascript” src=”//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=fb690a32f5/cloudflare.min.js”><‘+’\/script>’);}}catch(e){};
//]]>
</script>
It was Cloudflare again. But this wasn’t caused by the plugin, but by the service itself, namely the Rocket Loader.
To fix it, I logged into Cloudflare.com, and created a rule for /amp/ pages.
My pattern looked like this:
*domain.com/*/amp/*
where “domain.com” is your website domain.
The only setting you need to change from default if Performance is on, is to turn Rocket Loader off.
Bonus non-Cloudflare change:
If the Google Webmaster Tools says “Required tags missing: amphtml engine v0.js script”, this means you are missing a link tag that references the original non-AMP URL. The browser inspect console will not show an error.
I don’t know why the WordPress AMP plugin is missing this, but this is fixed (for now) by editing the AMP plugin file located in /wp-content/plugins/amp/templates/single.php .
Anywhere between the opening and closing <head> tags, insert this code:
<link rel=”amphtml” href=”<?php the_permalink(); ?>”>
and that should take care of it.
Update: I don’t know if I missed or misunderstood it, but what I thought was missing is, in fact, supplied by the plug in, but it is
<link rel=”canonical” href=”<link to non-AMP page>”>
As I mentioned before, I’m still getting some validation errors. Hopefully I will remember to list them here… and not wait for over a year to post again. 🙂
