Introduction:
Here i am going to explain how to create Accelerated Mobile Pages Project (AMP).
What is AMP page.?
The Accelerated Mobile Pages (AMP) Project is an open source initiative that makes it easy for publishers to create mobile-friendly content.
Step 1: Your html must start with <html amp>
Step 2: Your page must have canonical tag
Step 3: Your page must have viewport meta tag
Step 4: Your page should have all google structured date tags
For example:
- <meta property="og:site_name" content="OnetamilNews" />
<meta property="og:url" content="Content">
<meta property="og:type" content="article"/>
<meta itemprop="datePublished" content="12-12-12" />
<meta itemprop="dateModified" content="12-12-12"/>
<meta property="og:image" content="img/1.png"/>
Step 5: You should't use any external css and js files except amp related files.
Step 6: Create inline css and your style tag should start like this
- <style amp-custom>
body {
font-family: "Merriweather Sans",Arial,Helvetica,sans-serif;
background: #f4f4f4;
}
</style>
Step 7: Include your amp files
- <head>
- <script custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" async></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" async></script>
<%--<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>--%>
<script src="https://cdn.ampproject.org/v0.js" async></script>
- </head>
Step 8: Inside body design your page
1. Image tag must start like this
- <body>
- <amp-img width=600 height=400 layout='responsive' src="img/1.jpg"/>
- </body>
2. Your content should not have any inline css and any style attributes.
3. Don't use any javascript of juquery functions
Step 9: How to validate AMP page?
Open developer console on your browser. Press F12
Add #development=1 with your url
For Example: http://onetamilnews.com/AMP/newsdetail.aspx#development=1
