Accelerated Mobile Pages (AMP)
- Saturday, October 15, 2016
What is AMP?
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/.
Why Accelerated Mobile Pages?
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.
SWOT Analysis of AMP
Strength
- Acquire More Mobile Users
- Google & Bing Support AMP initiative
- Website Loads Instantly
Weakness
- Doesn't support all web features (i.e. Java Scripts, Plugins etc.)
- Meant only for Mobile Users
Opportunities
- Beat the competitors
- Get more Mobile Traffic
- Boost Sales in Pipeline
Threats
- Knowledge of AMP & Guidlines
- Maintenance (2 Websites AMP & Standard)
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.
Page for Discovery and Distribution
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">Create AMP HTML Page
<!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>Include an Image
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.
Include custom CSS
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>Conclusion
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.
