You're asking kind of a loaded question but as far as Craft is concerned, you're in a good position to spit out exactly what you need as far as markup and styles go. AMP is more or less just a small subset of HTML.
When compared to something like WordPress, Craft is going to give you all the tools necessary to spit out an AMP page just by virtue of it doesn't dictate layout and styling nor include any extra fluff. And it provides easy routing features to make it easy to make different "versions".
#Different Versions / Different Routes#
Depending on how your site is setup, you'll want different versions of your content—one regular and one for AMP... not unlike the old m dot sites. (Taking it back to the old school WAP era I guess...)
Let's say you have a section called News. If your entries URL Format looks like: http://site/news/slug/, you might want to have the AMP version look like http://site/news/slug/amp.
One way to do that in Craft is to setup a route. You can do that in Settings -> Routes -> New Route.
[![enter image description here][1]][1]
That will load the _amp.html template inside a news folder. You'll have to do a little extra work to tell Craft where to pull the entry from since routes only load templates by default. Since we used the slug variable in our routes, we can use that to grab the entry from the news section and also set the entry variable.
{% extends "_layoutamp" %}
{% set entry = craft.entries.section('news').slug(slug)[0] %}
{% block content %}
... rest of your content
{% endblock %}
The AMP docs start with a simple skeleton. I used {% extends "_layoutamp" %} in our _amp template so we need to make a ``_layoutamp.html" file to match inside Craft's templates folder.
{# _layoutamp.html #}
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>{{entry.title}}</title>
<link rel="canonical" href="{{entry.url}}" />
<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": "{{entry.title}}",
"datePublished": "{{entry.dateCreated.iso8601()}}",
"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>
{% block content %}
{# brings in the content from the _amp.html content block #}
{% endblock %}
</body>
</html>
AMP recommends some metadata near the top, in the form of JSON. Easy enough to spit out the required fields in Twig.
#"Linking" to an AMP page#
You'll notice a <link rel="canonical" href="{{entry.url}}"> in that file as well to tell Google your main version is here.
On your "normal" page, you'll want to add a reference to the AMP page too. (I also like to set the canonical version as well for good measure.
<link rel="canonical" href="{{entry.url}}">
<link rel="amphtml" href="{{entry.url}}/amp">
That will tell Google the AMP version is at the URL.
#Anything else?# Pretty much the rest is up to you. AMP is pretty easy to setup but you still need to use their custom tags.
Most notably, things like images and videos need to use custom tags like amp-img and amp-video, so the AMP runtime can intercept the loading of those assets and handle them.
Will be interesting to see how this affects page rank moving forward. Google confirmed it's not a ranking signal (yet) but that doesn't mean it won't be in the future. [1]: https://i.sstatic.net/KRdUt.png
