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.

Accelerated Mobile Pages - WordCamp Kansas City

395 views

Published on

AMP is an open spec for lightweight, mobile-friendly pages. You can use it as the mobile view on your site, and having it enabled actually allows the AMP version of your page to be used by Google for search previews and in other places on their platform. In addition, many SEO experts recommend adopting AMP as Google is likely to reward those who do in terms of rankings.

You will learn why AMP is important, how to easily add it to your WordPress site, and different techniques you can use to customize it to your specific needs.

Published in: Technology
  • Interesting! Many publishers are getting on board AMPs which makes this the future of mobile browsing. I am sharing an article on "Accelerated Mobile Pages (AMP) for Mobile-First Generation" https://goo.gl/bonFVZ
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Accelerated Mobile Pages - WordCamp Kansas City

  1. 1. ACCELERATED MOBILE PAGES WORDCAMP KANSAS CITY 2016
  2. 2. JEREMY GREEN @GREENHORNET79
  3. 3. MORE SEARCHES ON MOBILE THAN DESKTOP
  4. 4. THE PROBLEM
  5. 5. ‣Slow loading ‣Non-responsive ‣Content shifting
  6. 6. PUBLISHERS
  7. 7. 40% OF PEOPLE ABANDON A WEBSITE THAT TAKES MORE THAN 3 SECONDS TO LOAD. Kissmetrics STATS
  8. 8. ‣Conversion rates suffer ‣Sites become bogged down with ads ‣Need to generate revenue to stay in business
  9. 9. THE SOLUTION
  10. 10. GOOGLE AMP
  11. 11. ‣Developed hand in hand with publishers, both large and small (including WordPress) ‣Open source project so anyone can contribute ‣Built for news related content (for now)
  12. 12. 2 PRIMARY GOALS
  13. 13. SPEED!
  14. 14. 4X FASTER 10X LESS DATA
  15. 15. USER EXPERIENCE
  16. 16. BEFORE
  17. 17. AFTER
  18. 18. ‣Benefits the user because they get the content they want, fast ‣Benefits the publisher because readers churn through more content, increasing opportunity ‣Benefits Google because conversion rates increase
  19. 19. SERPS
  20. 20. ‣The “Carousel” ‣Includes thumbnail, title, and publish time ‣Swipe through results
  21. 21. 125 MILLION INDEXED AMP PAGES
  22. 22. WHAT IS AMP?
  23. 23. ‣Open source initiative that aims to provide mobile optimized content ‣Subset of HTML5 ‣3 parts: AMP HTML, AMP JS, Google AMP cache
  24. 24. AMP HTML
  25. 25. ‣HTML with some restrictions for reliable performance ‣Includes extensions for building rich content beyond basic HTML ‣<amp-img>: provides full srcset support even in browsers that don’t support it (responsive images)
  26. 26. <amp-social-share type=“twitter"> </amp-social-share>
  27. 27. AMP JS
  28. 28. ‣Ensures fast rendering of AMP HTML pages ‣Manages resource loading ‣Implements all of AMP’s best performance practices
  29. 29. ‣All external scripts are async ‣Static resource sizing ‣CSS portion control ‣Resource Prioritization: Downloads ads with lower priority
  30. 30. GOOGLE AMP CACHE
  31. 31. ‣Delivers the AMP HTML pages ‣Lives on Google’s CDN ‣Usually updates within seconds
  32. 32. GETTING STARTED
  33. 33. ‣https://wordpress.org/plugins/amp/
  34. 34. ‣Install WordPress AMP plugin ‣Generates AMP versions for all posts ‣*Pages and archives not currently supported
  35. 35. VALIDATE
  36. 36. ‣In Chrome, go to URL and add #development=1 to the end ‣Open Chrome Dev Tools ‣Check console for validation errors or messages
  37. 37. STYLING
  38. 38. ‣https://wordpress.org/plugins/glue-for-yoast-seo-amp/
  39. 39. SEARCH CONSOLE
  40. 40. IS AMP FOR ME?
  41. 41. ‣Is it news related content? ‣Do you publish regularly? ‣Are you on WordPress?
  42. 42. YES!
  43. 43. OTHER CONTENT?
  44. 44. RESOURCES
  45. 45. ‣https://amphtml.wordpress.com/2016/05/16/amp-at-google-io/
  46. 46. ‣https://www.ampproject.org/roadmap/
  47. 47. ‣https://www.ampproject.org/roadmap/
  48. 48. ‣https://deliciousbrains.com/amp-wordpress-google- accelerated-mobile-pages/
  49. 49. QUESTIONS?
  50. 50. JEREMY GREEN @GREENHORNET79

×