Step by-step procedure to implement amp in website

Step-by-Step Procedure to Implement AMP in Website
What is AMP ?
The AMP plugin was born out of a collaboration between Google and Twitter released in 2015.
Accelerated Mobile Pages is an open source initiative project designed to optimize faster mobile
pages. It’s like taking a page that’s already mobile friendly and making it load quicker, by stripping
it down to basics.Accelerated Mobile Pages (AMP) is an open source initiative project/platform
aimed at helping publishers improve the speed and readability of their mobile content pages.
Faster Mobile Pages + Readable Content = Better User Experience
When launched, many publishers such as the The Economist, BBC, the Financial Times and
Guardian News have implemented the initiative, so by now we can safely assume AMP is an
innovation that’s worth considering for everyone who wants to stay competitive on the mobile web.
AMP pages are built with 3 core components.
AMP HTML: A subset of HTML, this markup language has some custom tags and properties and
many restrictions. But if you are familiar with regular HTML, you should not have difficulty
adapting existing pages to AMP HTML.
AMP JS: A JavaScript framework for mobile pages. The AMP JS library ensures the fast rendering
of AMP HTML pages. For the most part, it manages resource handling and asynchronous loading. It
should be noted that third-party JavaScript is not permitted with AMP.
© Copyright 2010-2017 webwingtechnologies.com

AMP CDN: An optional Content Delivery Network, it will take your AMP-enabled pages, cache
them and automatically make some performance optimizations. The Google AMP Cache can be
used to serve cached AMP HTML pages.
amp examples
In the above image, after searching ‘ban on currency’ following AMP pages are displayed with
AMP symbol.
Steps to Create Your First AMP Page:
Below you’ll learn step by step that how to create a basic AMP HTML page, how to stage it and
validate that it’s AMP compliant, and finally how to get it ready for publication and distribution. Go
through the hyperlinks and learn the steps to implement AMP in your website.
 Create Your AMP HTML Page
 Include an Image
 Modify Presentation and Layout
 Preview and Validate
 Prepare Your Page for Discovery and Distribution
 Final Steps Before Publishing
How Will You Implement AMP in Your Website?
 AMP file has its extension(s) called as .amp.html.
 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.
 Certain tags of HTML can’t be used. AMP pages have a normal HTML 5 doctype, <!
doctype html>, so they are not distinguished from normal HTML this way. However, the
main html element has a special attribute, <html >, featuring the Unicode character⚡
U+26A1, “HIGH VOLTAGE SIGN”.
 JavaScript is basically not allowed at all.
 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.
<amp-img src=”welcome.jpg” alt=”Welcome” height=”400″ width=”800″></amp-img>
 Similar to 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.
 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.)
This is all about to implement AMP accelerated mobile pages with step by step procedure in your
project to work on already mobile friendly webpages and making it load quicker in mobile devices.
More blogs are on its way. All the best and stay tuned.

Step by-step procedure to implement amp in website

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Step by-step procedure to implement amp in website

Similar to Step by-step procedure to implement amp in website (20)

More from Webwing Technologies

More from Webwing Technologies (9)

Recently uploaded

Recently uploaded (20)

Step by-step procedure to implement amp in website