How Will You AMP Your Site?

For starters, you will have to maintain at least two versions of any article page: The original version of your article page that users will typically see, and the AMP version of that page.

Since AMP doesn’t permit things such as form elements and third-party JavaScript, you likely will not be able to have lead forms, on-page comments and some other elements you may be used to having on your page in a standard implementation. (Although there is currently a hack using iframes that provides a solution to this. Thanks to Conrad O’Connell for helping me verify the hack.)

It is also likely that you will have to rewrite your site template to accommodate the restrictions. For example, all CSS in AMP must be in-line and be less than 50KB. Due to loading-intensiveness of custom fonts, they must be loaded using a special amp-font extension, in order to better control that loading.

Multimedia must be handled specially. For example, images need to utilize the custom amp-img element and must include an explicit width and height. (When converting a legacy website to an AMP template, this can be a major pain if the width and height attributes aren’t already being used). Additionally, if your images are animated GIFs, you need to use the separate amp-anim extended component.

Like images, there is a custom tag that must be used to embed locally hosted videos via HTML5, called amp-video. For embedding YouTube video, however — which the majority of web videos are — there is a separate extended component, amp-youtube.

There is also support for things such as slideshows via amp-carousel and image lightboxes via amp-image-lightbox, as well social media embeds for Twitter, Instagram, Facebook, Pinterest and Vine via their own extended components.

These tag and extended components aren’t difficult to use; they just require some planning in your site design.

In order for Google (and other technologies supporting the AMP Project) to detect the AMP version of your article, you will need to modify the original version of the article page. The original article page must include the following tag, essentially a canonical tag for AMP pages:

<link rel="amphtml" href="http://www.example.com/blog-post/amp/">

The AMP Discovery page also mentions that some platforms that support AMP will require Schema.org meta data to specify the content type of the page. (Currently, “article,” “recipe,” “review” and “video” are listed as page type examples on GitHub.)

Moreover, it also indicates that Schema.org meta data “is a requirement to make your content eligible to appear in the demo of the Google Search news carousel.” So if you’re trying to get a future benefit from Google by implementing AMP, make sure you get your schema right!
searchenginland