What is AMP HTML?
- Get link
- Other Apps
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
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 -
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 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.
So, in AMP we should start the page like this -
It should contain a script tag to link AMP Project javascript file.
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 -
<style> </style>
But in AMP HTML we have style tag like this-
<style amp-custom>...</style>
And in AMP version you must add this line.
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.
There are Pros and Cons to AMP pages.
Pros are -
Happy Coding....Happy Learning......
You may also read - 10 Facts about AMP HTML
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
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 -
<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">
<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
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">
<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
- AMP mainly targets to static content. So what about dynamic content?
- Maintain AMP and non-AMP version of the same page
Happy Coding....Happy Learning......
You may read some popular blogs on SharePointCafe.Net
Popular
Top 30 ASP.Net Web API Interview Questions and Answers
CAML Query Tutorial for SharePoint 2013 and 2010 - A Complete tutorial guide
CAML Query is one of the most important topics in SharePoint. CAML Query is the way for querying items from SharePoint objects like List and Library. This blog is helpful in SharePoint 2010 development as well as in SharePoint 2013 development.
What is MicroService? A modern approach to develop software applications
Before describing MicroServices we should first understand distributed technologies we already have in the industry. Prior to MicroServices, we have already Web Services, WCF Service and latest one from Microsoft i.e. ASP.Net Web API. Then Why MicroService Architecture?
You may read about all these distributed technologies in details in my earlier blog.
You may read about all these distributed technologies in details in my earlier blog.
How to consume RESTful APi from server side code - C#
What's new in C# 6.0 language?
SharePoint Interview Questions and Answers
Introduction to ASP.NET Core - Basic Introduction with Visual Studio 2015 and 2017
All about SharePoint 2010 Content Type Hub - SharePoint 2010 Tutorial
ASP.Net Web API Security
If you are new to ASP.Net Web API then please start from the beginning level. What is ASP.Net Web API? In the previous blog, I wrote about Routing in Web API. You may also like .Net Core Introduction and MicroService Architecture.
I have also explained, How to create a secure Web API? in my earlier blog.
In this blog, let's discuss the Web API security in details.
I have also explained, How to create a secure Web API? in my earlier blog.
In this blog, let's discuss the Web API security in details.
Getting started with Microsoft Azure
If you are new to Microsoft Azure, then please read my earlier blog on Cloud Computing and Microsoft Azure introduction.
In this blog, I will explain how to create resources in Azure Dashboard and will show you screenshots. This will be a totally new experience for me as well because I am also new to Cloud Computing and wanted to share my experience through my blog.
In this blog, I will explain how to create resources in Azure Dashboard and will show you screenshots. This will be a totally new experience for me as well because I am also new to Cloud Computing and wanted to share my experience through my blog.
Tags
Tags
cloud-computing12
sharepoint-201310
interview8
sql8
webservice7
angularjs6
entity-framework6
design-pattern5
linq5
sharepoint-programming5
powershell4
socialmedia4
caml3
dot-net-core3
rest3
workflow3
ajax2
aws2
html2
infopath2
javascript2
oops2
searchservice2
sharepoint-interview2
soa2
timer job2
website2
3tier1
active-directory1
caching1
devops1
fba1
imageupload1
json1
list1
managed-metadata-service1
metadata1
odata1
page-layout1
performance1
run with elevated1
safecontrol1
security1
sharepoint interview questions1
sharepoint security1
sharepoint-architecture1
sharepoint-branding1
sharepoint-migration1
sharepoint-service1
sharepoint-topics1
sharepointlist1
site-definition1
soap1
uls1
validation1
viewstate1
xml1
Show more
Show less
Comments
Post a Comment
Dear Readers, Please post your valuable feedback in the comment section if you like this blog or if you have any suggestions. I would love to hear the same from you. Thanks