How To Create An AMP Template Within Episerver

Basic AMP Template Example


<!doctype html>
<html amp lang="en"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <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> </head> <body> <h1>Welcome to the mobile web</h1> </body> </html>

AMP tempaltes places some restrictions on the HTML and the content you can display to mak eit valid.  With that mark-up in mind, a very basic Episerver implmentation, might look like this:

@using JonDJones.com.Core.Extensions
@model JonDJones.Com.Core.ViewModel.Pages.StartPageViewModel

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>@Model.CurrentPage.Name</title>
<link rel="canonical" href="@Model.CurrentPage.ExternalURL" />
<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": "@Model.CurrentPage.Name",
"datePublished": "@Model.CurrentPage.StartPublish",
"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>
</head>
<body>
<h1>@Model.CurrentPage.Name</h1>
@Model.CurrentPage.MainContent
</body>
</html>

 

 

 

Calling Your AMP Template

In your controller, you could trigger the AMP view via the query string.

        public ActionResult Index(StartPage currentPage)
        {
            if (Request.QueryString["google"] != null && Request.QueryString["google"] == "amp")
                return View("amp", AmpPageViewModel(currentPage));

            return View("Index", new StartPageViewModel(currentPage));
        }

Validating Your AMP Mark-up

Creating valid AMP HTML can take bit of time and practice. To make sure that your HTML is vlaid, you can use the AMP validator.



To validate your HTML, render your page within a browser, copy the HTML from it and then paste it into the validator and click the 'validate' button.  If the HTML passes you'll see a green tick, if, not you'll get a list of all the violations.  If you are wondering what these violations might look like, you'll typically see thigns like image tags not having width and heigth set, style attributes on images etc..

 

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top