Setting AMP for Success at #DigitalOlympus

2 169 vues

Publié le

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

Publié dans : Marketing
2 commentaires
14 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
2 169
Sur SlideShare
0
Issues des intégrations
0
Intégrations
60
Actions
Partages
0
Téléchargements
31
Commentaires
2
J’aime
14
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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 http://searchengineland.com/amp-top- 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 https://www.seroundtable.com/google- amp-only-news-carousel-21717.html
  10. 10. Although is not a ranking factor (yet)… #ampsuccess at #digitalolympus by @aleyda from @orainti https://www.seroundtable.com/google- 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 https://www.rankranger.com/blog/amp- 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 http://searchengineland.com/google-will-show- 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 https://www.seroundtable.com/google- amp-canonical-ranking-23308.html
  15. 15. CDNs have started to support it too #ampsuccess at #digitalolympus by @aleyda from @orainti https://www.cloudflare.com/website- optimization/accelerated-mobile-links/
  16. 16. As well as Ad networks #ampsuccess at #digitalolympus by @aleyda from @orainti https://amphtml.wordpress.com/2017/01/30/ads- 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 https://www.ampproject.org/es/roadmap/
  18. 18. e-commerce sites have started to test them too #ampsuccess at #digitalolympus by @aleyda from @orainti https://amphtml.wordpress.com/2016/08/22/ getting-started-with-amp-for-e-commerce/ https://amphtml.wordpress.com/2016/06/30/ 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 https://80x24.net/post/the-problem-with-amp/
  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 https://amphtml.wordpress.com/ 2017/01/13/why-amp-caches-exist/ http://www.thesempost.com/google- 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 https://m.yourname.com/post-a/?amp=1 https://m.yourname.com/post-a/ https://www.yourname.com/post-a/
  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 https://www.ampproject.org/ docs/reference/components https://www.ampproject.org/ es/roadmap/
  29. 29. Create your AMP HTMLs based on specifications, including the relevant structured data #ampsuccess at #digitalolympus by @aleyda from @orainti https://www.ampproject.org/ 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 https://www.ampproject.org/docs/guides/ responsive/style_pages
  32. 32. You can see directly AMP implementation 
 examples & demos for the desired functionality #ampsuccess at #digitalolympus by @aleyda from @orainti https://ampbyexample.com/
  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 https://ampbyexample.com/playground/
  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 https://wordpress.org/plugins-wp/amp/
  37. 37. Yoast Glue for AMP facilitates the implementation of the required markup & customization too #ampsuccess at #digitalolympus by @aleyda from @orainti https://wordpress.org/plugins-wp/glue-for-yoast-seo-amp/
  38. 38. As well as the PageFrog plugin #ampsuccess at #digitalolympus by @aleyda from @orainti https://wordpress.org/plugins-wp/pagefrog/
  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 https://medium.com/relay-media/whats-going-on- 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 https://developers.google.com/analytics/ devguides/collection/amp-analytics/
  43. 43. You can implement it via GTM too #ampsuccess at #digitalolympus by @aleyda from @orainti https://www.simoahava.com/analytics/accelerated- 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 https://en.onpage.org/knowledge- base/tutorials/amp/
  45. 45. You can additionally validate your AMP pages 
 with the AMP Project Validator #ampsuccess at #digitalolympus by @aleyda from @orainti https://validator.ampproject.org/
  46. 46. Using Chrome DevTools #ampsuccess at #digitalolympus by @aleyda from @orainti http://searchengineland.com/chromes-devtools- 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 https://support.google.com/ webmasters/answer/6328309
  52. 52. As well as errors in structured data, 
 although this is not critical #ampsuccess at #digitalolympus by @aleyda from @orainti https://search.google.com/ 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 https://search.google.com/ 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

×