Jacob Lial from Greenlane Search Marketing presents on AMP (Accelerated Mobile Pages) - December 2015. Learn about what AMP means to SEO, Google, and mobile site improvements to benefit your users. Visit ampproject.org to learn more about Google's big 2016 focus.
1. Get AMP’ed for AMP!
AMPlify your clients!
Other AMP puns!
2. AMP puns
1. AMPlify your clients
2. Get AMP’ed for AMP
3. TrAMPle your mobile competition
4. SAMPle AMPle AMP - Jon
5. rAMPing up: Getting Ready for Amplified Mobile Pages - Ant
6. clAMPing Down on Amplified Mobile Pages - Ant
7. Become the chAMPion of AMP - Jake
3. Table of contents
1. What is AMP
2. Where AMP came from
3. Intro to AMP HTML
4. Site speed comparison
5. Impact on SERP
6. When & where our clients can use it
7. Advertisements
8. Limitations
9. Live Demo
10. Questions
4. ampproject.org
The AMP Project is an initiative started by Google &
Twitter to improve the mobile web and enhance the
distribution ecosystem. AMP HTML embraces the
open web, so you can be sure that your content
appears correctly across all modern browsers and
apps. Pages are published normally to your site,
using standard tools, and are accelerated via
caches created by Google and others.
AMP utilizes its own proxy based CDN to deliver
content to users with very little delay.
Quick Demo Video
https://www.ampproject.org/static/video/with_titlecar
ds_v4_464x826.mp4
5. In other words…
AMP is a light, fast and simple web
page. Using Google’s CDN it will
“prefetch” the site so the page loads
instantly on users’ mobile devices.
6. Origins of AMP
Mobile devices have revolutionized the way the majority of users access the
web. Publishers worldwide use the mobile web to deliver content to these users
but the experience is less than optimal. This is due to multiple issues (like site
speed) that impact how long users stay on the page. On Oct 7th, Google
announced the open source initiative called Accelerated Mobile Pages. Its main
goal, to improve the mobile web experience. They want webpages with rich
content like video, animations and graphics to work alongside smart ads, and to
load instantaneously. There are collaborations with Twitter, Pinterest,
WordPress.com, Chartbeat, Parse.ly, Adobe Analytics and LinkedIn.
7. AMP HTML
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-
scale=1">
<style>body {opacity: 0}</style><noscript><style>body
{opacity:1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello, has anyone seen Keith’s mustache?</body>
</html>
These AMPs will need to be written in AMP HTML. This
subset of HTML is very lean, some tags are not supported
and some tags are changed to AMP-specific tags.
For example the <img> tag is changed to <amp-img> which
provides full srcset support even in browsers that down
support it yet.
9. SERP Impact
There is still very little information
about how this will impact the SERPs
once it is live but what we can tell
from the demo is:
● AMPs appear above organic
pages in a carousel. (Allegedly)
● This should only impact mobile
SERPs.
Although AMP is made for mobile you
can experience these pages on
desktop. There is a desktop extension
for chrome that will auto-”magically”
load AMP pages when available.
Desktop AMP Extension
10. Client Usage
Clients using Wordpress will be able to easily migrate current pages to
AMP with the help of this plugin. For clients not on wordpress currently
there is no easy transition for them. AMP pages should only be used for
articles or blog posts.
WARNING: This plugin is still in early development and should be tested
multiple times to ensure the AMPs are formatted correctly.
11. Advertisements
Some clients keep the lights on and food in
the fridge from ad revenue. Since a lot of ad
placement providers rely on JavaScript this
can be troublesome. Currently, there are a
handful of providers that are being
supported:
● A9
● AdReactor
● AdSense
● AdTech
● Doubleclick
12.
13. Current Limitations
Dec 2015
AMP is not here to replace mobile friendly sites, nor is it a way to
entirely beat site speed issues. There are limitations (examples
listed below):
1. Conditional HTML comments are not allowed.
2. All attributes starting with ‘on’ are disallowed.
3. ‘Javascript:’ schema is disallowed.
4. Style rules must be below 50KB
5. All styles must be inline
6. No developer-written or third party JavaScript
7. No input elements of any kind, including standard input and text area
8. No external style sheets and only one style tag in the document head
9. Keywords should not include ‘unsafe-inline’ and ‘unsafe-eval’