Google is on a mission to make the web a faster place. It’s important for people to realize the advantage they have by jumping on AMP before everyone else does too.
What the F*** is AMP?
Accelerated Mobile Pages
Don’t believe the tortoise— faster is always better.
The AMP Project is an open-source initiative aiming to make the web better for all. As we say at Mittun — “making the world a better place, one website at a time.”
The initiative allows more people to build better websites & landing pages — especially for nonprofits— that load super fast and work exceptionally well. Traditional websites have been built on the same codebase and foundation since the beginning of time, so the AMP embraces the web’s strong foundation while implementing bulletproof advancements in technology.
A properly executed AMP website means that by the time you tap on a link in your email client— the page has already popped up in your phone’s browser… without the loading icon.
What does AMP mean for my website?
AMP allows you to dominate a search by having an optimized page. Google is favoring AMP pages to show at the very top of the search results— yes above result 1 and below the ads— that are AMP friendly. That means there is an opportunity to come in and dominate your search term by stepping up to the AMP movement.
How can I get started with AMP?
The first thing we recommend is getting yourself familiar with AMP by checking out the official AMP Project by Google.
AMP Project Website | Great starting point if you want to see the big picture
AMP Sample Website Template | Grab the initial source code of an AMP website
Create an AMP website in seconds
- Create a new text file. Make sure it’s saved in “plain text” format
- Save this file as amp.html
- Copy the code below
- Paste the code into your amp.html file
- Save the file
- Drag the file into your web browser to view it -or- right click the file and select “Open With” and open with Chrome, Safari, or Firefox.
- Done deal
Some may argue that this could be done in one step with browser extensions, web apps and so forth. Those methods work great, too. So keep on using them.
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<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>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
