Essential Tips for Getting Started With AMP
May 18, 2017
AMP is a framework for writing mobile web pages, which consists of three main parts:
- AMP HTML that slightly differs from standard HTML. For more details, check AMP Project’s list of required mark-up that your AMP HTML page must have.
- AMP CDN, which is an optional Content Delivery Network that works with AMP-enabled pages, caches them and automatically makes some performance optimizations.
Google has published a great tutorial on how to create your first AMP page so make sure to check it out.
Creating an AMP Version of Existing Websites
Creating an AMP version of an existing website requires certain adjustments. For a start, you will have to maintain the original version of the page users typically see and the AMP version of that page. It is also likely that you will have to rewrite your site template to comply with AMP restrictions.
Multimedia must be handled in a special way on AMP websites. For example, all images must utilize the custom amp-img element and specify width and height. This means that converting a legacy site that doesn’t have these attributes to an AMP template could be quite time-consuming. In addition to that, animated GIFs require the use of a separate amp-anim extended component. AMP also supports slideshows via amp-carousel and image lightboxes via amp-image-lightbox.
Embedding videos in an AMP page involves using special tags too. A tag called amp-video should be used for embedding locally hosted HTML5 videos, and you’ll need to use amp-youtube and amp-vimeofor embedding YouTube and Vimeo videos.
It’s also possible to add social media embeds for Twitter, Instagram, Facebook, Pinterest and Vine via their own extended components to your AMP pages.
AMP tags and extended components aren’t difficult to use. However, they require some planning before you jump into building your site.
Making Your AMP Page Discoverable
In order for Google and other technologies supporting the AMP Project to detect the AMP version of your page, you’ll need to slightly modify the non-AMP page. The original article page must include the following tag:
<link rel="amphtml" href="http://www.example.com/blog-post/amp/">
Essentially, that’s a canonical tag for AMP pages.
You will also need to add the following tag to the AMP page:
<link rel="canonical" href="http://www.example.com/blog-post/ ">
Using Schema.org for Adding Metadata
Sometimes third-party sites that embed an AMP page or include links to it ask for additional information about the page. That’s why adding the right metadata to every page is considered a best practice. Using Schema.org will help you add the required information. Moreover, Schema.org metadata “is a requirement to make your content eligible to appear in the demo of the Google Search news carousel”. This means that getting the schema right gives AMP pages a choice position in Google search results.
Here are some examples of structured metadata for different types of pages:
Google’s Structured Data Testing Tool lets you test each page after you’ve implemented the metadata to make sure you’ve done everything right.
We hope that reading this post made some things about AMP clearer. We also suggest that you have a look at the following resources:
- AMP Project website
- AMP By Example
- AMP Twitter for latest news
- The AMP Channel on Youtube
They will help you gain a better understanding of AMP and make it easier for you to get started creating instant-loading mobile pages.