- Saturday, October 15, 2016
The Accelerated Mobile Pages (AMP) Project is an open source initiative that makes it easy for publishers to create mobile-friendly content once and have it load instantly everywhere. AMP is a web component framework to easily create user-first websites, stories, ads and emails.
Whether you are a publisher, e-commerce company, storyteller, advertiser or email sender, AMP makes it easy to create great experiences on the web. Accelerated Mobile Pages are HTML pages that take advantage of various technical approaches to prioritize speed and a faster experience for users by loading content almost instantaneously.
Learn more about Accelerated Mobile Pages (AMP) Project on https://amp.dev/.
We can see the increase in the number of Mobile Users day-by-day on our websites. Providing a great reading experience on mobile devices is critical and for long-term success, data shows that people abandon websites after just three seconds if the content doesn’t load quickly. Give these mobile users the best user experience and instantly loading site.
AMP pages load near instantly, enabling websites to offer consistently fast experience across all devices and platforms. AMP components are already optimized for the best performance, as it takes a lot of time and effort to build a great website.
Get the edge over competitors and resellers. Boost the store sales with more traffic pumped in to the sales pipeline. Highly Cost effective. AMP on Google is expanding globally - Google announcing mobile first indexing for the whole web (September 2020).
Getting started with AMP is easy because it is an open-source project, it is free. AMP is great for all types of static web content such as news, recipes, movie listings, product pages, reviews, videos, blogs and more.
The Accelerated Mobile Pages (AMP) Project is an open source initiative that makes it easy for publishers to create mobile-friendly content once and have it load instantly everywhere. AMP is a way to build web pages for static content that render fast. AMP in action consists of three different parts AMP HTML, AMP JS and Google AMP Cache.
Add the following to the non-AMP page:
<link rel="amphtml" href="https://www.example.com/url/to/amp/page.html">
And this to the AMP page
<link rel="canonical" href="https://www.example.com/url/to/full/page.html">
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Hello World!!!</h1>
</body>
</html>
To demonstrate what additional markup could look like, here’s the code required to embed an image into the page:
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
Most HTML tags can be used directly in AMP HTML, but certain tags, such as the <img> tag, are replaced with equivalent or slightly enhanced custom AMP HTML tags.
AMPs are web pages, any styling to the page and its elements is done using common CSS properties. Style elements using class or element selectors in an inline stylesheet in the <head>, called
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
Websites that are mobile-friendly are rewarded with higher rankings in organic mobile search by Google, website with AMP pages will more likely to rank higher than non-AMP pages, in the mobile search which will generate more mobile customers for your website and grow your business.
Joydeep Deb is a Senior Digital Marketer and Project Manager with strong experience in Digital Marketing, Lead Generation, Online Brand Management, Marketing Campaigns, Project Management, Search Engine Optimization (SEO), Search Engine Marketing (SEM), PPC, eMail Marketing, Web Analytics, Web Technologies, Web Design and Development.
With an MBA in Marketing. IIM Calcutta Alumini. Lives in Bangalore, Karnataka - India.