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.

Introduction to Google AMP - Accelerated Mobile Pages #Pubcon

3,935 views

Published on

Slides from my Pubcon Las Vegas talk in October 2016 about Google AMP.

Published in: Internet
  • Be the first to comment

Introduction to Google AMP - Accelerated Mobile Pages #Pubcon

  1. 1. #pubcon@badams Google AMP Presented by: Barry Adams Polemic Digital
  2. 2. #pubcon@badams About Barry Adams • Dutchman in Northern Ireland • Founder of Polemic Digital • Co-Chief Editor for StateofDigital.com • Twitter ranter: @badams • Lecturer & educator
  3. 3. #pubcon@badams What is AMP https://www.ampproject.org/
  4. 4. #pubcon@badams 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. #pubcon@badams
  6. 6. #pubcon@badams HTML AMP declaration
  7. 7. #pubcon@badams Integrated structured data
  8. 8. #pubcon@badams In-line CSS
  9. 9. #pubcon@badams AMP-specific JavaScript files
  10. 10. #pubcon@badams AMP-analytics
  11. 11. #pubcon@badams Key elements of AMP • Uses standard HTML – Will render in most browsers • Limited external dependencies – Inline CSS, limited async JS • Integrated Structured Data
  12. 12. #pubcon@badams Caching & Pre-rendering Website A .. …. …. …. .. …. …. …. .. Website B .. …. …. …. .. …. …. …. .. Website C .. …. …. …. .. …. …. …. .. Google AMP Cache Pre-render Defeats Ad Blockers!
  13. 13. #pubcon@badams AMP in SERPs
  14. 14. #pubcon@badams “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
  15. 15. #pubcon@badams Implementing AMP • WordPress; – AMP & PageFrog plugins • Other platforms: – Forthcoming plugins/extensions – Manual effort
  16. 16. #pubcon@badams AMP by Example https://ampbyexample.com/
  17. 17. #pubcon@badams
  18. 18. #pubcon@badams AMP Validator https://validator.ampproject.org/
  19. 19. #pubcon@badams AMP Validator Plugin
  20. 20. #pubcon@badams What works in AMP now: • Analytics • Ads (limited) • Videos • GIF & WebP animations • Carousels • Basic Forms • Basic paywalls • iframes • Sidebar • Notifications • Live updates • A/B Testing
  21. 21. #pubcon@badams What doesn’t work (yet) • Full end-to-end ecommerce • Most JS-based interactivity
  22. 22. #pubcon@badams Further Reading… • https://www.ampproject.org/ • https://twitter.com/amphtml • https://ampbyexample.com/ • https://github.com/ampproject/amphtml • https://groups.google.com/forum/#!forum/amphtml-discuss • https://stackoverflow.com/questions/tagged/amp-html
  23. 23. #pubcon@badams Thank You Follow me on Twitter: @badams Email me your questions: barry@polemicdigital.com

×