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

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!