Essential Modifying Template Guidelines

The idea is to gradually learn from your mistakes...

  1. Start with Create Template to create a VALID AMP Page
  2. Copy and paste the template source code to a web site or localhost with a .html extension
  3. Setup AMP Validation because **ONLY** Valid AMP pages are indexed
  4. Personalize by adding content
  5. Ensure the template validates without errors or warning
  6. Goto Step 4 - Rinse and repeat :)


¯\_(ツ)_/¯

AMP Source File Template Editing Info'
<!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <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>
BEWARE:
NOTHING CAN BE MODIFIED !!!
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "XXX-NewsArticle", "headline": "XXX-Headline goes here", "datePublished": "XXX-2015-10-07T12:02:41Z", "image": "XXX-logo.jpg"] } </script>
CAN ONLY MODIFY:
parameters prefixed with XXX-
Essential for SEO purposes
<title> XXX-Welcome to my AMP </title> <link     rel="canonical"     href="XXX-http://example.ampproject.org/article-metadata.html" />
CAN ONLY MODIFY:
parameters prefixed with XXX-
Essential for SEO purposes
<style amp-custom>   body {background-color:#fff; color:#333;}   .mga {margin:0 auto;}   .p42 {padding: 0.42em;}   .w88 {width:88%; max-width:1024px;} </style amp-custom>
CSS MUST
HAVE NO EXTERNAL STYLE SHEETS
Be less than 50Kb
Accepts the majority of CSS styles
<!-- JavaScript Template Scripts -->    <link rel="yandex-tableau-widget" href="https://ampbyexample.com/favicons/yandex-browser-manifest.json"> </head>
ONLY USE:
AMP specific JavaScript files
If and only if required because used in body script
"Create Template" generates valid files
<body>   <div class="w88 mga p42">     <h1> Congratulations on your first AMP Page </h1>     <h2> Hello (Mobile AMP) World </h2>     <h3> Also works very well on desktops </h3>   </div> </body> </html>
Contents of body
Accepts majority of HTML values
Also AMP Templates
Beware specific Components must be used
W3.org HTML and CSS validation does not work
Essential to use proprietry validation