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.

1. ACCELERATED MOBILE PAGES
WORDCAMP KANSAS CITY 2016

2. JEREMY GREEN
@GREENHORNET79

3. MORE SEARCHES
ON MOBILE THAN
DESKTOP

4. THE PROBLEM

5. ‣Slow loading
‣Non-responsive
‣Content shifting

6. PUBLISHERS

7. 40% OF PEOPLE ABANDON A
WEBSITE THAT TAKES MORE
THAN 3 SECONDS TO LOAD.
Kissmetrics
STATS

8. ‣Conversion rates suffer
‣Sites become bogged down with ads
‣Need to generate revenue to stay in business

9. THE SOLUTION

10. GOOGLE AMP

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. 2 PRIMARY GOALS

13. SPEED!

15. 4X FASTER
10X LESS DATA

16. USER EXPERIENCE

17. BEFORE

18. AFTER

19. ‣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

20. SERPS

23. ‣The “Carousel”
‣Includes thumbnail, title, and publish time
‣Swipe through results

24. 125 MILLION
INDEXED AMP
PAGES

25. WHAT IS AMP?

26. ‣Open source initiative that aims to provide
mobile optimized content
‣Subset of HTML5
‣3 parts: AMP HTML, AMP JS, Google AMP
cache

27. AMP HTML

28. ‣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)

29. <amp-social-share type=“twitter">
</amp-social-share>

30. AMP JS

31. ‣Ensures fast rendering of AMP HTML pages
‣Manages resource loading
‣Implements all of AMP’s best performance
practices

32. ‣All external scripts are async
‣Static resource sizing
‣CSS portion control
‣Resource Prioritization: Downloads ads with
lower priority

33. GOOGLE AMP
CACHE

34. ‣Delivers the AMP HTML pages
‣Lives on Google’s CDN
‣Usually updates within seconds

35. GETTING STARTED

36. ‣https://wordpress.org/plugins/amp/

37. ‣Install WordPress AMP plugin
‣Generates AMP versions for all posts
‣*Pages and archives not currently supported

38. VALIDATE

39. ‣In Chrome, go to URL and add
#development=1 to the end
‣Open Chrome Dev Tools
‣Check console for validation errors or messages

41. STYLING

42. ‣https://wordpress.org/plugins/glue-for-yoast-seo-amp/

45. SEARCH CONSOLE

48. IS AMP FOR ME?

49. ‣Is it news related content?
‣Do you publish regularly?
‣Are you on WordPress?

50. YES!

51. OTHER CONTENT?

52. RESOURCES

53. ‣https://amphtml.wordpress.com/2016/05/16/amp-at-google-io/

54. ‣https://www.ampproject.org/roadmap/

55. ‣https://www.ampproject.org/roadmap/

56. ‣https://deliciousbrains.com/amp-wordpress-google-
accelerated-mobile-pages/

57. QUESTIONS?

58. JEREMY GREEN
@GREENHORNET79