The Magic of Mobile SEO - ##CZLNY

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

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

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?

• at a conference a Googler named Zineb Ait
Bahajji 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.

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)

<Mobile: Technical Guidelines>

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

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

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

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

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

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

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

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
• No Redirects > Reduce
Loading Time
• Recommended By
Google (saves resources,
pages crawled once)
• Small/Medium Sites
• Better Mobile
Experience
• Faster
• Dedicated Mobile
Content
• Easier Implementation
• 1 URL
• Capacity for different
mobile content
• Complex/Large Sites
Cons • Slower
• Same Mobile/Desktop
Content
• Link Equity Dilution
with different user
agents
• Slower
• Old Redirect Lists
• Complex technical
implementation
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/

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

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

• Test your site @ Google Mobile-Friendly Test
Tool
https://www.google.com/webmasters/tools/mo
bile-friendly/
• Blocked Internal Resources may prevent
Google from recognizing your site as mobile-
friendly site
• Page by Page
April 21

<Mobile: Usability>

• 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

• 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
• Forms
https://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 Design
http://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>

• Page speed is a ranking factor since 2010
• Google Released a ton of tools and reports to
help improve page speed

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

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

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

“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 Redirects
http://googlewebmastercentral.blogspot.ca/2
014/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>

• Unplayable Videos
• Flash/Sliverlight
• Popups
• Sideway Scrolling
• Tiny Font/Buttons
• Device Specific Content
• Slow Pages
Broken Content

<Mobile: App Indexing>
<Mobile: Deep-Linking>

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

<Mobile: Social>

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

– 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

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

Google AdWords – Keyword Planner

• 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

• 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.com
LinkedIn

The Magic of Mobile SEO - ##CZLNY

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to The Magic of Mobile SEO - ##CZLNY

Similar to The Magic of Mobile SEO - ##CZLNY (20)

The Magic of Mobile SEO - ##CZLNY

Editor's Notes