Accelerated Mobile Pages Tips
AMP is an effort to build an open solution that would improve the mobile web experience for everyone. It is a new way to build web pages for static content that render fast (e.g. an article, a tasty recipe, blog post).
AMP in action consists of three different parts:
- AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML.
- AMP JS library ensures the fast rendering of AMP HTML pages.
- Google AMP Cache can be used to serve cached AMP HTML pages.
Make sure that your AMP pages are valid
It’s trivial, but in some cases, we get it wrong in the first time. That is why AMP got a build-in validator. All you need to do is to add: #development=1 to the end of your page url.
For example if we take: https://www.ampproject.org and add to it the hashtag with the flag so it will look like: https://www.ampproject.org/#development=1
Next, open Chrome dev-tools and see the messages.
You should get this output if everything is fine:
AMP for existing web content
In many cases, you already have a site and a content management system to update it. AMP make it easy for you to have it integrated. All you need to do it to build an AMP page that links to your existing page. This is called a paired AMP.
For this, you need to make sure to link your AMP and non-AMP pages:
Add a link from your AMP HTML files to their canonical version (this is usually the desktop version):
<link rel="canonical" href="http://example.ampproject.org/article.html" />
Ensure that the canonical (and any alternate) versions of your pages link to their AMP HTML versions:
<link rel="amphtml" href="http://example.ampproject.org/article.amp.html" />
Ensure you use valid AMP HTML. Only valid AMP HTML files will be shown in Google search. You can use the AMP validator or a more automated process such as a cronjob to make sure all new content is valid AMP HTML.
Validate Your Meta Data
The Structured Data Testing Tool is a great way to test whether the metadata in your AMP files is correct. You need to see the “All data” filter shows “AMP Articles” and everything is green. You can add this example: ampproject.org to the tool in order to see it in action.
Validate Google AMP Caching
When loading your AMP pages via the Google AMP Cache, check in Chrome dev-tools if all external resources are loaded successfully, including:
- amp-analytics endpoints
- amp-pixel endpoints
- custom fonts
- iframes — This is a very important ‘escape option’ that allows you to have forms on your AMP pages. The vision is to have amp components to ‘everything’ but for now, this option is an ability to have more options on your pages.
Allow Search Engines to access your AMP Files
Make sure to allow crawlers to access you AMP files. You should check your robots.txt file and make sure there aren’t any lines of:
“Disallow: /amp/ ”
Last but not least, browse this useful check-list for your site.
AMP Components In Action
In order to learn more about the different AMP components and how they are define and work, check this site: https://ampbyexample.com it is a great place to click on AMP components and see how they are defined (on the left side) and what is the result (on the right side).
WHY Do We Need The AMP Project
If there is only one thing to take from this post, take the idea that with AMP you can speed up your site to a level that only rockstars front-end developers can. Now, we know that speed is money (on the web) so do the math.
Be strong and have a fast site!
Originally published on Ido Green