Webwing Technologies - Procedure to Implement AMP in your Website
•Download as DOCX, PDF•
1 like•61 views
AMP provides a great user experience across many platforms. So let's implement AMP. Walk through below steps to enable AMP for your website.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Webwing Technologies - Procedure to Implement AMP in your Website
Similar to Webwing Technologies - Procedure to Implement AMP in your Website (20)
More from Webwing Technologies
More from Webwing Technologies (9)
Webwing Technologies - Procedure to Implement AMP in your Website
- 1. 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. 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.
- 2. In the above image, after searching 'ban on currency' following AMP pages are displayed with AMP symbol. 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. (below are the hyperlinks we are going to put on bulleted text) Create Your AMP HTML Page https://www.ampproject.org/docs/tutorials/create/basic_markup Include an Image https://www.ampproject.org/docs/tutorials/create/include_image Modify Presentation and Layout https://www.ampproject.org/docs/tutorials/create/presentation_layout
- 3. Preview and Validate https://www.ampproject.org/docs/tutorials/create/preview_and_validate Prepare Your Page for Discovery and Distribution https://www.ampproject.org/docs/tutorials/create/prepare_for_discovery Final Steps Before Publishing https://www.ampproject.org/docs/tutorials/create/publish How Will You Implement AMP in Your Site? 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.)
- 4. 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.