What is Amp: Amp stands for accelerated mobile pages, an open source project driven by Google, which is super useful to attract users to the website. The load time of amp pages is lighting fast because of several reasons, we’ll not dig into that, for that there is separate read.
There is a confusion in the amp concept that it is mobile view for any website, there is nothing like that. Amp pages are solely for Google SERF and they could be viewed only when there are in the google search result, else one can check by direct hitting the url. So this is not a mobile version of your website.
To develop amp compatible web pages, there are lots of restrictions by amp team and there are also tools, by using them you can validate your amp page, that pages are as per amp standard or not.
Restrictions by Google Amp team: There are two basic restrictions that need to be taken care while developing. These restrictions are the common mistakes that the developer does sometimes, so while developing any web application, make sure you are following these points.
- Javascript
- CSS
Javascript: In today’s scenario javascript is the commonly used front end scripting language, but the amp will restrict the use javascript in all the way, the only javascript that one can include in their project are their own javascript files. There are lots of javascript files that are provided by the amp team for different purposes.
CSS: Styling is prohibited only by an external style sheet, means for styling your web page, one cannot include external css file. The only styling could be done, only by writing internal css which is again restricted by some weight limit that is 50,000 bytes only. There are some other restrictions like some styles, using <style amp-custom> tag to start writing your style etc.
How to validate amp pages: There are many options available out there, but I’l talk only about 3 methods, which are:
- Using Chrome browser extension called AMP validator
- Using amp website’s validator
- Through URL
AMP validator: Follow the above given link and install the extension to your chrome browser. It will help you to detect that any running page does have amp page or not.
If you are visiting any website and above extension blinks in blue color, then it means that visited web page has amp page and by clicking on it, the user will be redirected to amp page.
If you are amp page and extension blinks in red color with some numbers, then it means there is some issue in your amp page and Google will not crawl webpage until these issues will be removed.
At the last, if pages are perfectly fine as per amp standard, then it will be blinked green signal, which means everything is fine, you can go on 🙂
Using amp website’s validator: The simplest way of validating amp pages, just copy your url and paste it on the given area and hit the button VALIDATE, it will tell that amp page is passing their test or not. If everything is fine then it will display PASS else FAIL.
Through URL: If one doesn’t want to use above validation tools, then you can test it just in any browser, just put #development=1 like below given url after the whole url and enter, now open browser’s console and it show you errors if any, else it will display a success message.
http://localhost:8000/released.amp.html#development=1
Thank you