The Magic of Mobile

2015 | John Shehata

@JShehata@JShehata - Mobile SEO

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: Analytics & Tools

<Why Now?>

John Shehata | @JShehata

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

Mobile Usage

• 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

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

Mobile Scare

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

Matt Cutts

SMX West, March 2014

Mobile Searches

Search Is #1 Content Discovery Tool For Mobile Users

• Source: IAB, Harris

@JShehata - Mobile SEO

Mobile-First Design Initiative - Google

“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

@JShehata - Mobile SEO

April 21 - Mobilegeddon

• Significant Mobile Ranking changes– Mobile Friendly Pages

– Mobile Usability Errors

– App Indexing & in-app content (Started Already)

• No changes in Desktop Rankings

• Impact: How much traffic comes to your site from Mobile?

@JShehata - Mobile SEO

• at a conference a Googler named Zineb AitBahajji recently stated they expect this update to impact more sites than Panda and Penguin have.

• Google recently started sending out mobile usability warning messages in bulk:

Google systems have tested XX pages from your site and found that YY% of them have critical mobile usability errors. The errors on these XX pages severely affect how mobile users are able to experience your website. These pages will not be seen as mobile-friendly by Google Search, and will therefore be displayed and ranked appropriately for smartphone users.

@JShehata - Mobile SEO

Google Mobile Index

• At SMX West, Google’s Gary llyes surprised the crowd: Google already has plans for a separate mobile index and there is a team already working on it.

• He isn’t sure what stage they are at, so Google has nothing to announce about it at this time. (More here: Google is Working on Completely Separate Mobile Index From Desktop Index)

@JShehata - Mobile SEO

<Mobile: Technical Guidelines>

John Shehata | @JShehata

@JShehata - Mobile SEO

Responsive Dedicated Dynamic Serving

• 1 URL

• Same Content/HTML

• Use CSS to render pages

• Good for small & medium sites

• 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)

• Good for large complex high-traffic sites

@JShehata - Mobile SEO

• 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

1. Responsive Sites

• 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

• Be sure not to block the crawling of any page assets (CSS, JavaScript, and images) for any Googlebot using robots.txt or other methods.

• Being able to fully access these external files will help our algorithms detect your site's responsive web design configuration and treat it appropriately.

@JShehata - Mobile SEO

JavaScript

• JavaScript-adaptive: In this configuration, all devices are served the same HTML, CSS, and JavaScript content. When the JavaScript is executed on the device, the rendering or behavior of the site is altered. If a website requires JavaScript, this is Google’s recommended configuration.

• Combined detection: In this implementation, the website uses both JavaScript and server-side detection of device capabilities to serve different content to different devices.

• Dynamically-served JavaScript: In this configuration, all devices are served the same HTML, but the JavaScript is served from a URL that dynamically serves different JavaScript code depending on the device’s user-agent.

• Read: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/responsive-design

@JShehata - Mobile SEO

• 1 URL• Link Consolidation• Capacity for different mobile content

• Slower • Higher Cost to maintain• Old Redirect Lists• Complex technical implementation• Crawled Multiple Times

2. Dynamic Serving

- 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

Vary Header

• 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

• 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/redirectsGooglebot- Mobile User-Agents: https://developers.google.com/webmasters/smartphone-sites/googlebot-mobile

Automatic Redirects and User-Agent Detection

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

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

• Better Mobile Experience

• Faster

• Dedicated Mobile Content

• Easier Implementation

• Link Equity Dilution

• Higher Cost to maintain

• Crawled Multiple Times with different user agents

3. Dedicated Mobile Sites

Dedicated Mobile Sites

• Bad for monetization of site

– When users share mobile URLs in social media and other places,

– and desktop users reach these URLs

– They get the mobile version of your site with less ads

@JShehata - Mobile SEO

• 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>

Dedicated Mobile Sites

• 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)

Dedicated Mobile Sites

Responsive Dedicated Dynamic Serving

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

• Separate Mobile & Desktop URLs

example.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)

• Small/Medium Sites

• Better MobileExperience

• Faster• Dedicated Mobile

Content• Easier Implementation

• 1 URL• Link Consolidation• Capacity for different

mobile content• Complex/Large Sites

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

• 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

• Even though Google recommends Responsive implementations, they have been pretty clear that they will treat all mobile subdomains, dynamic serving, and responsive web designs (RWD) implementations the same (from a ranking perspective).

• 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

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

Bing

• Ideally, there shouldn’t be a difference between the “mobile-friendly” URL and the “desktop” URL

• the site would automatically adjust to the device —content, layout, and all.

• That’s why we continue to recommend you use responsive designs over separate mobile (m.*) sites

• ensure a great experience for users on all devices and avoid compatibility, readability, and functionality issues.

• http://blogs.bing.com/webmaster/2014/11/20/bing-and-mobile-friends/

• http://blogs.bing.com/webmaster/2014/11/03/meet-our-mobile-bots/

@JShehata - Mobile SEO

• 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

<Mobile: Rankings>

John Shehata | @JShehata

• SEO Traditional Ranking factors

• Important Ranking Factors– Mobile Friendliness– Mobile Usability– Mobile Speed/Performance

• Negative Mobile SEO Factors– Mobile Errors– Broken Content

Mobile Ranking Factors

<Mobile: Friendliness>

John Shehata | @JShehata

• Test your site @ Google Mobile-Friendly Test Tool

https://www.google.com/webmasters/tools/mobile-friendly/

• Blocked Internal Resources may prevent Google from recognizing your site as mobile-friendly site

• Page by Page

April 21

@JShehata - Mobile SEO

<Mobile: Usability>

John Shehata | @JShehata

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

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

• Size content to viewport

• Space out Touch Elements

• Use legible font sizes

• Size tap targets appropriately: “Design for Fat Fingers”

Optimize User Experience

@JShehata - Mobile SEO

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

• Forms auto-complete• http://googlewebmastercentral.blogspot.com/2015/03/helping-users-fill-out-online-forms.html

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

READ:

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

<Mobile: Speed / Performance>

John Shehata | @JShehata

• Page speed is a ranking factor since 2010

• Google Released a ton of tools and reports to help improve page speed

@JShehata - Mobile SEO

Google started testing “Slow” Red Labels

How will this affect your CTR??

http://searchengineland.com/google-testing-red-slow-label-search-results-slower-sites-215483

@JShehata - Mobile SEO

“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?

Google PageSpeed Insights Tool

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

Optimized rendering

• 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

• Avoid Multiple RedirectsExample.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

• 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

• 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

• 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/mobil

e

• Read Cindy Krum from Mozcon 2014 http://www.slideshare.net/mcordismarketing/five-secrets-to-unlocking-mobile-seo-success

READ

<Mobile: Errors>

John Shehata | @JShehata

“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

• First, Check Google Webmaster Tools Crawl Errors

Mobile Errors

• Google Reporting Faulty Mobile Redirectshttp://googlewebmastercentral.blogspot.ca/2014/06/faulty-redirects.html

Faulty Redirects

• 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

• Avoid App Download Interstitials (use banners instead)

interstitials

x x

• 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

<Mobile: Broken Content>

John Shehata | @JShehata

• Unplayable Videos

• Flash/Sliverlight

• Popups

• Sideway Scrolling

• Tiny Font/Buttons

• Device Specific Content

• Slow Pages

Broken Content

<Mobile: App Indexing>

<Mobile: Deep-Linking>

John Shehata | @JShehata

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

App Indexing & Deep Links

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

• 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

• Blocked internal resources may be an issue

@JShehata - Mobile SEO

@JShehata - Mobile SEO

<Mobile: Social>

John Shehata | @JShehata

• FB: 78% Of US Users Are Mobile

Mobile: Social

• Check how your Social Media buttons appear in mobile

Mobile: Social

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

Mobile: Social

Mobile: Emails

<Mobile: Analytics & Tools>

John Shehata | @JShehata

Page Timing

– 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

Google Fetch

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

Emulating devices

Google AdWords – Keyword Planner

• 2013

• 2014

PIZZA

• Gas Station

Local

• Chrome Emulation Developer Tools• http://mobiletest.me/• http://www.mobilemoxie.com/tools/mobile_handset_emulator/• http://ipadpeek.com/• http://www.mobilephoneemulator.com/• http://mattkersley.com/responsive/• http://mobitest.akamai.com/• http://validator.w3.org/mobile/• Browser Extension user-agent switcher• http://developers.google.com/speed/pagespeed/insights/• http://www.browserstack.com/screenshots• http://crossbrowsertesting.com/• http://validator.w3.org/mobile/

More Tools

<Mobile />

John Shehata | @JShehata

• 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

John Shehata@JshehataJohn-Shehata.comLinkedIn