58
On-Page SEO for Mobile How to future proof your site for Mobile and Google

Mobile SEO by Jon Henshaw (Raven Tools)

Embed Size (px)

Citation preview

Page 1: Mobile SEO by Jon Henshaw (Raven Tools)

On-Page SEO for MobileHow to future proof your site for Mobile and Google

Page 2: Mobile SEO by Jon Henshaw (Raven Tools)

On-Page SEO for Mobile means…

Page 3: Mobile SEO by Jon Henshaw (Raven Tools)

3

Speed

Page 4: Mobile SEO by Jon Henshaw (Raven Tools)

4

User Experience (UX)

Page 5: Mobile SEO by Jon Henshaw (Raven Tools)

5

Structured Data

Page 6: Mobile SEO by Jon Henshaw (Raven Tools)

6

Device Responsiveness

Page 7: Mobile SEO by Jon Henshaw (Raven Tools)

If it makes sense to

Page 9: Mobile SEO by Jon Henshaw (Raven Tools)

9

Speed = Ranking Factor

Page 10: Mobile SEO by Jon Henshaw (Raven Tools)

10

Mobile = Ranking Factor

Page 11: Mobile SEO by Jon Henshaw (Raven Tools)

What can we assume moving forward?

Page 12: Mobile SEO by Jon Henshaw (Raven Tools)

Step 1: Responsive ALL THE THINGS!

Page 13: Mobile SEO by Jon Henshaw (Raven Tools)

13

+

Page 14: Mobile SEO by Jon Henshaw (Raven Tools)

14

Uses Bootstrap

Page 15: Mobile SEO by Jon Henshaw (Raven Tools)

15

Customizable

Page 16: Mobile SEO by Jon Henshaw (Raven Tools)

16

Hooks & Child Themes

Page 17: Mobile SEO by Jon Henshaw (Raven Tools)

17

Great plugins

Page 18: Mobile SEO by Jon Henshaw (Raven Tools)

18

Foundation

Page 19: Mobile SEO by Jon Henshaw (Raven Tools)

19

Custom download

Page 20: Mobile SEO by Jon Henshaw (Raven Tools)

20

Simple, nestable column system

Page 21: Mobile SEO by Jon Henshaw (Raven Tools)

21

Forms and buttons are awesome!

Page 22: Mobile SEO by Jon Henshaw (Raven Tools)

22

Easy to implement mobile navigation

Page 23: Mobile SEO by Jon Henshaw (Raven Tools)

23

Semantically named CSS

Page 24: Mobile SEO by Jon Henshaw (Raven Tools)

24

Great documentation

Page 25: Mobile SEO by Jon Henshaw (Raven Tools)

25

It’s free!

Page 26: Mobile SEO by Jon Henshaw (Raven Tools)

Step 2: Reduce ALL THE THINGS!

Page 27: Mobile SEO by Jon Henshaw (Raven Tools)

27

Start with images

Page 28: Mobile SEO by Jon Henshaw (Raven Tools)

@RavenJon | raventools.com

28

http://raven.link/onpageseo

Page 29: Mobile SEO by Jon Henshaw (Raven Tools)

29

Reduce the size of all images

Page 30: Mobile SEO by Jon Henshaw (Raven Tools)

30

Use SVG for simple images

Page 31: Mobile SEO by Jon Henshaw (Raven Tools)

31

Use ImageOptim for JPG and PNG

Page 32: Mobile SEO by Jon Henshaw (Raven Tools)

32

EWWW Image Optimizer plugin

for WordPress

Page 33: Mobile SEO by Jon Henshaw (Raven Tools)

33

Create smaller versions for mobile

1024px800px

550px360px

Page 34: Mobile SEO by Jon Henshaw (Raven Tools)

34

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" />

Page 35: Mobile SEO by Jon Henshaw (Raven Tools)

35

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" />

Page 36: Mobile SEO by Jon Henshaw (Raven Tools)

36

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" />

Page 37: Mobile SEO by Jon Henshaw (Raven Tools)

37

Create different versions for the best UX

Mobile Desktop

Page 38: Mobile SEO by Jon Henshaw (Raven Tools)

38

WordPress Plugin for SRCSET

SrcSet Responsive Images for WP http://raven.link/srcsetwp

Page 39: Mobile SEO by Jon Henshaw (Raven Tools)

Step 3: Structure ALL THE THINGS!

Page 40: Mobile SEO by Jon Henshaw (Raven Tools)

40

Use schema.org to enhance listings

Page 41: Mobile SEO by Jon Henshaw (Raven Tools)

41

http://schema.org/Recipe

Page 42: Mobile SEO by Jon Henshaw (Raven Tools)

42

Page 43: Mobile SEO by Jon Henshaw (Raven Tools)

43

WordPress plugin for schema.org

Schema Creator http://raven.link/schemawp

Page 44: Mobile SEO by Jon Henshaw (Raven Tools)

44

HTML attributes for mobile

Page 45: Mobile SEO by Jon Henshaw (Raven Tools)

45

type="number"

Page 46: Mobile SEO by Jon Henshaw (Raven Tools)

46

type="date"

Page 47: Mobile SEO by Jon Henshaw (Raven Tools)

47

type="tel"

Page 48: Mobile SEO by Jon Henshaw (Raven Tools)

Step 4: Speed Up ALL THE THINGS!

Page 49: Mobile SEO by Jon Henshaw (Raven Tools)

49

Use PageSpeed Insights

Page 50: Mobile SEO by Jon Henshaw (Raven Tools)

50

You will never see a perfect score

Page 51: Mobile SEO by Jon Henshaw (Raven Tools)

51

What it looks like

Page 52: Mobile SEO by Jon Henshaw (Raven Tools)

52

The winning code

Page 53: Mobile SEO by Jon Henshaw (Raven Tools)

53

Can’t win with offsite code

Page 54: Mobile SEO by Jon Henshaw (Raven Tools)

54

WordPress plugins will ruin your day

Page 55: Mobile SEO by Jon Henshaw (Raven Tools)

55

If you did everything I said before then you’re in good shape…mostly

Page 56: Mobile SEO by Jon Henshaw (Raven Tools)

56

Fix your size-tap targets

Page 57: Mobile SEO by Jon Henshaw (Raven Tools)

57

Go nuts and use inline CSS

Page 58: Mobile SEO by Jon Henshaw (Raven Tools)

Presented by Jon Henshaw @RavenJon

slideshare.net/raventools

Thanks!