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. 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://www.ampproject.org/.
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.
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 - AMP search results on Google will be rolling out worldwide when it launches in the coming weeks (Mid-September 2016).
Getting started with AMP is easy because it is built on existing web technologies. 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
Goal of Your Website AMP
- Easily Get Indexed and Rank Better on Google & Bing Search Engines.
- Get more Mobile Traffic on your AMP website.
- And Send these Mobile Traffic to your actual website.
- Which will lead to increase in your Sale.
- More leads to Website Sales Pipeline/Channel.
How to 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 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.
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>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">Case Studies
AMP helps the Washington Post increase returning users from mobile search by 23% & improvement in load time by 88% https://www.ampproject.org/case-studies/washingtonpost/.
Add a comment
Joydeep Deb is a Senior Digital Marketer and Project Manager with 15+ years of 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.
Receive my latest posts right in your inbox? Enter your email address below to subscribe.
Thank you!!!
Thank you for subscribing, you will be receiving our latest posts right in your inbox.