You may also read – 10 Facts about AMP HTML
In this blog, I will explain –
- What is an AMP HTML?
- What is AMP Viewer?
- How to develop your first AMP HTML page?
- Require Markup to develop AMP HTML.
- How to add an image to AMP HTML page?
- In-Line CSS property in AMP HTML page
- Ensure your AMP HTML pages are discoverable over the web.
- How to validate your AMP HTML page?
- Pros and Cons of AMP pages
What is AMP HTML?
AMP stands for Accelerated Mobile Pages which allows you to load a webpage faster on handheld devices like Mobile.
Remember, for a website Content is the King and User Experience is the Queen.
So if your website is rich in content it should rich in user experience as well and here AMP (Accelerated Mobile Pages) comes into the picture.
To use AMP HTML, you must assure that you are using Structured Data. To validate you may use Structure Data Testing Tool, or you may check in Google Search Console.
Myth – AMP HTML is a new HTML
Truth – Normal HTML with custom AMP properties.
You can say that AMP is the optimized version of your regular web pages.
Most of the tags will be similar to normal HTML, and few tags will start with “amp” keyword.
For eg –
Note: Only valid AMP HTML files will be displayed in Google search result.
It requires three components:
- AMP HTML – Restricted and structured HTML
- AMP JS – Ensures the fast rendering of AMP pages
- AMP CDN – Delivers the AMP pages quickly
AMP help us to load web pages quickly by loading required content first and then load third-party libraries, which gives a smooth user experience.
Who can use AMP HTML pages? or What kind of website is suitable to use AMP HTML?
There is no any hard and fast rule to use AMP HTML, any website can have AMP HTML.
So what if, if you are already using a custom HTML page.
1. Either you update your existing HTML with AMP defined tags/properties.
2. Create new AMP HTML and add a canonical URL in old HTML page pointing to this new AMP HTML.
What is AMP viewer?
Transforms the AMP URL into a cached URL to get the document from an AMP cache.
How to develop your first AMP HTML page?
As we have discussed earlier, AMP HTML pages look similar to regular HTML pages with some extra attributes/properties in HTML tags.
Required Markup to develop AMP HTML
Like a normal HTML page, AMP HTML contains <html> tag but with added attributes.
So, in AMP we should start the page like this –
<script async src="https://cdn.ampproject.org/v0.js"></script>
How to add an image to AMP HTML?
<amp-img src="myimage.jpg" alt="Welcome" height="400" width="800"></amp-img>
CSS properties in AMP HTML
To run a beautiful UI, we must have specified CSS properties defined in an HTML page. Similarly, in AMP HTML we should have CSS properties in it to present a beautiful web page..
In regular HTML we have style tag like this –
But in AMP HTML we have style tag like this-
How to ensure your AMP HTML pages are discoverable?
Use Canonical Tag in AMP HTML
<link rel="amphtml" href="<root-domain>/ampdefault.html">
And in AMP version you must add this line.
<link rel="canonical" href="<root-domain>/default.html">
If you have only one page and that is AMP HTML page, then still you have to add below line to your AMP page.
<link rel="canonical" href="<root-domain>/amppage.html">
How to validate AMP HTML pages?
Before running/publishing your AMP HTML pages, you must ensure that your AMP HTML page is valid and has no errors on it.
To validate an AMP HTML page you can run your page in a browser like Google Chrome and run the validator by adding #development=1 at the end of AMP page url.
For eg – http://localhost:80/amppage.html#development=1 after loading this page. Open Chrome Dev Tools Console to see the validation message.
Pros and Cons of AMP pages
In earlier paragraphs of this blog, we are good to understand the AMP HTML. In addition to this AMP pages are cached at Google server and Google serves those pages for a user based on a request.
There are Pros and Cons to AMP pages.
Pros are –
- Lightweight and fast
- Better ranking in search engine
- Low user dropout rates
Cons are –
- AMP mainly targets to static content. So what about dynamic content?
- Maintain AMP and non-AMP version of the same page
Next blog is 10 Facts about AMP HTMP Pages
Happy Coding….Happy Learning……