What is AMP HTML?

In today’s digital world everybody is looking for a quicker response from serving side. A web page serves content over the internet for users. A faster web page response will make readers happy. In the same context organization like Google working to give the fast outcome.
You may also read – 10 Facts about AMP HTML

Table of Contents

AMP HTML is an open source which gives you high performance on handheld devices. AMP stands for Accelerated Mobile Pages. Google search results display AMP icon

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

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 –
<amp-img
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 –

<!doctype html>

<html amp lang=“en”>

It should contain a script tag to link AMP Project javascript file.

<script async src="https://cdn.ampproject.org/v0.js"></script>

How to add an image to AMP HTML?

<img> tag in AMP HTML is slightly different than what we have used in regular HTML pages.

Instead of <img> add amp keyword before img.

Below is the perfect <amp-img> tag to add/show images on a web page.

<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

In some of the website, there could be an AMP version and Non-AMP version of same web page.

For eg – Search engine like Google finds a blog with a Non-AMP version of a page, how would Google know an AMP version of the same page is available.

That can be achieved by adding a link tag with rel=”amphtml” attributes in the non-AMP page.

Let’s implement this by an example.

Suppose you have a non-AMP page called default.html and an AMP HTML page called ampdefault.html

Now, in non-AMP page you must add this line.

<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 –