How to Create a Basic AMP HTML Page-how I do create a standard Page with AMP HTML. The basic markup for creating web/page with the AMP HTML is like this: <!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<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>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
The required markup
Mandatory AMP HTML contains some of the markup below:
- Starting with the <!doctype html>
- Include
<html ⚡>atau<html amp>. - Include
<link rel="canonical" href="$SOME_URL" />, the tag on the head to know AMP HTML version. - Include
<meta charset="utf-8">. - Include
<meta name="viewport" content="width=device-width,minimum-scale=1">on tag head. - Include
<script async src="https://cdn.ampproject.org/v0.js"></script>on tag head. - Include
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>on tag head.
viewport meta tag. The solution is to add user-scalable=no,minimal-ui as I demonstrated in the Markup above.Add A Picture
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<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,user-scalable=no,minimal-ui">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content everywhere",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
<amp-img src="welcome.jpg" alt="Welcome" height="2000" width="800"></amp-img>
</body>
</html>
Add CSS
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<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,user-scalable=no,minimal-ui">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content everywhere",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<style amp-custom>
/* custom CSS disini; tapi ingat, body margin tidak bisa diubah */
body {
background-color: white;
}
amp-img {
background-color: gray;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
<amp-img src="welcome.jpg" alt="Welcome" height="2000" width="800"></amp-img>
</body>
</html>
Page Layout
External content such as pictures, video etc., must use the
height and width attributes to mendeklarasikannya. This is to cope with the load, so that the resource is not damning.May not use the tag
style in HTML. The bottom line may not use inline CSS. Allowed to use the tag <style> only one times for CSS. Allowed CSS enhancements using < style amps-custom >.If there is still an Error, then there will be a notice of how many errors
An example of an already valid HTML AMP