Advanced Mobile SEO - John Shehata - C3 2014

WHY MOBILE, WHY NOW
John Shehata
Exec. Director, Search

#C3NY
2
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

#C3NY
4
• Mobile Usage Over Takes Desktop for the First Time in History
MOBILE USAGE

#C3NY
5
GOOGLE MULTI-SCREEN WORLD
• http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_
research-studies.pdf
• Read: http://moz.com/blog/why-mobile-matters-now

#C3NY
6
• Google/Search Engines May be Scaring your Mobile Users Away
MOBILE SCARE

#C3NY
7
• “Google Mobile Queries May Surpass PC Search This Year”
Matt Cutts
SMX West, March 2014
MOBILE SEARCHES

#C3NY
8
MOBILE-FIRST DESIGN INITIATIVE - GOOGLE

#C3NY
9
SERPS INSPIRED BY MOBILE-FIRST DESIGN

#C3NY
10
“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

#C3NY
12
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)

#C3NY
13
• 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

#C3NY
14
RESPONSIVE SITES - SEO
• 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

#C3NY
15
• 1 URL
• Capacity for different mobile content
• Slower
• Higher Cost to maintain
• Old Redirect Lists
• Complex technical implementation
• Crawled Multiple Times
DYNAMIC SERVING

#C3NY
16
- 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

#C3NY
17
VARY HEADER

#C3NY
18
AUTOMATIC REDIRECTS AND USER-AGENT
DETECTION
• 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.

#C3NY
19
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

#C3NY
20
REDIRECTION TECHNIQUES
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)

#C3NY
21
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.

#C3NY
22
DEDICATED MOBILE SITES
• Better Mobile Experience
• Faster
• Dedicated Mobile Content
• Easier Implementation
• Link Equity Dilution
• Crawled Multiple Times with different user agents

#C3NY
23
• 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>

#C3NY
24
• 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)

#C3NY
25
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)
• Better Mobile Experience
• Faster
• Dedicated Mobile Content
• Easier Implementation
• 1 URL
• Capacity for different mobile
content
Cons • Slower
• Same Mobile/Desktop Content
• Link Equity Dilution
• Crawled Multiple Times with
different user agents
• Slower
• 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

#C3NY
26
WORD OF CAUTION
• 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

#C3NY
27
CHANGING CONFIGURATION ON SMARTPHONE
WEBSITES
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

#C3NY
28
TABLETS
• 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

Mobile: Rankings

#C3NY
30
MOBILE RANKING FACTORS
• SEO Traditional Ranking factors
• Important Ranking Factors
– User Experience
– Speed/Performance
• Negative Mobile SEO Factors
– Mobile Errors
– Broken Content

Mobile: User Experience

#C3NY
32
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

#C3NY
33
OPTIMIZE USER EXPERIENCE
• 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

#C3NY
34
READ:
• 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/
• Mobile e-commerce Design
http://www.kaushik.net/avinash/web-design-user-experience-best-practices/

Mobile: Speed / Performance

#C3NY
36
“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?

#C3NY
37
GOOGLE PAGESPEED INSIGHTS TOOL

#C3NY
38
OPTIMIZED RENDERING
Read: https://developers.google.com/web/fundamentals/performance/

#C3NY
39
ABOVE-THE-FOLD (ATF) CONTENT
• 1 second load time for 'above-the-fold content' on mobile sites!
Read: https://developers.google.com/speed/docs/insights/mobile

#C3NY
40
OPTIMIZE SPEED
• 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

#C3NY
41
• 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

#C3NY
42
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

#C3NY
43
• 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

Mobile: Errors

#C3NY
45
“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

#C3NY
46
• First, Check Google Webmaster Tools Crawl Errors
MOBILE ERRORS

#C3NY
47
FAULTY REDIRECTS
• Google Reporting Faulty Mobile Redirects
http://googlewebmastercentral.blogspot.ca/2014/06/faulty-redirects.
html

#C3NY
48

#C3NY
49
UNPLAYABLE VIDEOS
• 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.

#C3NY
50
INTERSTITIALS
x x 
• Avoid App Download Interstitials (use banners instead)

#C3NY
51
MOBILE ERRORS
• 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: Broken Content

#C3NY
53
• Unplayable Videos
• Flash/Sliverlight
• Popups
• Sideway Scrolling
• Tiny Font/Buttons
• Device Specific Content
• Slow Pages
BROKEN CONTENT

Mobile: App Indexing & Deep-Linking

#C3NY
55
APP INDEXING & DEEP LINKS
https://developers.google.com/app-indexing/

#C3NY
56
TWITTER: APP INSTALLS AND DEEP-LINKING
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"/>

#C3NY
57
DEEP LINKS ERRORS
• Android Deep Links – Errors
– Mismatched content (paginated pages, expired content, blocked
resources)
– GWT errors
• You can track Google Traffic to Android App

Mobile: Social

#C3NY
59
• FB: 78% Of US Users Are Mobile
MOBILE: SOCIAL

#C3NY
60
• Check how your Social Media buttons appear in mobile
MOBILE: SOCIAL

#C3NY
61
• Dark Social Traffic (Apps Traffic is registered as Direct)
MOBILE: SOCIAL

#C3NY
62
MOBILE: EMAILS

Mobile: Analytics & Tools

#C3NY
64
GOOGLE ANALYTICS
• Study your site’s current traffic
– Desktop, Tablet, Mobile
– Check Devices Traffic
– Check Operating Systems

#C3NY
65
• Mobile, Tablet, Mobile & Tablet are 3 System Segments
• You need to create a desktop traffic segment
DESKTOP SEGMENT

#C3NY
66
MOBILE/TABLET SEGMENT
• Use System Segments
• Create Advanced Segments
(Mobile Organic)

#C3NY
67
• Check popular mobile pages with high bounce rate
Read: 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

#C3NY
68
PAGE TIMING

#C3NY
69
SPEED SUGGESTIONS REPORT

#C3NY
70
TRACK FULL-SITE LINKS W/ EVENTS
– 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');
});

#C3NY
71
GWT: SEARCH QUERIES
• 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

#C3NY
72
GWT: SEARCH QUERIES
• 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

#C3NY
73
GWT + EXCEL
- Find Low/High Mobile Impressions, Clicks, CTR
- Check Mobile Rankings and Display
Mobile All
Query Impressions Clicks CTR
Avg.
position Impressions Clicks CTR
Avg.
position
Mobile/All
Impressions
Mobile/All
Clicks
Mobile - all
CTR
Mobile – all
Avg. position
Query 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% -

#C3NY
74
CONDUCTOR

#C3NY
75
GOOGLE FETCH

#C3NY
76

#C3NY
77
DENIED BY ROBOTS.TXT

#C3NY
78
EMULATING DEVICES
• https://developer.chrome.com/devtools/docs/mobile-emulation

#C3NY
79
GOOGLE ADWORDS – KEYWORD PLANNER

#C3NY
80
PIZZA
• 2013
• 2014

#C3NY
81
LOCAL
• Gas Station

#C3NY
82
• http://mobitest.akamai.com/
• http://validator.w3.org/mobile/
• Browser Extension user-agent switcher
• http://developers.google.com/speed/pagespeed/insights/
MORE TOOLS

#C3NY
84
• 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

Advanced Mobile SEO - John Shehata - C3 2014

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Advanced Mobile SEO - John Shehata - C3 2014

Similar to Advanced Mobile SEO - John Shehata - C3 2014 (20)

Recently uploaded

Recently uploaded (20)

Advanced Mobile SEO - John Shehata - C3 2014

Editor's Notes