The Accelerated Mobile Pages
(AMP) Project is an open source initiative that embodies the vision that
publishers can create mobile optimized content once and have it load instantly
everywhere. In normal people terms, this means when you search for a news
search term, Google will show you carousel that highlights stories on
AMP-enabled websites.
AMP is making things over-the-top, supercharged, amazingly awesome for mobile
users. AMP has essentially overhauled the core elements of how websites
structure their mobile pages. It’s broken down into three sections:
AMP HTML: A redesigned version of HTML
includes a new set of custom AMP related commands.
AMP JS: A new Javascript structure for
mobile pages that allows all loading of external resources asynchronous.
AMP CDN (Content Delivery Network): This
will take your AMP-optimized content and cache them for fast delivery.
AMP requires developers to strip
their markup to create simpler pages for a faster web page. And, as you’ll see
later in this article, those pages are getting an added boost in Google’s
mobile search results. Now, publishers have twice the web pages and twice the
power in SERPs. Meaning, if you have a website you need to provide two
different versions of web pages 1) desktop 2) AMP for mobile. It looks similar
to this:
Google AMP Really That Much
Faster Than Mobile
Take a peek at this visual
representation from anti-tracking extension Ghostery compared desktop, mobile,
and AMP. When comparing a New York Times
piece, here’s what Ghostery saw when comparing Javascript tags:
Desktop = 100+
Mobile = 60
AMP = 21
Google AMP Mobile-Optimized
Content
If you’re anything like me when
you first heard the news about AMP, you
whipped out your smartphone and googled “bei bei baby panda.” While, yes, this
may lead to an amazingly cute three-minute video of a napping panda 🐼, it’s not
going to lead you to AMP-optimized mobile content.
So, I have the next best thing:
perusing streams of celebrity search results and inspiring nude selfie news
(thank you Kim K!). I’ve scoured Google’s AMP-optimized mobile content from top
to bottom in search of some awesome examples to show you here. Let’s search
together, shall we?
Grab your smartphone.
Click on your browser.
Type in g.co/ampdemo.
Search for news-worthy phrases like “Kim
Kardashian nude selfie,” “#CocksNotGlocks” or “Caitlyn Jenner.”
Google AMP Affect Organic Search
Results
Keywords. Domain authority. Page
authority. Organic traffic. There are a lot of opinions about what happens to
the organic search results now that AMP is in full effect. One fact remains
true: AMP is not a ranking factor. In a Google+ Hangout, John Mueller,
Webmaster Trends Analyst for Google, confirmed this statement.
While I understand that AMP is
not a ranking factor (yet!), AMP does affect clicks, impressions, and user
experience, which in turn affects SEO.
AMP is only seen in the News carousel right now. Google is currently holding
the News carousel above-the-fold on mobile, therefore, pushing down organic
search results. So, if you’re not on the AMP bandwagon, then you’re most likely
going to see a drop in clicks, impressions, and user engagement.
I’ve got more interesting news:
Jeff Jarvis explained the carousel won’t always be there. But, with the
announcement of Mobilegeddon last year, mobile friendliness is a ranking
factor. I saw sites that did not pass the Google Mobile-Friendly Test plummet
from top positions to no man’s land. And, with Google hinting at another mobile
update in May, I assume AMP will become more important.
On top of creating AMP-optimized
content, publishers should focus attention on all other elements
above-the-fold:
Headline: Create an actionable, engaging
headline by removing the fluff.
Hero image: Design a compelling, original
hero image.
First 100 words: The intro copy is the lead
engagement to get the reader to click.
The following markup is a decent
starting point or boilerplate. Copy this and save it to a file with a .html
extension.
<!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>
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>
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>:
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
Add the following to the non-AMP page:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
And this to the AMP page
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">