Bonus chatter: AMP pages and code snippet hyperlinks…

Here’s a quick memory jogger for me: If you try to validate the AMP versions of blog pages, you may get this error from Google: Invalid URL for HTML attribute 'href' in tag 'a'. What does it actually mean?

As a developer, I imediately assumed “invalid” here meant “not well formed”. But it turns out that it’s Google’s validator saying “you have an href attribute whose value does not point to an actual page”. That might mean:

  • You typo’d a url, and it is’s just an accidental 404
  • You included a deliberately not-right URL in a blog post as an example, and Google is treating it as a real url

The second of those bit me today. I had an old blog post which included some made up urls as examples, which I had wrapped in <code/> blocks. Back when I first wrote this, I’m pretty sure they didn’t get presented as actual hyperlinks. But at some point WordPress has decided to start automatically adding an <a/> element around them. And that breaks Google’s validation.

I tried changing the inline code element into a [code] block – assuming that would tread my URLs as pre-formatted and hence not ripe for auto-linking. But that does it too, by default. After quite a lot of Googling, I discover that you need to pass as special “autolinks” attribute into your code block to disable this behaviour.

The block

 [code autolinks="false"]
  http://test.com/
 [/code]

gives the output:

  http://test.com/

which seems to solve my validation problem… (Well, Google’s search console has gone from saying “Error!” to saying “Validation pending” – which it didn’t do for any of the other things I’d tried. I’ve not waited long enough to see whether the comments about that particular page disappear completely…)

Annoyingly, this doesn’t work for inline code in <code/> blocks – but it does appear to get rid of the AMP validation error.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

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