Following up on the initial AMP or Accelerated Mobile Pages presentation, we are now going through more technical details around the implementation of the AMP pages and its AMP components, hoping this will help you set up your AMP pages just following the below specifications.
HTML components you have to forget…
When building an AMP page, none of the following existing components you know from HTML can be used: <img />, <video width=”300″ height=”150″>, <audio>, <iframe>, <form>, <input>.
No, that doesn’t mean you cannot have images or videos on your website! It simply means that you will have to build you page using the AMP components Google has put in place for the AMP pages.
Quick explanation to start with… In the country of the AMP, the content is king!
Forms, login and drop-down menus will NOT be compatible on an AMP page, so these are things you will have to get rid of.
All CSS you can put on your page will be between the <head> tags and will be limited to 50kb.
Some new AMP Components
For images, videos, audio they are components that replace the usual tags.
Your new friendly AMP components are therefore the following:
- [Amp-img] – For example <amp-img src=“welcome.jpg” alt=“Welcome” height=“400” width=“800”></amp-img>
- [Amp-anim] (for gif)
- [Amp-ad] (the ad)
- [Amp-pixel] (frame counter)
- [Amp-instagram] [amp-twitter] [amp-youtube]
Analytics and Ads components:
- [Amp-pixel (Built-in)]
- [Amp-analytics] – For example <script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
And many more…
More information around the use of the components and the basic markup of an AMP page can be found here.
Hopefully this helped you understand which components you can use on your AMP page. You can learn more about how to test and validate your AMP page on our next article.