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.
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.
1) Start with the doctype <!doctype html>2) <html ⚡> or <html amp> top levels tag is accepted
3) Must contains <head> and <body> tags3) <meta charset="utf-8"> Add this in head section to identify encoding for the page4) <script async src="https://cdn.ampproject.org/v0.js"></script> - Add this in head tag as it loads the AMP library5) <link rel="canonical" href="$SOME_URL"> - To make your page discoverable by google6) Add <meta name="viewport" content="width=device-width">. It’s also recommended to include “initial-scale=1"7) AMP boilerplate code in head tag - AMP boilerplate code
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/
