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.

AMPed SEO with Mike Arnesen & SEMpdx

556 views

Published on

We've known that site speed is important for quite some time now, but what if it's a challenge you're still struggling with? It's bad enough that the majority of users say they'll abandon a site if it takes longer than 3 seconds to load, but poor site speed can have an adverse effect on our SEO as well.

Accelerated Mobile Pages (AMP) to the rescue! At the end of last year, voices at Google said that 2016 was going to be all about AMP and true to their word Google just announced that "later this year, all types of sites that create AMP pages will have expanded exposure across the entire Google Mobile Search results page".

So we know that this AMP thing is important, but how do we get started with it? What actually makes an AMP implementation different from having a great mobile experience on your standard site? What issues do folks need to look out for?

I this talk I gave for Portland's SEMpdx, I gave a detailed overview of AMP, dug into its importance to web marketing and SEO, and provided resources for people to get started with.

Published in: Technology
  • Be the first to like this

AMPed SEO with Mike Arnesen & SEMpdx

  1. 1. Accelerated Mobile Pages & SEO PLUG IN TO AMP
  2. 2. Founder & CEO @ UpBuild MIKE ARNESEN
  3. 3. bit.ly/serious-ampage GET THIS DECK!
  4. 4. @Mike_Arnesen upbuild.io ▸ AMP: Accelerated Mobile Pages ▸ UX: User Experience ▸ JS: JavaScript ▸ JSON: JavaScript Object Notation ▸ CSS: Cascading Style Sheets ▸ Cache: To store (a webpage) for future use GLOSSARY
  5. 5. @Mike_Arnesen upbuild.io ▸ Pre-render: To process (a webpage) in advance ▸ Native Apps: Downloadable apps for iOS and Android ▸ Progressive Web Apps: Browser-based app experiences ▸ iFrame: A tag used to display another page’s content on the page you’re on. ▸ SEO: Get on my level GLOSSARY
  6. 6. Take it from the top WHY AMP?
  7. 7. MOBILE WEB USE WILL ONLY CONTINUE 
 TO GROW There are more mobile devices than people ind.pn/1xlKiif
  8. 8. MOBILE WEB USE WILL ONLY CONTINUE 
 TO GROW 60%+ searches are performed on mobile selnd.com/2aJcPv1
  9. 9. SPEED REALLY MATTERS TO YOUR USERS 40% of users bail after 3+ seconds of load time bit.ly/1Bt0Ojx
  10. 10. SPEED REALLY MATTERS TO YOUR USERS Users expect sites to load in 2 seconds or less bit.ly/1Bt0Ojx
  11. 11. @Mike_Arnesen upbuild.io ▸ Webpage complexity ▸ Abundant HTTP requests ▸ Ads from 3rd parties ▸ Web host performance ▸ Analytics scripts & beacons WHY SO SLOW?
  12. 12. @Mike_Arnesen upbuild.io ▸ Webpage complexity ▸ Abundant HTTP requests ▸ Ads from 3rd parties ▸ Web host performance ▸ Analytics scripts and beacons WHY SO SLOW?
  13. 13. @Mike_Arnesen upbuild.io “FAST IS BETTER THAN SLOW” From Google’s, “10 Truths” bit.ly/1x24t2P
  14. 14. Success is giving Google what it wants SO WHAT’S THE ANSWER?
  15. 15. @Mike_Arnesen upbuild.io ▸ Mobile web reach is 2.5x 
 the reach of native apps ▸ Mobile users spend 86% 
 of their time in apps ▸ 80% of that pie is Facebook, YouTube, and Facebook Messenger. NATIVE APPS
  16. 16. @Mike_Arnesen upbuild.io ▸Progressive web apps are the likely successor to Native Apps. WEB APPS
  17. 17. @Mike_Arnesen upbuild.io ▸Progressive web apps are the likely successor to Native Apps. WEB APPS I’M EMBARRASSED FOR YOU, YELP
  18. 18. @Mike_Arnesen upbuild.io ▸Elegant and adaptable but potentially slow. RESPONSIVE
  19. 19. @Mike_Arnesen upbuild.io ▸Elegant and adaptable but potentially slow. RESPONSIVE LIKE, REALLY SLOW.
  20. 20. Google’s Answer is AMP
  21. 21. @Mike_Arnesen upbuild.io "AMP STANDS FOR ACCELERATED MOBILE PAGES, WHICH IS KIND OF STUPID AND I’M NEVER GOING TO SAY IT AGAIN.” Malte Ubl 
 AMP’s Tech Lead
  22. 22. @Mike_Arnesen upbuild.io “PAY ATTENTION TO AMP. IT’S GOING TO BE REALLY BIG. FIGURE OUT WITH YOUR DEVELOPERS HOW TO IMPLEMENT IT.” Gary Illyes
 Google Webmaster Trends Analyst
  23. 23. @Mike_Arnesen upbuild.io ▸Speed will only become more of a priority ▸Mobile web usage will only grow SO WHY AMP?
  24. 24. Also, AD MONEY
  25. 25. “AD BLOCKERS ARE A SYMPTOM OF A DEGRADED MOBILE EXPERIENCE CAUSED BY ADVERTISING”
  26. 26. “AD BLOCKERS ARE A SYMPTOM OF SHITTY ADVERTISING.”
  27. 27. Will AMP ever be a ranking signal? HECK. YES.
  28. 28. @Mike_Arnesen upbuild.io “CONTENT IS KING 
 AND UX IS QUEEN. 
 NO COMPROMISES.” Malte Ubl
  29. 29. There’s no going back THE TWILIGHT EFFECT
  30. 30. There’s no going back THE TWILIGHT EFFECT
  31. 31. @Mike_Arnesen upbuild.io To reduce the time content takes to get to a user's 
 mobile device THE MISSION
  32. 32. @Mike_Arnesen upbuild.io 150 million pages indexed from 650,000 domains. ADOPTION
  33. 33. What IS Amp? UNDER THE HOOD
  34. 34. @Mike_Arnesen upbuild.io an HTML Specification. AMP IS
  35. 35. @Mike_Arnesen upbuild.io
  36. 36. @Mike_Arnesen upbuild.io an Open Source Project. AMP IS
  37. 37. @Mike_Arnesen upbuild.io Report Bugs & Contribute Code Join the Slack Channel
  38. 38. @Mike_Arnesen upbuild.io awesomely fast. AMP IS
  39. 39. @Mike_Arnesen upbuild.io awesomely fast. AMP IS Like, 711ms-fast!
  40. 40. @Mike_Arnesen upbuild.io faster than fast; it’s instant. AMP IS
  41. 41. News publishers only Immediate ad support Menus supported Forms form supported Product/recipe/review sites Global rollout New releases weekly EVOLUTION OF AMP
  42. 42. How do Accelerated Mobile Pages WORK?
  43. 43. GOOGLE CACHED
 CDN.AMPPROJECT.ORG AMP VIEWER
 GOOGLE.COM/AMP HOSTED HTML VERSION ARE WE AWARE OF AMP? REL=AMPHTML/REL=CANONICAL FRAME TO AMP HTML VERSION N Y
  44. 44. @Mike_Arnesen upbuild.io ▸All AMP is HTML ▸Not all HTML is AMP AMP HTML
  45. 45. @Mike_Arnesen upbuild.io
  46. 46. @Mike_Arnesen upbuild.io ▸No external stylesheets (i.e., CSS) ▸50kb limit on inline stylesheets ▸Width/height must be specified ▸AMP-specific tags keep you in the fast lane ▸No resizing above-the-fold (i.e., in-viewport) A STRICTER HTML
  47. 47. @Mike_Arnesen upbuild.io ▸<amp-img> (built-in) ▸<amp-video> (built-in) ▸<amp-anim> (requires amp-anim) ▸<form> (requires amp-form) ▸<amp-sidebar> (requires amp-sidebar) ▸<amp-accordion> (requires amp-accordion) ▸<amp-carousel> (requires amp-carousel) AMP-SPECIFIC TAGS
  48. 48. @Mike_Arnesen upbuild.io via amp-ad/amp-embed ▸ AdSense (duh) ▸ Criteo ▸ Doubleclick ▸ Taboola ▸ Outbrain (not so much) …and tons more: bit.ly/2e6q2Cl ADS
  49. 49. @Mike_Arnesen upbuild.io ▸amp-analytics ▸amp-pixel ANALYTICS
  50. 50. @Mike_Arnesen upbuild.io via amp-analytics ▸ AMP can send data to 
 almost any analytics platform. ▸ One measurement method 
 to rule them all. ANALYTICS
  51. 51. @Mike_Arnesen upbuild.io Create a new GA Property for your AMP data. ANALYTICS
  52. 52. @Mike_Arnesen upbuild.io Analytics tracking is configured in JSON. ANALYTICS
  53. 53. @Mike_Arnesen upbuild.io Analytics tracking is configured in JSON. ANALYTICS IT’S TIME 
 FOR MARKETERS 
 TO LEARN TO CODE
  54. 54. @Mike_Arnesen upbuild.io Special scripts enable 
 3rd-party content. ▸ amp-youtube ▸ amp-twitter ▸ amp-pinterest ▸ amp-instagram ▸ amp-social-share ▸ amp-lightbox COMPONENTS
  55. 55. @Mike_Arnesen upbuild.io via <amp-iframe> ▸ Include the amp-iframe component script ▸ Use for non-supported content ▸ iframes must be at least 600px away from the top AND THE REST
  56. 56. @Mike_Arnesen upbuild.io via <amp-iframe> ▸ Include the amp-iframe component script ▸ Use for non-supported content ▸ iframes must be at least 600px away from the top AND THE REST iframes always suck.
  57. 57. But what if…? AMP FAQS
  58. 58. Does AMP work on Bing, Yahoo, Yandex, DuckDuckGo, etc. NO
  59. 59. Does AMP work on Bing, Yahoo, Yandex, DuckDuckGo, etc. NO WELL, ACTUALLY…
  60. 60. Do we need AMP in order to be Fast? NO
  61. 61. Do you need to set up your entire site with AMP? NO
  62. 62. Can I use webpage elements that don’t have supported AMP extensions? YES
  63. 63. Can my website be 
 100% AMP? YES
  64. 64. Does AMP need to live in a special sub-folder? NO
  65. 65. Can you use custom fonts? YES
  66. 66. Can you use custom fonts? YES fast.fonts.net fonts.googleapis.com
  67. 67. Things you may have heard MISCONCEPTIONS
  68. 68. “Browser caching makes AMP super fast!” FALSE
  69. 69. “AMP delivers pages in a matter of SECONDS!” FAIL
  70. 70. Getting Started with AMP RESOURCES
  71. 71. @Mike_Arnesen upbuild.io ampproject.org VISIT THE SITE
  72. 72. @Mike_Arnesen upbuild.io WATCH SOME VIDEOS youtu.be/lBTCB7yLs8Y youtu.be/cfekj564rs0 youtu.be/WrpkFROqR0Q
  73. 73. @Mike_Arnesen upbuild.io ▸ WordPress: wordpress.org/plugins/amp/ + wordpress.org/plugins/glue-for-yoast-seo-amp/ ▸ Drupal: www.drupal.org/project/amp ▸ Magento: magentocommerce.com/magento-connect/ accelerated-mobile-pages-amp.html ▸ Joomla: weeblr.com/joomla-accelerated-mobile-pages/ wbamp GET YOUR HANDS DIRTY
  74. 74. @Mike_Arnesen upbuild.io Add #development=1 to AMP page URLs VALIDATE & LEARN
  75. 75. @Mike_Arnesen upbuild.io VALIDATE & LEARN Add #development=1 to AMP page URLs
  76. 76. @Mike_Arnesen upbuild.io Get the AMP Validator Chrome Extension: bit.ly/2dwTTyC VALIDATE & LEARN
  77. 77. @Mike_Arnesen upbuild.io Head to validator.ampproject.org VALIDATE & LEARN
  78. 78. @Mike_Arnesen upbuild.io YOUR MILEAGE MAY VARY Standard HTML Version Hosted AMP Version Cached AMP Version
  79. 79. The rest is up to you NEXT STEPS
  80. 80. @Mike_Arnesen upbuild.io THE PROS & CONS
  81. 81. @Mike_Arnesen upbuild.io ▸ Mobile UX is only becoming more important THE PROS
  82. 82. @Mike_Arnesen upbuild.io ▸ Mobile UX is only becoming more important THE PROS
  83. 83. @Mike_Arnesen upbuild.io ▸ Mobile UX is only becoming more important THE PROS MANY SEO RANKING FACTORS ARE STRAIGHT-UP UX BEST PRACTICES
  84. 84. @Mike_Arnesen upbuild.io ▸ Mobile UX (AKA, SEO) is only becoming more important ▸ AMP provides a fantastic experience to mobile users THE PROS
  85. 85. @Mike_Arnesen upbuild.io ▸ Mobile UX (AKA, SEO) is only becoming more important ▸ AMP provides a fantastic experience to mobile users ▸ The AMP symbol will(has?) become the new “mobile-friendly” in Google. THE PROS
  86. 86. @Mike_Arnesen upbuild.io ▸ Mobile UX (AKA, SEO) is only becoming more important ▸ AMP provides a fantastic experience to mobile users ▸ The AMP symbol will(has?) become the new “mobile-friendly” in Google. ▸ It’s your only way into Top Stories on mobile. THE PROS
  87. 87. @Mike_Arnesen upbuild.io ▸ The project is still evolving THE CONS
  88. 88. @Mike_Arnesen upbuild.io ▸ The project is still evolving THE CONS THEY DIDN’T EVEN LAUNCH WITH FORMS!
  89. 89. @Mike_Arnesen upbuild.io ▸ The project is still evolving ▸ Things break THE CONS
  90. 90. @Mike_Arnesen upbuild.io ▸ The project is still evolving ▸ Things break ▸ Proprietary and homegrown CMSes are expensive to change THE CONS
  91. 91. @Mike_Arnesen upbuild.io ▸ The project is still evolving ▸ Things break ▸ Proprietary and homegrown CMSes are expensive to change THE CONS #OPENSOURCE 4EVER
  92. 92. @Mike_Arnesen upbuild.io ▸ The project is still evolving ▸ Things break ▸ Proprietary and homegrown CMSes are expensive to change ▸ It’s Google-only THE CONS
  93. 93. @Mike_Arnesen upbuild.io ▸ The project is still evolving ▸ Things break ▸ Proprietary and homegrown CMSes are expensive to change ▸ It’s Google-only THE CONS BUT, SPEED IS SPEED
  94. 94. CLOSING THOUGHTS
  95. 95. Be one of the ten blue links in POSITION ZERO
  96. 96. CONTENT IS KING & UX IS QUEEN. NO COMPROMISES.
  97. 97. bit.ly/serious-ampage GET THE DECK THANK YOU! Find us at upbuild.io

×