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.

Setting AMP for Success at #DigitalOlympus


Published on

Why, when and how to easily implement AMP effectively: Steps, tools and tips.

Published in: Marketing

Setting AMP for Success at #DigitalOlympus

  1. 1. Setting AMP for Success #ampsuccess at #digitalolympus by @aleyda from @orainti
  2. 2. I’m Aleyda Solis #ampsuccess at #digitalolympus by @aleyda from @orainti
  3. 3. ORAINTI.COM @ALEYDA FB.COM/ALEYDASEOTIPS/ I Do SEO BITLY.COM/LIBROSEOALEYDA I’m Aleyda Solis I PublishI Share #ampsuccess at #digitalolympus by @aleyda from @orainti
  4. 4. I Blog I Speak I’m Featured I’m Aleyda Solis #ampsuccess at #digitalolympus by @aleyda from @orainti
  5. 5. Why & When To Implement AMP? #ampsuccess at #digitalolympus by @aleyda from @orainti
  6. 6. AMP went live almost a year ago already… #ampsuccess at #digitalolympus by @aleyda from @orainti stories-now-live-243314
  7. 7. A “simpler” HTML & CSS, using optimized JS & Google AMP Cache to serve your mobile pages #ampsuccess at #digitalolympus by @aleyda from @orainti
  8. 8. #ampsuccess at #digitalolympus by @aleyda from @orainti Mobile Responsive Non-AMP Mobile AMP To deliver a faster & safer Mobile Web experience
  9. 9. Initially released for publishers is now a 
 requirement to be included in the News Carousel #ampsuccess at #digitalolympus by @aleyda from @orainti amp-only-news-carousel-21717.html
  10. 10. Although is not a ranking factor (yet)… #ampsuccess at #digitalolympus by @aleyda from @orainti amp-canonical-ranking-23308.html
  11. 11. “AMP optimized news articles appearing within Google's Top Stories on mobile have skyrocketed” #ampsuccess at #digitalolympus by @aleyda from @orainti google-news-results-spikes
  12. 12. And not only in the News Carousels #ampsuccess at #digitalolympus by @aleyda from @orainti AMP article rich results
 Can be free-standing in the results page, or embedded in a carousel of similar result types. All AMP article rich results are also rich results. AMP non-rich results
 A basic, non-graphical search result pointing to the AMP page.
  13. 13. They are given preference over App deep links #ampsuccess at #digitalolympus by @aleyda from @orainti amp-urls-app-deep-link-urls-mobile-results-259204
  14. 14. And are being expanded, now also for image results #ampsuccess at #digitalolympus by @aleyda from @orainti amp-canonical-ranking-23308.html
  15. 15. CDNs have started to support it too #ampsuccess at #digitalolympus by @aleyda from @orainti optimization/accelerated-mobile-links/
  16. 16. As well as Ad networks #ampsuccess at #digitalolympus by @aleyda from @orainti on-the-web-will-get-better-with-amp-heres-how/
  17. 17. And although more complex functionality support for e-commerce is still in progress #ampsuccess at #digitalolympus by @aleyda from @orainti
  18. 18. e-commerce sites have started to test them too #ampsuccess at #digitalolympus by @aleyda from @orainti getting-started-with-amp-for-e-commerce/ browse-ebay-with-style-and-speed/
  19. 19. The additional organic search visibility 
 & traffic can be impressive #ampsuccess at #digitalolympus by @aleyda from @orainti
  20. 20. But there are some already well-known cons #ampsuccess at #digitalolympus by @aleyda from @orainti
  21. 21. Not showing your own URLs in the browser #ampsuccess at #digitalolympus by @aleyda from @orainti
  22. 22. This is known by the AMP team 
 and meant to be fixed #ampsuccess at #digitalolympus by @aleyda from @orainti 2017/01/13/why-amp-caches-exist/ easier-link-share-url-amp/
  23. 23. Providing what can be a over-simplified 
 mobile AMP experience when using plugins #ampsuccess at #digitalolympus by @aleyda from @orainti Mobile Responsive Non-AMP Mobile AMP <>
  24. 24. That can end-up causing this #ampsuccess at #digitalolympus by @aleyda from @orainti
  25. 25. As well as generating too many pages to handle if you have an independent mobile version #ampsuccess at #digitalolympus by @aleyda from @orainti Desktop Non-AMP Mobile AMPIndependent Mobile Non-AMP
  26. 26. #ampsuccess at #digitalolympus by @aleyda from @orainti When does it makes sense to implement AMP 
 at the moment then? You’re in the media, news industry or have a blog Your current mobile page speed sucks You can personalize AMP to have a similar UX & functionality than your current site You ideally don’t have an independent mobile version
  27. 27. Let’s Implement AMP #ampsuccess at #digitalolympus by @aleyda from @orainti
  28. 28. First verify that your content type & 
 functionality are AMP supported #ampsuccess at #digitalolympus by @aleyda from @orainti docs/reference/components es/roadmap/
  29. 29. Create your AMP HTMLs based on specifications, including the relevant structured data #ampsuccess at #digitalolympus by @aleyda from @orainti docs/get_started/create
  30. 30. Replace components & tags to be included 
 with the relevant AMP markup, such as images #ampsuccess at #digitalolympus by @aleyda from @orainti
  31. 31. Embed your AMP custom CSS inline, 
 only one stylesheet per page #ampsuccess at #digitalolympus by @aleyda from @orainti responsive/style_pages
  32. 32. You can see directly AMP implementation 
 examples & demos for the desired functionality #ampsuccess at #digitalolympus by @aleyda from @orainti
  33. 33. As well as edit & test it in the AMP Playground 
 to check if it would pass the validation #ampsuccess at #digitalolympus by @aleyda from @orainti
  34. 34. Pair your “canonical” pages with your AMP ones #ampsuccess at #digitalolympus by @aleyda from @orainti Non-AMP AMP
  35. 35. If for some reason you’re only using AMP pages, they should be tagged as your canonical ones #ampsuccess at #digitalolympus by @aleyda from @orainti Canonical AMP
  36. 36. If you have a Wordpress based site 
 you can use the official free AMP Plugin #ampsuccess at #digitalolympus by @aleyda from @orainti
  37. 37. Yoast Glue for AMP facilitates the implementation of the required markup & customization too #ampsuccess at #digitalolympus by @aleyda from @orainti
  38. 38. As well as the PageFrog plugin #ampsuccess at #digitalolympus by @aleyda from @orainti
  39. 39. The goal is to provide the most consistent user experience through your “extended” AMP pages #ampsuccess at #digitalolympus by @aleyda from @orainti Mobile Non-AMP Mobile AMP =
  40. 40. If at some point you disable them, remember 
 these need to be 301-redirected to avoid errors #ampsuccess at #digitalolympus by @aleyda from @orainti
  41. 41. #ampsuccess at #digitalolympus by @aleyda from @orainti with-amp-analytics-5595af2dcc71#.2it72dhgb It’s also critical to track them, 
 thinking on their “cross-domain” design
  42. 42. Google Analytics supports AMP through 
 the amp-analytics component #ampsuccess at #digitalolympus by @aleyda from @orainti devguides/collection/amp-analytics/
  43. 43. You can implement it via GTM too #ampsuccess at #digitalolympus by @aleyda from @orainti mobile-pages-via-google-tag-manager/
  44. 44. Once you finish, verify your implementation 
 using The OnPage AMP Checklist #ampsuccess at #digitalolympus by @aleyda from @orainti base/tutorials/amp/
  45. 45. You can additionally validate your AMP pages 
 with the AMP Project Validator #ampsuccess at #digitalolympus by @aleyda from @orainti
  46. 46. Using Chrome DevTools #ampsuccess at #digitalolympus by @aleyda from @orainti seo-10-ways-use-seo-audits-266433
  47. 47. The crawlers that already support AMP 
 validation, like SEMrush Site Audit #ampsuccess at #digitalolympus by @aleyda from @orainti
  48. 48. Or by configuring Screaming Frog using custom extraction #ampsuccess at #digitalolympus by @aleyda from @orainti
  49. 49. Monitor potential remaining errors in 
 the Google Search Console AMP Report #ampsuccess at #digitalolympus by @aleyda from @orainti
  50. 50. Prioritize to fix “critical” issues affecting 
 most & more important pages #ampsuccess at #digitalolympus by @aleyda from @orainti
  51. 51. Besides invalid code usage in AMP pages, 
 the most common issue is “content mismatch” #ampsuccess at #digitalolympus by @aleyda from @orainti webmasters/answer/6328309
  52. 52. As well as errors in structured data, 
 although this is not critical #ampsuccess at #digitalolympus by @aleyda from @orainti structured-data/testing-tool
  53. 53. You can directly see in the GSC report the pages affected & details regarding each issue #ampsuccess at #digitalolympus by @aleyda from @orainti
  54. 54. And select to validate them there directly 
 to verify in which line the problem is to fix #ampsuccess at #digitalolympus by @aleyda from @orainti search-console/amp
  55. 55. It can be a rollercoaster, although one with a positive trend if critical errors are handled #ampsuccess at #digitalolympus by @aleyda from @orainti
  56. 56. Maximizing your mobile search visibility #ampsuccess at #digitalolympus by @aleyda from @orainti
  57. 57. While providing the most possibly 
 consistent mobile user experience #ampsuccess at #digitalolympus by @aleyda from @orainti
  58. 58. Thanks! Questions? #ampsuccess at #digitalolympus by @aleyda from @orainti