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 templates place some restrictions on the HTML and the content you can display to make it valid.  With that mark-up in mind, a very basic Episerver implementation, 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 a bit of time and practice. To make sure that your HTML is valid, 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 things like image tags not having width and height set, style attributes on images etc..

 

submit to reddit

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