why mobile, why now? | john shehata – executive director of search & social media, abc news

WHY MOBILE, WHY NOW

John Shehata

Exec. Director, Search

2

#C3NY

AGENDA

• Why Mobile, Why Now?

• Mobile: Site Architecture

• Mobile: Technical SEO Guidelines

• Mobile Ranking Factors

– User Experience

– Speed/Performance

– Broken Content

– Mobile Errors

• Mobile: App Indexing & Deep Linking

• Mobile: Social

• Mobile: Analytics & Tools

Why Mobile, Why Now?

John Shehata | @JShehata

4

#C3NY


• Mobile Usage Over Takes Desktop for the First Time in History

MOBILE USAGE

5

#C3NY


• http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-

study_research-studies.pdf

• Read: http://moz.com/blog/why-mobile-matters-now

GOOGLE MULTI-SCREEN WORLD

http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf

http://moz.com/blog/why-mobile-matters-now

6

#C3NY


• Google/Search Engines May be Scaring your Mobile Users Away

MOBILE SCARE

7

#C3NY


• “Google Mobile Queries May Surpass PC Search This Year”

Matt Cutts

SMX West, March 2014

MOBILE SEARCHES

8

#C3NY


MOBILE-FIRST DESIGN INITIATIVE - GOOGLE

9

#C3NY


SERPS INSPIRED BY MOBILE-FIRST DESIGN

10

#C3NY


“To improve the search experience for smartphone users

and address their pain points, we plan to roll out several

ranking changes in the near future that address sites

that are misconfigured for smartphone users.“

Yoshikiyo Kato, Software Engineer,

on behalf of Google Mobile Search

MOBILE RANKINGS

Mobile: Site Technical Guidelines


12

#C3NY


Responsive Dedicated Dynamic Serving

• 1 URL• Same Content/HTML• Use CSS to render pages

• Separate Mobile & Desktop URLs

example.com/m/m.example.com

• Different HTML

• 1 URL• Different HTML (and

CSS) depending on user agent (desktop or mobile device)

13

#C3NY


• 1 URL

• Easier to maintain

• Link Consolidation

• No Redirects > Reduce Loading Time

• Recommended By Google (saves resources, pages crawled once)

• Slower

• Same Mobile/Desktop Content

RESPONSIVE SITES

14

#C3NY


• Check Google Webmaster Tools Crawl Errors for Redirect & 404

Errors

• Allow Search Engines to crawl all assets (CSS, Images, JS)

• Check Page Load Time for Mobile and Desktop

• Optimize Speed

RESPONSIVE SITES - SEO

15

#C3NY


• 1 URL

• Link Consolidation

• Capacity for different mobile content

• Slower

• Higher Cost to maintain

• Old Redirect Lists

• Complex technical implementation

• Crawled Multiple Times

DYNAMIC SERVING

16

#C3NY


- Use Vary HTTP header:

• It is a hint to search engines to send mobile-bots to crawl the

pages too and discover the mobile content.

• It signals to caching servers used in ISPs and elsewhere that they

should consider the user agent when deciding whether to serve

the page from cache or not.

Read: https://developers.google.com/webmasters/smartphone-sites/details

DYNAMIC SERVING

https://developers.google.com/webmasters/smartphone-sites/details

17

#C3NY


VARY HEADER

18

#C3NY


• User-agent lists need constant maintenance and updating and will

not match new user-agents.

• When matching user-agents, it's common to mismatch. A common

mistake for sites is to unintentionally treat tablet devices as

smartphones.

AUTOMATIC REDIRECTS AND USER-AGENT

DETECTION

19

#C3NY


• Don’t Cloak: When detecting the user-agent, the site should

detect the device class or type by looking for the device name in

the user-agent string; it should not be looking specifically for

Googlebot (or any other bots).

• All Googlebot user-agents identify themselves as specific mobile

devices, and you should treat these Googlebot user-agents

exactly like you would treat these devices.

Read: https://developers.google.com/webmasters/smartphone-sites/redirects

Googlebot- Mobile User-Agents: https://developers.google.com/webmasters/smartphone-

sites/googlebot-mobile

AUTOMATIC REDIRECTS AND USER-AGENT

DETECTION

https://developers.google.com/webmasters/smartphone-sites/redirects

https://developers.google.com/webmasters/smartphone-sites/googlebot-mobile

20

#C3NY


Using HTTP redirection (Recommended)

• Faster

• The redirection is done based on the user-agent in the HTTP request

headers.

• It is important to keep the redirection consistent with the

rel="alternate" tags

• It does not matter if the server redirects with an HTTP 301 or a 302

status code, but use of 302 is recommended whenever possible. (Matt

and Maile recommended it)

REDIRECTION TECHNIQUES

21

#C3NY


Using JavaScript redirects (Not Recommended)

• Slower

• The latency caused by the client side redirection (first page is

downloaded, then JS is parsed and executed before triggering

the redirect.

REDIRECTION TECHNIQUES

22

#C3NY


• Better Mobile Experience

• Faster

• Dedicated Mobile Content

• Easier Implementation

• Link Equity Dilution

• Higher Cost to maintain

• Crawled Multiple Times with different user agents

DEDICATED MOBILE SITES

23

#C3NY


• On the desktop page, add:<link rel="alternate“ href="http://m.example.com/page-1" >

• On the mobile page, add:<link rel="canonical" href="http://www.example.com/page-1" >

• Add alternate tags to desktop xml sitemaps as well<loc>http://www.example.com/page-1/</loc>

<xhtml:link

rel="alternate"

href="http://m.example.com/page-1" />

</url>


24

#C3NY


• Create XML Mobile Sitemaps

• Use (Screaming Frog) test spider, provide a list of desktop URLs,

and change user-agent to mobile browser.

• Offer Users a way to override redirection (A link to full/Desktop

site). Track Clicks!!

• Make Sure the mobile Site is Spider-able (robots.txt and meta

tags)


25

#C3NY


Responsive Dedicated Dynamic Serving

• ALL devices• 1 URL• Same Content/HTML• Use CSS to render pages

• Separate Mobile & Desktop URLsexample.com/m/m.example.com• Different HTML

• All devices • 1 URL• different HTML (and CSS)

depending on user agent (desktop or mobile device)

Pros • 1 URL• Easier to maintain• Link Consolidation• No Redirects > Reduce Loading

Time• Recommended By Google (saves

resources, pages crawled once)

• Better Mobile Experience• Faster• Dedicated Mobile Content• Easier Implementation

• 1 URL• Link Consolidation• Capacity for different mobile

content

Cons • Slower• Same Mobile/Desktop Content

• Link Equity Dilution• Higher Cost to maintain• Crawled Multiple Times with

different user agents

• Slower • Higher Cost to maintain• Old Redirect Lists• Complex technical

implementation• Crawled Multiple Times

SEO • Check Google Webmaster Tools Crawl Errors for Redirect & 404 Errors

• Check Page Load Time for Mobile and Desktop

• Allow Search Engines to crawl all assets (CSS, Images, JS)

• Redirect Mobile Users and Bots to the mobile site

• Test Desktop Site for Redirects & 404 Errors

• Add Rel=Alternate to desktop and rel=Canonical to mobile site

• XML Mobile Sitemaps

• Use user-agent vary header to help search bots to find your mobile content

• Test for Vary: User-Agent HTTP Header

26

#C3NY


• Responsive is not the answer to all problems and may not be

suitable for your site/industry yet!!

• Googlebot-mobile is only used to crawl feature phones content

• Googlebot is used to crawl smartphones content

• If you have no mobile page, show the desktop page

Read: http://googlewebmastercentral.blogspot.com/2014/01/a-new-googlebot-user-

agent-for-crawling.html

WORD OF CAUTION

http://googlewebmastercentral.blogspot.com/2014/01/a-new-googlebot-user-agent-for-crawling.html

27

#C3NY


Moving from separate URLs to Same URLs

• Use 301-redirects

Moving from Same URLs to Separate URLs

• Use 302-redirects

READ: https://developers.google.com/webmasters/smartphone-sites/change-configuration

CHANGING CONFIGURATION ON SMARTPHONE

WEBSITES

https://developers.google.com/webmasters/smartphone-sites/change-configuration

28

#C3NY


• Google has no specific recommendations for search engine

friendly sites.

• You can use any of the 3 approaches

• Serve tablet users the desktop version (or if available, the tablet

version).

Read: https://developers.google.com/webmasters/smartphone-sites/tablets

TABLETS

https://developers.google.com/webmasters/smartphone-sites/tablets

Mobile: Rankings


30

#C3NY


• SEO Traditional Ranking factors

• Important Ranking Factors

– User Experience

– Speed/Performance

• Negative Mobile SEO Factors

– Mobile Errors

– Broken Content

MOBILE RANKING FACTORS

Mobile: User Experience


32

#C3NY


SMX Advanced 2014

@JShehata

how many people have auto-fill markup on their

mobile site forms?

YES it is

That’s not mobile!!

Mobile Internet coming faster than most people in this

room realize

33

#C3NY


• Avoid plugins (flash, Silverlight, Java, etc.)

• Configure the viewport

<meta name=viewport content="width=device-width, initial-scale=1">

• Size content to viewport

• Use legible font sizes

• Size tap targets appropriately

OPTIMIZE USER EXPERIENCE

34

#C3NY


• Multi-Device Design: https://developers.google.com/web/fundamentals/layouts/

• 25 Principles of Mobile Site Design https://www.google.com/think/multiscreen/whitepaper-sitedesign.html

• Formshttps://developers.google.com/web/fundamentals/input/form/

• Mobile e-commerce Designhttp://www.kaushik.net/avinash/web-design-user-experience-best-practices/

READ:

https://developers.google.com/web/fundamentals/layouts/

https://www.google.com/think/multiscreen/whitepaper-sitedesign.html

https://developers.google.com/web/fundamentals/input/form/

http://www.kaushik.net/avinash/web-design-user-experience-best-practices/

Mobile: Speed / Performance


36

#C3NY


“80-90% of the end-user response time is spent on the frontend.

Start There.”

Steve Souders, Google’s Head Performance Engineer

• I.E. Backend actions (database queries, server delays and

hardware limitations, …) only account for 10-20% of your load

time!!

WHERE TO START?

37

#C3NY


GOOGLE PAGESPEED INSIGHTS TOOL

38

#C3NY


Read: https://developers.google.com/web/fundamentals/performance/

OPTIMIZED RENDERING

https://developers.google.com/web/fundamentals/performance/

39

#C3NY


• 1 second load time for 'above-the-fold content' on mobile sites! Read: https://developers.google.com/speed/docs/insights/mobile

ABOVE-THE-FOLD (ATF) CONTENT

https://developers.google.com/speed/docs/insights/mobile

40

#C3NY


• Avoid Multiple Redirects

Example.com > www.example.com > m.example.com (slow mobile

experience)

• Consolidate DNS requests

• Enable gzip Compressions (reduces up to 90%)

• Remove unnecessary / legacy code

• Optimize Images

– Proper formatting and compression

– Use Web fonts instead of encoding text in images

OPTIMIZE SPEED

41

#C3NY


• Improve server response time

– It should be Less than 200ms

• Leverage Browser Caching

– Set expiry date or maximum age

– Cache-Control: max-age=120

• Prioritize Visible Content

– Structure your HTML to load the critical, above-the-fold content first

– Reduce the amount of data used by your resources

OPTIMIZE SPEED

https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent#structure

https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent#reduce

42

#C3NY


• Eliminate ATF render-blocking JavaScript and CSS resources

• Faster above the fold content (inline CSS, JS)

• Optimize JavaScript Use– Defer parsing JavaScript

– Asynchronously load JavaScript resources

– Avoid long running JavaScript

• Optimize CSS Use– Put CSS in the document head

– Avoid CSS imports (@import)

– Inline render-blocking CSS

OPTIMIZE SPEED

43

#C3NY


• Make your mobile pages render in under one second

– http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-

in-under-one-second/

• Mobile Analysis in PageSpeed Insights

– https://developers.google.com/speed/docs/insights/mobile

• Read Cindy Krum from Mozcon 2014

http://www.slideshare.net/mcordismarketing/five-secrets-to-

unlocking-mobile-seo-success

READ

http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/

https://developers.google.com/speed/docs/insights/mobile

http://www.slideshare.net/mcordismarketing/five-secrets-to-unlocking-mobile-seo-success

Mobile: Errors


45

#C3NY


“Avoiding these mistakes helps your smartphone users engage with

your site fully and helps searchers find what they're looking for

faster. To improve the search experience for smartphone users and

address their pain points, we plan to roll out several ranking

changes in the near future that address sites that are

misconfigured for smartphone users.”

6/11/13 Google Webmaster Central Blog

MOBILE ERRORS

46

#C3NY


• First, Check Google Webmaster Tools Crawl Errors

MOBILE ERRORS

47

#C3NY


• Google Reporting Faulty Mobile Redirects

http://googlewebmastercentral.blogspot.ca/2014/06/faulty-

redirects.html

FAULTY REDIRECTS

http://googlewebmastercentral.blogspot.ca/2014/06/faulty-redirects.html

48

#C3NY


49

#C3NY


• Verify no flash is used for navigation, videos, or other elements

on mobile pages.

• HTML5 is preferred for video players.

• Google warns users of incompatible sites.

• consider having the transcript of the video available on all

devices as that may better serve your smartphone users.

UNPLAYABLE VIDEOS

50

#C3NY


• Avoid App Download Interstitials (use banners instead)

INTERSTITIALS

x x

51

#C3NY


• Irrelevant cross-linking between desktop and mobile content

• Infinite redirect loops

– Googlebot-mobile > redirected to feature phones site > redirects to

smartphone site > redirects to desktop site

READ: https://developers.google.com/webmasters/smartphone-sites/common-mistakes

MOBILE ERRORS

https://developers.google.com/webmasters/smartphone-sites/common-mistakes

Mobile: Broken Content


53

#C3NY


• Unplayable Videos

• Flash/Sliverlight

• Popups

• Sideway Scrolling

• Tiny Font/Buttons

• Device Specific Content

• Slow Pages

BROKEN CONTENT

Mobile: App Indexing & Deep-Linking


55

#C3NY


https://developers.google.com/app-indexing/

APP INDEXING & DEEP LINKS

https://developers.google.com/app-indexing/

56

#C3NY


https://dev.twitter.com/docs/cards/app-installs-and-deep-linking

<meta name="twitter:app:country" content="US"/>

<meta name="twitter:app:name:iphone" content="Example App"/>

<meta name="twitter:app:id:iphone" content="306934135"/>

<meta name="twitter:app:url:iphone" content="example://action/5149e249222f9e600a7540ef"/>

<meta name="twitter:app:name:ipad" content="Example App"/>

<meta name="twitter:app:id:ipad" content="306934135"/>

<meta name="twitter:app:url:ipad" content="example://action/5149e249222f9e600a7540ef"/>

<meta name="twitter:app:name:googleplay" content="Example App"/>

<meta name="twitter:app:id:googleplay" content="com.example.app"/>

<meta name="twitter:app:url:googleplay" content="http://example.com/action/5149e249222f9e600a7540ef"/>

TWITTER: APP INSTALLS AND DEEP-LINKING

https://dev.twitter.com/docs/cards/app-installs-and-deep-linking

57

#C3NY


• Android Deep Links – Errors

– Mismatched content (paginated pages, expired content, blocked

resources)

– GWT errors

• You can track Google Traffic to Android App

DEEP LINKS ERRORS

Mobile: Social


59

#C3NY


• FB: 78% Of US Users Are Mobile

MOBILE: SOCIAL

60

#C3NY


• Check how your Social Media buttons appear in mobile

MOBILE: SOCIAL

61

#C3NY


• Dark Social Traffic (Apps Traffic is registered as Direct)

MOBILE: SOCIAL

62

#C3NY


MOBILE: EMAILS

Mobile: Analytics & Tools


64

#C3NY


• Study your site’s current traffic

– Desktop, Tablet, Mobile

– Check Devices Traffic

– Check Operating Systems

GOOGLE ANALYTICS

65

#C3NY


• Mobile, Tablet, Mobile & Tablet are 3 System Segments

• You need to create a desktop traffic segment

DESKTOP SEGMENT

66

#C3NY


• Use System Segments

• Create Advanced Segments

(Mobile Organic)

MOBILE/TABLET SEGMENT

67

#C3NY


• Check popular mobile pages with high bounce rateRead: How to quickly determine high-traffic mobile pages with a poor user experience through Google Analytics bounce rate and Events, and

improve common issues (slides)

MOBILE ANALYTICS

https://docs.google.com/presentation/d/1itnlBohS_UxxhL8luQHMzxLLmJ4CzK7lsQoYxs_UD1s/

68

#C3NY


PAGE TIMING

69

#C3NY


SPEED SUGGESTIONS REPORT

70

#C3NY


– Check Mobile Pages with high CTR to the Full Site

<a href="http://www.example.com/page.html" id="full-site-link">Full site</a>

var fullSite =

document.getElementById('full-site-link');

addListener(fullSite, 'click', function() {

ga('send', 'event', 'Mobile site functionality',

'click', 'Full site');

});

TRACK FULL-SITE LINKS W/ EVENTS

71

#C3NY


• Google Webmaster Tools

– Mobile stats vs. All (Not Web)

• Use Mobile Filters

– Compare Keywords in Mobile vs. All

– Compare top pages in Mobile vs. All

GWT: SEARCH QUERIES

72

#C3NY


• Check Mobile Keywords & Create Landing Pages

– Coupons / Discounts / Deals

– (Product/Brand) Reviews

– Directions to (brand)

– Find (brand) Store / Nearest (brand) Store

– (Restaurant) Menu

– Prices / Compare prices

– Hours / Holiday Hours / 24 Hours (brand)

– (Restaurant) What to Order?

• Think of unique mobile scenarios for your brand

– Car Insurance Accident Help/File a Claim

– Recipes

GWT: SEARCH QUERIES

73

#C3NY


Mobile All

Query Impressions Clicks CTRAvg. position Impressions Clicks CTR

Avg. position

Mobile/AllImpressions

Mobile/AllClicks

Mobile - all

CTRMobile – all

Avg. positionQuery 1 347,746 97,796 28% 1.8 1,761,196 609,622 35% 1.8 20% 16% -7% -

Query 2 409,327 68,743 17% 2.7 1,146,903 268,013 23% 3.5 36% 26% -6% (0.80)Query 3 205,923 34,515 17% 5.5 417,812 73,891 18% 4.5 49% 47% -1% 1.00

327,460 30,901 9% 3 875,403 71,638 8% 2.5 37% 43% 1% 0.50

120,146 30,790 26% 2.9 229,856 44,186 19% 3.1 52% 70% 7% (0.20)36,276 25,349 70% 5.1 163,032 128,247 79% 2.1 22% 20% -9% 3.00

492,042 23,797 5% 5.8 1,376,322 75,176 5% 4.6 36% 32% 0% 1.20

44,609 18,614 42% 1.4 105,240 40,431 38% 5.6 42% 46% 4% (4.20)

398,801 18,389 5% 4.1 949,446 52,844 6% 3.6 42% 35% -1% 0.50

75,744 18,353 24% 1 157,273 38,309 24% 1.0 48% 48% 0% -

104,610 17,775 17% 6.8 245,271 48,502 20% 4.7 43% 37% -3% 2.10

84,912 16,565 20% 1 323,577 63,522 20% 1.1 26% 26% 0% (0.10)

480,131 15,738 3% 1.9 1,117,137 70,847 6% 1.7 43% 22% -3% 0.20 122,329 13,752 11% 1.3 368,591 49,343 13% 1.7 33% 28% -2% (0.40)116,071 12,695 11% 3.4 363,641 58,960 16% 2.7 32% 22% -5% 0.70

23,389 12,470 53% 1 125,271 87,118 70% 1.0 19% 14% -17% -

GWT + EXCEL

- Find Low/High Mobile Impressions, Clicks, CTR- Check Mobile Rankings and Display

74

#C3NY


CONDUCTOR

75

#C3NY


GOOGLE FETCH

76

#C3NY


77

#C3NY


DENIED BY ROBOTS.TXT

78

#C3NY


• https://developer.chrome.com/devtools/docs/mobile-emulation

EMULATING DEVICES

https://developer.chrome.com/devtools/docs/mobile-emulation

79

#C3NY


GOOGLE ADWORDS – KEYWORD PLANNER

80

#C3NY


• 2013

• 2014

PIZZA

81

#C3NY


• Gas Station

LOCAL

82

#C3NY


• http://mobitest.akamai.com/

• http://validator.w3.org/mobile/

• Browser Extension user-agent switcher

• http://developers.google.com/speed/pagespeed/insights/

MORE TOOLS

http://mobitest.akamai.com/

http://validator.w3.org/mobile/

http://developers.google.com/speed/pagespeed/insights/

84

#C3NY


• Choose the site structure Wisely. Responsive is not the answer for

all your problems!!

• Fix broken content and faulty redirects

• User experience is important

• Optimize above the fold rendering

• Local Businesses: Take Mobile Seriously

• Check your money/important rankings regularly in Mobile SERPs

• Check how your results look in mobile SERPs

• Mobile Ads & Mobile Landing Pages

• Mobile first doesn’t mean just mobile

Thank You


John Shehata@JShehata

why mobile, why now? | john shehata – executive director of search & social media, abc news

Marketing