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.

On-Page SEO for Mobile

43,360 views

Published on

How to future proof your site for Mobile and Google. Presented at BrightonSEO.

Published in: Marketing

On-Page SEO for Mobile

  1. On-Page SEO for Mobile How to future proof your site for Mobile and Google
  2. On-Page SEO for Mobile means…
  3. 3 Speed
  4. 4 User Experience (UX)
  5. 5 Structured Data
  6. 6 Device Responsiveness
  7. If it makes sense to
  8. 8 HTTPS = Ranking Factor
  9. 9 Speed = Ranking Factor
  10. 10 Mobile = Ranking Factor
  11. What can we assume moving forward?
  12. 12 cares about time
  13. 13 cares about actions
  14. 14 knows ALL THE THINGS!
  15. @RavenJon | raventools.com 15 http://raven.link/onpageseo
  16. Step 1: Responsive ALL THE THINGS!
  17. 17 +
  18. 18 Uses Bootstrap
  19. 19 Customizable
  20. 20 Hooks & Child Themes
  21. 21 Great plugins
  22. 22 Foundation
  23. 23 Custom download
  24. 24 Simple, nestable column system
  25. 25 Forms and buttons are awesome!
  26. 26 Easy to implement mobile navigation
  27. 27 Semantically named CSS
  28. 28 Great documentation
  29. 29 It’s free!
  30. Step 2: Reduce ALL THE THINGS!
  31. 31 Start with images
  32. @RavenJon | raventools.com 32 http://raven.link/onpageseo
  33. 33 Reduce the size of all images
  34. 34 Use SVG for simple images
  35. 35 Use ImageOptim for JPG and PNG
  36. 36 EWWW Image Optimizer plugin for WordPress
  37. 37 Create smaller versions for mobile 1024px 800px 550px 360px
  38. 38 Use SRCSET to deliver the correct image <img alt="my awesome cat" src="image.png" srcset="cat-hd.png 2x, cat-med.png 640w, cat-med-hd.png 640w 2x" />
  39. 39 Specify device width <img alt="my awesome cat" src="image.png" srcset="cat-hd.png 2x, cat-med.png 640w, cat-med-hd.png 640w 2x" />
  40. 40 Specify High DPI <img alt="my awesome cat" src="image.png" srcset="cat-hd.png 2x, cat-med.png 640w, cat-med-hd.png 640w 2x" />
  41. 41 Create different versions for the best UX Mobile Desktop
  42. 42 WordPress Plugin for SRCSET SrcSet Responsive Images for WP http://raven.link/srcsetwp
  43. Step 3: Structure ALL THE THINGS!
  44. 44 Use schema.org to enhance listings
  45. 45 http://schema.org/Recipe
  46. 46
  47. 47 WordPress plugin for schema.org Schema Creator http://raven.link/schemawp
  48. 48 HTML attributes for mobile
  49. 49 type="number"
  50. 50 type="date"
  51. 51 type="tel"
  52. Step 4: Speed Up ALL THE THINGS!
  53. 53 Use PageSpeed Insights
  54. 54 You will never see a perfect score
  55. 55 What it looks like
  56. 56 The winning code
  57. 57 The tool is actually a cruel joke
  58. 58 Can’t win with offsite code
  59. 59 Can’t control what you don’t host
  60. 60 WordPress plugins will ruin your day
  61. @RavenJon | raventools.com Stages of PageSpeed Insights Grief 61 • Denial • Anger • Bargaining • Depression • Acceptance
  62. 62 If you did everything I said before then you’re in good shape…mostly
  63. 63 Fix your size-tap targets
  64. 64 Go nuts and use inline CSS
  65. 65 Consider drinking more
  66. Presented by Jon Henshaw @RavenJon slideshare.net/raventools Thanks!

×