1.
@badams #SEMrushlive
Google AMP
Barry Adams
15 December 2016

2.
@badams #SEMrushlive
Barry Adams
• Doing SEO since 1998
• Founder of Polemic Digital
• Co-Chief at State of Digital

3.
@badams #SEMrushlive
What is AMP?

4.
@badams #SEMrushlive
Accelerated Mobile Pages
• Alternative versions of your web pages;
 Built specifically for speed & mobile
• Mobile first;
 Mobile only!
• New standard;
 Severely restrictive
• All or nothing;
 It either validates or it doesn’t

5.
@badams #SEMrushlive
Why AMP?
Top 1000 mobile apps vs Top 1000 mobile web

6.
@badams #SEMrushlive
App = Engagement / Web = Discovery

7.
@badams #SEMrushlive
AMP aims to change that

8.
@badams #SEMrushlive
Anatomy of an Accelerated Mobile Page

9.
@badams #SEMrushlive
HTML AMP declaration

10.
@badams #SEMrushlive
Integrated structured data

11.
@badams #SEMrushlive
In-line CSS

12.
@badams #SEMrushlive
AMP-specific JavaScript files

13.
@badams #SEMrushlive
AMP-analytics

14.
@badams #SEMrushlive
Key elements of AMP
• Uses standard HTML5
Will render in most browsers
• Limited external dependencies
Inline CSS, limited async JS
• Integrated Structured Data

15.
@badams #SEMrushlive
Google AMP Cache
Web server
Edge server
Edge server
Edge server
Edge server
Edge server
Edge server
Edge server

16.
@badams #SEMrushlive
https://developers.google.com/amp/cache/

17.
@badams #SEMrushlive
Caching & Pre-rendering
Website A
.. …. …. …. ..
…. …. …. ..
Website B
.. …. …. …. ..
…. …. …. ..
Website C
.. …. …. …. ..
…. …. …. ..
Google AMP Cache
Pre-render

18.
@badams #SEMrushlive
Caching & Pre-rendering
Website A
.. …. …. …. ..
…. …. …. ..
Website B
.. …. …. …. ..
…. …. …. ..
Website C
.. …. …. …. ..
…. …. …. ..
Google AMP Cache
Pre-render
Defeats Ad Blockers!

19.
@badams #SEMrushlive
AMP in SERPs

20.
@badams #SEMrushlive
AMP vs Mobile Web

21.
@badams #SEMrushlive
AMP Education

22.
@badams #SEMrushlive
“Expanded Exposure”
“Later this year, all types of sites that create AMP pages will
have expanded exposure across the entire Google Mobile
Search results page, like e-commerce, entertainment,
travel, recipe sites and many more. ”
Source: https://webmasters.googleblog.com/2016/09/what-is-amp.html

23.
@badams #SEMrushlive
Implementing AMP
• WordPress;
 AMP & PageFrog plugins
• Other platforms:
 Forthcoming plugins/extensions
 Manual effort

24.
@badams #SEMrushlive
AMP by Example
https://ampbyexample.com/

25.
@badams #SEMrushlive

26.
@badams #SEMrushlive
AMP Validator
https://validator.ampproject.org

27.
@badams #SEMrushlive
AMP Validator Plugin
http://bada.ms/ampvalidatorchrome

28.
@badams #SEMrushlive
What works in AMP now:
• Analytics
• Ads (limited)
• Videos
• GIF & WebP animations
• Carousels
• Social Sharing
• Basic Forms
• Basic paywalls
• iframes
• Sidebar
• Notifications
• Live updates
• A/B Testing

29.
@badams #SEMrushlive
What doesn’t work (yet)
• Full end-to-end ecommerce
• Most JS-based interactivity

30.
@badams #SEMrushlive
What’s Coming
AMP + Progressive Web Apps

31.
@badams #SEMrushlive
Further Reading…
• https://www.ampproject.org/
• https://twitter.com/amphtml
• https://ampbyexample.com/
• https://developers.google.com/amp/cache/
• https://github.com/ampproject/amphtml
• https://groups.google.com/forum/#!forum/amphtml-discuss
• https://stackoverflow.com/questions/tagged/amp-html

32.
@badams #SEMrushlive
Thank You
Follow me on Twitter:
@badams
Email me your questions:
barry@polemicdigital.com