O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Advanced Tips, Tricks, & Tools for Conquering AMP Problems Today By Paul Shapiro

From the SMX West Conference in San Jose, California, March 21-23, 2017. SESSION: AMP: The Next Generation. PRESENTATION: Advanced Tips, Tricks, & Tools for Conquering AMP Problems Today - Given by Paul Shapiro, @fighto - Catalyst, Director of Strategy & Innovation. #SMX #11A

  • Entre para ver os comentários

Advanced Tips, Tricks, & Tools for Conquering AMP Problems Today By Paul Shapiro

  1. 1. #SMX #11A @fighto CatalystDigital.com Advanced Tips, Tricks, & Tools for Conquering AMP Problems Today AMP Next Generation
  2. 2. #SMX #11A @fighto CatalystDigital.com Advanced Tips, Tricks, & Tools for Conquering AMP Problems Today AMP Next Generation
  3. 3. #SMX #11A @fighto CatalystDigital.com
  4. 4. #SMX #11A @fighto CatalystDigital.com There has been a lot of criticism Of AMP: Developers Users Webmasters/SEOs I want to address some of those criticisms. Maybe Google will answer some in Q&A.
  5. 5. #SMX #11A @fighto CatalystDigital.comCatalystDigital.com Common Criticism: “It’s only for News Sites and Blogs”
  6. 6. #SMX #11A @fighto CatalystDigital.com “2016 In Focus”
  7. 7. #SMX #11A @fighto CatalystDigital.com AMP Magic 8 Ball Store w/ RocketAMP *Native support for Shopify in the works.
  8. 8. #SMX #11A @fighto CatalystDigital.com
  9. 9. #SMX #11A @fighto CatalystDigital.com
  10. 10. #SMX #11A @fighto CatalystDigital.comCatalystDigital.com Common Criticism: “This is all to satisfy Google. It’s a Google product.” “Other Google products don’t have longevity, like Authorship & Google+”
  11. 11. #SMX #11A @fighto CatalystDigital.com LinkedIn AMP Example
  12. 12. #SMX #11A @fighto CatalystDigital.com Feedly AMP Example
  13. 13. #SMX #11A @fighto CatalystDigital.com Pinterest AMP Example
  14. 14. #SMX #11A @fighto CatalystDigital.com CloudFlare AMP Example
  15. 15. #SMX #11A @fighto CatalystDigital.com Twitter Moments AMP Example
  16. 16. #SMX #11A @fighto CatalystDigital.com Other Notable AMP-Supported Platforms
  17. 17. #SMX #11A @fighto CatalystDigital.comCatalystDigital.com Common Criticism: “Google is stealing your traffic and serving your site on their domain.”
  18. 18. #SMX #11A @fighto CatalystDigital.com X Not the Problem People Make It Out To Be
  19. 19. #SMX #11A @fighto CatalystDigital.com X Not the Problem People Make It Out To Be
  20. 20. #SMX #11A @fighto CatalystDigital.comCatalystDigital.com Common Criticism: “There’s no way to disable AMP results in the SERP for users.”
  21. 21. #SMX #11A @fighto CatalystDigital.com ✓ Actual problem with Google’s implementation of AMP. It is being on users. Google has Search Settings for signed-in user and there’s no reason there isn’t a disable option.
  22. 22. #SMX #11A @fighto CatalystDigital.comCatalystDigital.com Common Criticism: “You can’t remove your own site’s AMP results from the SERP.”
  23. 23. #SMX #11A @fighto CatalystDigital.com This post went viral on Hacker News: https://shkspr.mobi/blog/2016/11/removing-your-site-from-amp/ O Half True Personal tests show: • Simply removing the AMP pages will remove the amp cache from the Google results in ~3 days without doing anything else. • 301 redirecting AMP pages to non-AMP pages, using update-ping, and forcing Googlebot to crawl the page in Search Console results in it being removed in ~1 day. • Update-Ping (https://developers.google.com/amp/cache/update- ping) seems to do noting on it’s own.
  24. 24. #SMX #11A @fighto CatalystDigital.comCatalystDigital.com Common Criticism: “App deep links are de-prioritized”
  25. 25. #SMX #11A @fighto CatalystDigital.com ✓ That’s a Problem
  26. 26. #SMX #11A @fighto CatalystDigital.comCatalystDigital.com Common Criticism: “It’s hard to share AMP results from Google Cache.”
  27. 27. #SMX #11A @fighto CatalystDigital.com O Half True As of February 6, 2017: https://developers.googleblog.com/20 17/02/whats-in-amp-url.html But, still a pain for sharing directly from the AMP Cache.
  28. 28. #SMX #11A @fighto CatalystDigital.comCatalystDigital.com Common Criticism: “The Google URL showing instead of your own is a marketing/SEO issue”
  29. 29. #SMX #11A @fighto CatalystDigital.com O Partially True • It’s not an SEO issue. Since modern search engines support the canonical tag. • It may cause social sharing numbers to be wrong. • It’s possible that users are more likely to click back to the SERP rather than your own website, but there’s UX changes that can be made to mitigate that. • It’s a branding concern.
  30. 30. #SMX #11A @fighto CatalystDigital.comCatalystDigital.com Common Criticism: “Google has a strong hand in the development and propagation of AMP. It’s not W3C.”
  31. 31. #SMX #11A @fighto CatalystDigital.com Sort Of “All current core contributors to AMP work for Google, AMP is effectively a Google-led project. It’s however designed as a standalone open source project, and we’re inviting developers and the community to step up and contribute to become core committers and make AMP fully independent.” –Paul Bakaus https://paulbakaus.com/2016/10/13/debunked-10-misconceptions-about-amp/
  32. 32. #SMX #11A @fighto CatalystDigital.comCatalystDigital.com Common Criticism: “You’re forced to use Google’s cache and Google hosts all of the JS.”
  33. 33. #SMX #11A @fighto CatalystDigital.com They’re Working On It https://medium.com/@cramforce/decentralized-hosting-of-amps-javascript-npm- for-the-web-75ed698a4d64
  34. 34. #SMX #11A @fighto CatalystDigital.comCatalystDigital.com Common Criticism: “Google AMP Results don’t save correctly in Pocket and other ‘readers’”
  35. 35. #SMX #11A @fighto CatalystDigital.com They work fine with Safari Reader and Pocket if given the chance to load enough. O Half True
  36. 36. #SMX #11A @fighto CatalystDigital.comCatalystDigital.com Common Criticism: “You often see blank areas in AMP results and ads runs slow.”
  37. 37. #SMX #11A @fighto CatalystDigital.com • Ads are often malformed producing blank areas. It’s sort of unfortunate, because there’s only so much control over what’s being served on ad networks. • The Ads are actually the same speed, but AMP pages are so fast that you notice the difference.
  38. 38. #SMX #11A @fighto CatalystDigital.com https://amphtml.wordpress.com/2016/0 7/19/but-what-about-the-ads/ A4A – AMP For Ads
  39. 39. #SMX #11A @fighto CatalystDigital.comCatalystDigital.com Other Criticisms
  40. 40. #SMX #11A @fighto CatalystDigital.com Other Criticisms • It creates a “splintering” of the web. • It causes developers to prioritize the creation of AMP pages over making UX changes that might be more beneficial. • Scrolling on iOS doesn’t feel native. • The back button from Google AMP viewer doesn’t work as desired.
  41. 41. #SMX #11A @fighto CatalystDigital.comCatalystDigital.com New AMP Features, Tech, Tips & Tools
  42. 42. #SMX #11A @fighto CatalystDigital.com Python Script: https://www.catalystdigital.com/smx-2017-python Requires: • Python • Requests package Ideally AMPBench would run locally, but can be ran off the appspot demo URL. Bulk Check AMP Pages with AMPBench API
  43. 43. #SMX #11A @fighto CatalystDigital.com AMPBench Script Results
  44. 44. #SMX #11A @fighto CatalystDigital.com Structured Data Testing Tool for Previewing AMP Listings https://search.google.com/structured-data/testing-tool/
  45. 45. #SMX #11A @fighto CatalystDigital.com Prerequisites & Code to Add to AMP Pages Example Form • The redirect URL must be absolute HTTPS URL otherwise AMP will throw an error and redirection won't happen. • <script async custom-element="amp- form" src="https://cdn.ampproject.org/v0/amp -form-0.1.js"></script> • Not allowed: <input type=button>, <input type=file>, <input type=image> and <input type=password> AMP Forms are now supported! <form method="GET" action="/components/amp-form/submit-form" target="_top"> <input type="search" class="data-input" placeholder="Search..." name="googlesearch"> <input type="submit" value="OK" class="button button-primary other-input"> </form> Form Examples: https://ampbyexample.com/components/amp-form/ Documentation: https://www.ampproject.org/docs/reference/components/amp-form
  46. 46. #SMX #11A @fighto CatalystDigital.com Google Analytics / Google Tag Manager https://developers.google.com/analytics/devguides/collection/amp-analytics/
  47. 47. #SMX #11A @fighto CatalystDigital.com Different Client IDs generated for: • Your domain’s AMP URLs • AMP Cache URL • Google AMP Cache URL This causes for tracking to show distinct users across theses three versions of the AMP page. BAD Note AMP Roadmap Update for Mid-Q1 2017: “Soon you will be able to programmatically substitute values, including the Client ID” Google Tag Manager (& GA) – The Problem
  48. 48. #SMX #11A @fighto CatalystDigital.com Prerequisites & Code to Add to AMP Pages Modify Wordpress Theme’s functions.php • Domain must be on HTTPS • <script async custom-element="amp- analytics" src="https://cdn.ampproject.org/v0/amp- analytics-0.1.js"></script> • <amp-analytics config="//www.yourdomain.com/wp- json/amp-gtm/amp.json?id=GTM- XXXXXX&gtm.url=SOURCE_URL" data- credentials=include></amp-analytics> Google Tag Manager (& GA) – The Solution (WP Example) Add this snippet to end of your functions.php file: • http://pshapi.ro/gtmampsnip Source: http://pshapi.ro/simoistheman
  49. 49. #SMX #11A @fighto CatalystDigital.com 617-663-1247 | www.CatalystDigital.com © 2017 Catalyst | All Rights Reserved Paul Shapiro Director of Strategy & Innovation THANK YOU!