AMP HTML for WordPress

AMP HTML for WordPress

schema-for-companiesAMP or the Accelerated Mobile Pages Project is a new type of HTML the code that runs the front end of the interwebs. AMP is nether a new concept nor a new language it is really in many ways a repackaging of an existing technology. In many ways this is counter to most of the open standards of the internet and I am sure there are many viewpoints out there on this one. For me I do SEO its a Google thing, the leap here is not a hard one to take. My opinions aside it is super easy to implement and imo a worthwhile punt for SEO in 2016.

This article is aimed at webmasters, coders, WordPress developers/wranglers, lovers of long beach walks…

A Basic AMP Page

Below is the demo page supplied as a boiler plate the code is HTML5, so what makes up an AMP page you ask?

Well not much to be honest, it is a lean and well composed mix of HTML5, Web Components, some Schema.org markup and a heap of other Google defined/pioneered meta like canonical & hreflang/lang style tags, the latter are used by Bing also and importantly the viewport tags;

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": ["logo.jpg"]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
Source: https://www.ampproject.org/docs/get_started/create/basic_markup.html

Getting Setup on WordPress

This really could not be simpler the good folks at Automatic have a plugin, do a search for AMP in your plugin section and all posts by default will then have an amp equivalent. You can checkout this posts AMP equivalent, there is also then a linkage form the parent canonical page via another meta tag;
<link rel="amphtml" href="https://niallflynn.ca/amp-html-for-wordpress/amp/" />
You can also then connect a lot of other anciallry plugins to help with SEO, tracking and other page elements. By default your AMP pages are stripped down so you may want to checkout all your posts AMP versions to make sure all is working.

Errors in Your AMP Pages

If you are connected to GSC or the platform formerly know as Google Webmaster Tools you will see errors but there is very little info on what to fix. There are thankfully tools and some easy things to watch out for like alt tags and other general HTML compliance items.

Further Reading & Tools

Some handy links and resources to help you AMP up your site;

Related Posts
Lifestyle Developments ( 18 Apr,2015 )

Leave Your Comment

Your Comment*

Your Name*
Your Webpage