Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@badams #SEMrushlive
Google AMP
Barry Adams
15 December 2016
@badams #SEMrushlive
Barry Adams
• Doing SEO since 1998
• Founder of Polemic Digital
• Co-Chief at State of Digital
@badams #SEMrushlive
What is AMP?
@badams #SEMrushlive
Accelerated Mobile Pages
• Alternative versions of your web pages;
 Built specifically for speed & m...
@badams #SEMrushlive
Why AMP?
Top 1000 mobile apps vs Top 1000 mobile web
@badams #SEMrushlive
App = Engagement / Web = Discovery
@badams #SEMrushlive
AMP aims to change that
@badams #SEMrushlive
Anatomy of an Accelerated Mobile Page
@badams #SEMrushlive
HTML AMP declaration
@badams #SEMrushlive
Integrated structured data
@badams #SEMrushlive
In-line CSS
@badams #SEMrushlive
AMP-specific JavaScript files
@badams #SEMrushlive
AMP-analytics
@badams #SEMrushlive
Key elements of AMP
• Uses standard HTML5
Will render in most browsers
• Limited external dependenci...
@badams #SEMrushlive
Google AMP Cache
Web server
Edge server
Edge server
Edge server
Edge server
Edge server
Edge server
E...
@badams #SEMrushlive
https://developers.google.com/amp/cache/
@badams #SEMrushlive
Caching & Pre-rendering
Website A
.. …. …. …. ..
…. …. …. ..
Website B
.. …. …. …. ..
…. …. …. ..
Web...
@badams #SEMrushlive
Caching & Pre-rendering
Website A
.. …. …. …. ..
…. …. …. ..
Website B
.. …. …. …. ..
…. …. …. ..
Web...
@badams #SEMrushlive
AMP in SERPs
@badams #SEMrushlive
AMP vs Mobile Web
@badams #SEMrushlive
AMP Education
@badams #SEMrushlive
“Expanded Exposure”
“Later this year, all types of sites that create AMP pages will
have expanded exp...
@badams #SEMrushlive
Implementing AMP
• WordPress;
 AMP & PageFrog plugins
• Other platforms:
 Forthcoming plugins/exten...
@badams #SEMrushlive
AMP by Example
https://ampbyexample.com/
@badams #SEMrushlive
@badams #SEMrushlive
AMP Validator
https://validator.ampproject.org
@badams #SEMrushlive
AMP Validator Plugin
http://bada.ms/ampvalidatorchrome
@badams #SEMrushlive
What works in AMP now:
• Analytics
• Ads (limited)
• Videos
• GIF & WebP animations
• Carousels
• Soc...
@badams #SEMrushlive
What doesn’t work (yet)
• Full end-to-end ecommerce
• Most JS-based interactivity
@badams #SEMrushlive
What’s Coming
AMP + Progressive Web Apps
@badams #SEMrushlive
Further Reading…
• https://www.ampproject.org/
• https://twitter.com/amphtml
• https://ampbyexample.c...
@badams #SEMrushlive
Thank You
Follow me on Twitter:
@badams
Email me your questions:
barry@polemicdigital.com
Upcoming SlideShare
Loading in …5
×

Google AMP - #SEMrushlive

932 views

Published on

Slides from my talk at the SEMrushlive online event in December 2016, where I spoke about Google AMP - Accelerated Mobile Pages.

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Google AMP - #SEMrushlive

  1. 1. @badams #SEMrushlive Google AMP Barry Adams 15 December 2016
  2. 2. @badams #SEMrushlive Barry Adams • Doing SEO since 1998 • Founder of Polemic Digital • Co-Chief at State of Digital
  3. 3. @badams #SEMrushlive What is AMP?
  4. 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. 5. @badams #SEMrushlive Why AMP? Top 1000 mobile apps vs Top 1000 mobile web
  6. 6. @badams #SEMrushlive App = Engagement / Web = Discovery
  7. 7. @badams #SEMrushlive AMP aims to change that
  8. 8. @badams #SEMrushlive Anatomy of an Accelerated Mobile Page
  9. 9. @badams #SEMrushlive HTML AMP declaration
  10. 10. @badams #SEMrushlive Integrated structured data
  11. 11. @badams #SEMrushlive In-line CSS
  12. 12. @badams #SEMrushlive AMP-specific JavaScript files
  13. 13. @badams #SEMrushlive AMP-analytics
  14. 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. 15. @badams #SEMrushlive Google AMP Cache Web server Edge server Edge server Edge server Edge server Edge server Edge server Edge server
  16. 16. @badams #SEMrushlive https://developers.google.com/amp/cache/
  17. 17. @badams #SEMrushlive Caching & Pre-rendering Website A .. …. …. …. .. …. …. …. .. Website B .. …. …. …. .. …. …. …. .. Website C .. …. …. …. .. …. …. …. .. Google AMP Cache Pre-render
  18. 18. @badams #SEMrushlive Caching & Pre-rendering Website A .. …. …. …. .. …. …. …. .. Website B .. …. …. …. .. …. …. …. .. Website C .. …. …. …. .. …. …. …. .. Google AMP Cache Pre-render Defeats Ad Blockers!
  19. 19. @badams #SEMrushlive AMP in SERPs
  20. 20. @badams #SEMrushlive AMP vs Mobile Web
  21. 21. @badams #SEMrushlive AMP Education
  22. 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. 23. @badams #SEMrushlive Implementing AMP • WordPress;  AMP & PageFrog plugins • Other platforms:  Forthcoming plugins/extensions  Manual effort
  24. 24. @badams #SEMrushlive AMP by Example https://ampbyexample.com/
  25. 25. @badams #SEMrushlive
  26. 26. @badams #SEMrushlive AMP Validator https://validator.ampproject.org
  27. 27. @badams #SEMrushlive AMP Validator Plugin http://bada.ms/ampvalidatorchrome
  28. 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. 29. @badams #SEMrushlive What doesn’t work (yet) • Full end-to-end ecommerce • Most JS-based interactivity
  30. 30. @badams #SEMrushlive What’s Coming AMP + Progressive Web Apps
  31. 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. 32. @badams #SEMrushlive Thank You Follow me on Twitter: @badams Email me your questions: barry@polemicdigital.com

×