How to implement AMP on your website.

how to make website in AMPRecently I used AMP on one of my website. The site was already live and I need to implement the AMP functionality on the website. In your post page you define a amphtml tag which have url of the amp page. This amphtml tag help Search engine to find out amp page. This is the way we let search engine know about our AMP pages.

How to Setup AMP Pages for the post

In AMP you need to use amp tags instead of standard html tags. for example img will become amp-img.

You can’t use external JavaScript and CSS. All CSS  must be on same page. You need  component to implement dynamic functionality. When you implement the AMP the google will cache your stuff and when user visit your amp page from google search your page will open instantly fast.

Here is the great guideline to get you started with AMP https://www.ampproject.org/docs/getting_started/create/basic_markup

How I implement it for the existing CMS.

The website where I implement the AMP feature I started with the boilerplate of AMP page. You can find it here https://www.ampproject.org/docs/getting_started/create/basic_markup . In my case I just generate the amphtml by making tags compatible with amphtml. img tag become amp-img tag. I use amp-youtube component to serve the iframe which is earlier used for show YouTube video.

How I can validate my amphtml page that I am currently working on.

If you have a testing server using https, it’s great. AMPhtml can be tested easily by upload and run test amp test tool. If you want to test your localhost html pages, here is great extension which can be used for validate the amp html pages https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc?utm_source=chrome-ntp-icon

What if some of my amp pages are not validate at all. I can’t test all the pages. What should I do ?

Google search console give you errors which it’s have found on your posts’s amp version. You can check it time by time and download the whole list of errors and fix it.

Thanks for reading my article.

Leave a Reply

Your email address will not be published. Required fields are marked *