AMP is for building the future web, together
The AMP Project is an open-source initiative aiming to make the web better for all powered by google. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.
What AMP Provides
Higher Performance and Engagement
Web pages and ads published in the AMP open-source format load near instantly, giving users a smooth, more engaging experience on mobile and desktop.
Flexibility and Results
Publishers and advertisers can decide how to present their content and what technology vendors to use, all while maintaining and improving key performance indicators.
AMP pages are built with 3 core components
1. AMP HTML: AMP HTML is basically HTML extended with custom AMP properties. The simplest AMP HTML file looks like this:
2. AMP JS: The AMP JS library ensures the fast rendering of AMP HTML pages.
3. AMP Cache: The Google AMP Cache can be used to serve cached AMP HTML pages.
20 Major common functionality AMP Support:
1. amp-accordion (Accordion)
2. amp-ad (Google and other adsense)
3. amp-analytics (Google analytics)
4. amp-audio (Html audio)
5. amp-carousel (Carousel for gallery)
6. amp-facebook (Can embed Facebook posts and videos)
7. amp-font (Add custom fonts)
8. amp-form (Contact form or php form with get and post method)
9. amp-fx-parallax (Support parallax effect)
10. amp-iframe (Support iframes)
11. amp-image-lightbox (Lightbox/Pop up for image)
12. amp-img (Embed normal images)
13. amp-instagram (Embed instagram videos and photos)
14. amp-jwplayer (Embed jwplayer videos)
15. amp-lightbox (The amp-lightbox component allows for a “lightbox” or similar experience)
16. amp-social-share (facebook.google.twitter share)
17. amp-video (Embed videos into your AMP HTML files)
18. amp-youtube (Embed YouTube videos into your AMP HTML files)
19. amp-vimeo (Embed Vimeo videos in your AMP HTML files)
20. amp-twitter (Embed tweets into your AMP HTML files)
A basic code example of AMP:
Be careful about these 10 sensitive issues when check amp :
1. Make sure you added ‘amp’ into <html> .It should be look like <html amp lang=”en”>
2. Add a canonical link element like <link rel=”canonical” href=”index.html”>
3. Changed the charset tag. Note that this is different from the ALL-CAPS UTF-8 and AMP is touchy about this.like <meta charset=”utf-8">
4. Add the meta viewport tag like <meta name=”viewport” content=”width=device-width,minimum-scale=1">
5. Never forget to add <script async src=”https://cdn.ampproject.org/v0.js"></script> on head
6. Be aware about css size.AMP never allows css over 50000 bytes
7. Never use any external js cdna except amp library
8. Why you will write inline css?You can not do it on AMP.
9. Do not write any javascript/jquery on AMP
10. AMP does not allow ‘important’ inside tag ‘<style amp-custom>’.There have some more restriction.<a href=”https://www.ampproject.org/docs/guides/responsive/style_pages">See here</a>
AMP made some samples & templates for you :
