How to convert your existing Webpages to AMP

First lets discuss what is AMP

AMP (Accelerated mobiles pages) is the opensource framework developed by Google and is helpful to load mobile webpages faster.

Existing Webpage

Lets suppose we have below existing html webpage and later in this post we will change it to AMP.

This is our existing non-amp webpage

Convert webpage to AMP

Lets start changing the existing webpage to AMP page. AMP team already defined their new tags which we need to replace with our existing html tags and they have changed the tags just to have more control on pages layout.

So First, let’s create the similar file with name amp-page.amp.html and copy all content from existing.html to amp-page.amp.html and after that we will start follow the AMP rules.

There are set of required markups that we need to add in our amp page.

So, after adding all the required markups and replacing the tags with amp tags our file will look like this

Note: You can validate if your amp page is valid or not over https://search.google.com/test/amp
Or append “#development=1" in your amp page url and then you will check the validation status and errors in console section.

That’s it! Google will index your canonical and amphtml linked pages and will show amp pages for existing html pages.

For more AMP information, You can check https://amp.dev/

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Arun Jain

Arun Jain

TCS Digital associate. #Python #Django #HTML #React.js #AMP #js #CSS #Materialize CSS #Bootstrap