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.

2020-03-05 Custard - SEO vs PWAs

134 views

Published on

SEO vs. Progressive Web Apps
What could possibly go wrong?

Published in: Internet
  • Be the first to comment

  • Be the first to like this

2020-03-05 Custard - SEO vs PWAs

  1. 1. SEO vs. Progressive Web Apps What could possibly go wrong? Chris Smith custard.co.uk
  2. 2. About Me • Manchester born and raised • Studied Electronic Engineering at York o Heavy software element o Machine learning & genetic programming • First business was a web design agency • Custard is a technically focused, data-driven digital marketing agencyChris Smith
  3. 3. Overview • 20 minutes • 99 slides • 18 burning questions • 8 essential techniques • 3 essential Chrome extensions
  4. 4. Question 1: What is a PWA?
  5. 5. It’s a hybrid
  6. 6. Source: https://www.onenorth.com/blog/post/whats-next-in-mobile-progressive-web-apps
  7. 7. Source: https://web.dev/what-are-pwas/
  8. 8. Question 2: Why use a PWA?
  9. 9. That’s out of scope for this presentation
  10. 10. 1. Better conversation rate than a website 2. Less costly to maintain than a native app
  11. 11. Let’s assume that deploying a PWA is a given (or that it’s already happened)
  12. 12. Question 3: What are the risks to SEO?
  13. 13. Google* may no longer understand your (client’s) website *Other search engines are available
  14. 14. Question 4: What is the impact?
  15. 15. • Loss of rankings • Loss of traffic • Loss of revenue This could lead to:
  16. 16. Question 5: How bad could it be?
  17. 17. For example: +PWA Sistrix visibility score 30%
  18. 18. Question 6: Yeah, but what about traffic?
  19. 19. 47% organic traffic YoY (non-brand)
  20. 20. 47% organic traffic YoY (non-brand) OK THIS DID NOT HAPPEN ON OUR WATCH!! The page at custard.mancseo.be-impossible.com:443 says: x
  21. 21. Is it fixable?!
  22. 22. But… It took the best part of a year to get back to square 1 +PWA RECOVERY phase DISASTER phase
  23. 23. But… It took the best part of a year to get back to square 1 +PWA RECOVERY phase DISASTER phase OK THIS DID HAPPEN ON OUR WATCH!! The page at custard.mancseo.be-impossible.com:443 says: x
  24. 24. But… It took the best part of a year to get back to square 1 +PWA RECOVERY phase DISASTER phase OK THIS DID HAPPEN ON OUR WATCH!! The page at custard.mancseo.be-impossible.com:443 says: x
  25. 25. When you want to do complicated things to your website, not only should you employ an SEO, but you also need to implement their advice
  26. 26. Question 7: What did we do to salvage this mess?
  27. 27. Systematic approach 1. Fact find 2. Analyse 3. Execute 4. Monitor
  28. 28. Step 1: Fact find Todo list: 1. Arrange access a) Analytics & Search Console b) Server logs c) (optional) Client keyword tracking tools
  29. 29. Step 1: Fact find Todo list: 1. Arrange access 2. Assess impact a) Compare YoY, accounting for other factors b) Identify patterns and trends
  30. 30. 13.6% All traffic Non-brand traffic 36.5%
  31. 31. Fly in the ointment In March 2019, Google changed Search Console to report only canonical URLs
  32. 32. Step 1: Fact find Todo list: 1. Arrange access 2. Assess impact 3. Establish success metrics a) Keywords to track b) Landing pages to track
  33. 33. Third party tracking tools with keyword tagging
  34. 34. Question 8: What do we use at Custard?
  35. 35. • Allows setting of preferred URLs for individual keywords • Good user management • Relatively inexpensive: 4.5p / keyword (10k keywords)
  36. 36. Step 1: Fact find Todo list: 1. Arrange access 2. Assess impact 3. Establish success metrics 4. Set up tracking a) Implement tools b) Wait…
  37. 37. Step 2: Analyse Todo list: 1. Test the site 2. Check Google 3. Check server logs
  38. 38. Step 2: Analyse Todo list: 1. Test the site a) Work out how is the PWA served b) Emulate using Chrome c) Check response codes
  39. 39. Obvious factors: User agent Screen width Device type Less obvious IP/Geo Section or page Site release Responsive site PWA Request ?!
  40. 40. Question 9: How do you access a mobile site using Chrome?
  41. 41. Mobile emulation in Chrome
  42. 42. Responsive PWA
  43. 43. Question 10: What’s the difference between rendered source and raw sauce?
  44. 44. Raw source Rendered source
  45. 45. Question 11: What are “headers”?
  46. 46. Request headers – sent by browser Response headers – sent by web server
  47. 47. Request URL: https://www.clientsite.com/category/page Response header status: HTTP/1.1 200 However, the URL in the browser address bar has changed to: https://www.clientsite.com/category
  48. 48. Google does not seem to pass authority on this type of JavaScript redirect
  49. 49. Step 2: Analyse Todo list: 1. Test the site 2. Check Google a) SERPs b) Cache c) Search Console
  50. 50. Question 12: What signs are we looking for in the SERPs?
  51. 51. Check for problem snippets
  52. 52. Use the cache to find the cause
  53. 53. Question 13: How do you access the cache?
  54. 54. Question 14: How do you access the mobile cache?
  55. 55. ? ? ? Check Google’s mobile cache
  56. 56. Direct cache access
  57. 57. Question 15: I’m in the mobile cache, now what do I do?
  58. 58. OK Beware of misinformation The page at custard.mancseo.be-impossible.com:443 says: x
  59. 59. Try disabling JS and see what happens
  60. 60. Question 16: How do I disable JavaScript?
  61. 61. …or you could block one single script from being called
  62. 62. Question 17: How do I block a specific resource from running when I view the cache?
  63. 63. Canonical Request URL
  64. 64. Question 18: Is there a way to test what Google sees in real time?
  65. 65. Yes, in Search Console of course.
  66. 66. Step 2: Analyse Todo list: 1. Test the site 2. Check Google 3. Check server logs
  67. 67. GONE
  68. 68. Step 3: Execute Todo list: 1. Agree specific outcomes 2. Produce roadmap 3. Execute 4. Monitor results
  69. 69. Step 4: Monitor Todo list: 1. Check tracking software (keywords & preferred URLs, mobile vs. desktop) 2. Check Search Console (traffic levels, rankings) 3. Don’t be afraid to adjust or change your course
  70. 70. Question 7: What exactly did we do to salvage this mess? #repost #tbt
  71. 71. Used https://prerender.io to: • Set up ‘proper’ 301 redirects • Implement full page caching The Solution
  72. 72. Take-Aways 1. PWAs & SEO can be made compatible, but it’s unlikely to happen automatically 2. Just make sure that Googlebot can understand your site by: 1. Considering caching your pages for crawlers 2. Making the site work without JS enabled (if all else fails)
  73. 73. Thanks for humouring me @chrishasmith (mainly Insta) @custarduk

×