Create your AMP HTML page
The following markup is a decent starting point or boilerplate. Copy this and save it to a file with a .html extension.I made it for BEGINNERS(!) The guide is very detailed, yet very easy to follow – even if you’re not very technical.
AMP Html Code (Copy Sample Code)
<!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>
The content in the body, so far, is pretty straightforward. But there’s a lot of additional code in the head of the page that might not be immediately obvious. Let’s deconstruct the required mark-up. Start with the <!doctype html> doctype. Standard for HTML. Contain a top-level <html ⚡> tag (<html amp> is accepted as well). Identifies the page as AMP content. Contain <head> and <body> tags. Optional in HTML but not in AMP. Contain a <meta charset="utf-8"> tag as the first child of their <head> tag. Identifies the encoding for the page. Contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag as the second child of their <head> tag. Includes and loads the AMP JS library. Contain a <link rel="canonical" href="$SOME_URL"> tag inside their <head>. Points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists. Learn more in Make Your Page Discoverable. Contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside their <head> tag. It's also recommended to include initial-scale=1. Specifies a responsive viewport. Learn more in Create Responsive AMP Pages. Contain the AMP boilerplate code in their <head> tag. CSS boilerplate to initially hide the content until AMP JS is loaded. Optional metadata In addition to the bare requirements, our sample also includes a Schema.org definition in the head, which isn’t a strict requirement for AMP, but it is a requirement to get your content distributed in certain places (for example, in the Google Search top stories carousel).
Please Donate
My Only Income Running Advertisments On This Site. you Don't Forget to hit Or Donate $0.1 For A Cup Tea
Download code ZIP Donate $0.1