Amped for AMP at Pubcon Las Vegas 2016

Post on 20-Mar-2017

391 views 1 download

Transcript of Amped for AMP at Pubcon Las Vegas 2016

#pubcon

Amped for AMP

Presented by:Scott Hendison

#pubcon

About Me

#pubcon

AMP• What is AMP?• History & Timeline• AMP rules• Tracking & Conversion • Implementation (WP)

#pubcon

What is AMP?

#pubcon

#pubcon

#pubcon

#pubcon

It‘s just HTML with restrictions, comprised of three components...

#pubcon

1. AMP HTML

#pubcon

2. The AMP JS library

#pubcon

3. AMP Cache

#pubcon

History & Timeline

#pubcon

January 20, 2016

#pubcon

January 28 2016

#pubcon

January 29, 2016

#pubcon

February 23, 2016

#pubcon

March 1, 2016

#pubcon

March 1, 2016

#pubcon

Logo Specs - Rich Snippets For Articles Documentation

#pubcon

https://developers.google.com/search/docs/data-types/articles

#pubcon

https://developers.google.com/search/docs/data-types/articles

#pubcon

https://developers.google.com/search/docs/data-types/articles

#pubcon

Jun 23, 2016

&

#pubcon

July 19, 2016

#pubcon

August 2, 2016

#pubcon

August 2, 2016

#pubcon

August 12th, 2016

#pubcon

August 12th, 2016

#pubcon

August 29, 2016 - goo.gl/kCcEBP

#pubcon

August 31, 2016 - goo.gl/kCcEBP1. Content must be published using (AMP)

2. Must include structured data markup

3. Must be pushed to Google via Atom XML feed

#pubcon

September 27, 2016

#pubcon

#pubcon

1. AMP HTML

#pubcon

<!doctype html>

#pubcon

<html amp lang="en">

#pubcon

<head> and <body> tags

#pubcon

<head><meta charset="utf-8">

#pubcon

<title>Page Title</title>

#pubcon

<html > or ⚡ <html amp> tag

#pubcon

<link rel="canonical" href="http://musthave.com/

even-if-page-is-amp/" />

#pubcon

<meta name="viewport" content="width=device-

width,minimum-scale=1">

#pubcon

<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>

#pubcon

LAST before </head>...

#pubcon

<script async src=https://cdn.ampproject.org/v0.js

></script>

#pubcon

#2. The AMP JS library

#pubcon

#pubcon

Controls the entire load chain

#pubcon

<img> is now <amp-img>

#pubcon

Layout is given to the browser before the assets

even load...

#pubcon

3rd party content and anything below the fold will

load last

#pubcon

3. AMP Cache

#pubcon

Google owns this SERP

#pubcon

People are not on your URL

#pubcon

#pubcon

https://www.google.com/amp/amp.timeinc.net/fortune/2016/10/09/obama-hurricane-ferderal-aid

#pubcon

Use of AMP Cache is *not* optional

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

So Google sorta owns the web

- but at least it‘s fast.

#pubcon

Conversions

#pubcon

https://goo.gl/d2mFw3

#pubcon

https://goo.gl/d2mFw3

#pubcon

https://goo.gl/d2mFw3

#pubcon

https://goo.gl/d2mFw3

#pubcon

https://goo.gl/d2mFw3

#pubcon

https://goo.gl/d2mFw3

#pubcon

https://goo.gl/d2mFw3

#pubcon

https://goo.gl/d2mFw3

#pubcon

https://goo.gl/d2mFw3

#pubcon

https://goo.gl/d2mFw3

#pubcon

https://goo.gl/d2mFw3

#pubcon

https://goo.gl/d2mFw3

#pubcon

https://goo.gl/d2mFw3

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

Add /amp to posts

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

AMP Toolbox - goo.gl/GzQeou

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

AMP Toolbox - goo.gl/GzQeou

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

AMP Themes & Frameworks

#pubcon

https://amptemplates.com/

#pubcon

#pubcon

#pubcon

#pubcon

http://ampwptools.com/

#pubcon

http://ampwptools.com/

#pubcon

#pubcon

#pubcon

#pubcon

#pubcon

http://ampwptools.com/

#pubcon

Take Aways• AMP is the future • The future is here• Not a ranking signal - YET• Learn & Implement• Don‘t miss this boat!

• C

#pubcon

Resources• AMP Project - https://www.ampproject.org/ • AMP Blog - https://amphtml.wordpress.com/• AMP By Example - https://ampbyexample.com/ • Google AMP survey – http://goo.gl/i9hLxM • SE Land – http://searchengineland.com/library/google/google-amp-project • SE Roundtable - https://www.seroundtable.com/tag/amp

• C

#pubcon

Scott Hendisonscott@SearchCommander.com

Thank You

Slides can be downloaded here - https://goo.gl/ZFRov5