advanced mobile seo - john shehata - c3 2014
DESCRIPTION
Advanced Mobile SEO - John Shehata - C3 2014TRANSCRIPT
WHY MOBILE, WHY NOWJohn 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
John Shehata | @JShehata
• Mobile Usage Over Takes Desktop for the First Time in History
MOBILE USAGE
5#C3NY
John Shehata | @JShehata
• 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
6#C3NY
John Shehata | @JShehata
• Google/Search Engines May be Scaring your Mobile Users Away
MOBILE SCARE
7#C3NY
John Shehata | @JShehata
• “Google Mobile Queries May Surpass PC Search This Year” Matt Cutts
SMX West, March 2014
MOBILE SEARCHES
8#C3NY
John Shehata | @JShehata
MOBILE-FIRST DESIGN INITIATIVE - GOOGLE
9#C3NY
John Shehata | @JShehata
SERPS INSPIRED BY MOBILE-FIRST DESIGN
10#C3NY
John Shehata | @JShehata
“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
John Shehata | @JShehata
12#C3NY
John Shehata | @JShehata
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
John Shehata | @JShehata
• 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
John Shehata | @JShehata
• 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
John Shehata | @JShehata
• 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
John Shehata | @JShehata
- 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
17#C3NY
John Shehata | @JShehata
VARY HEADER
18#C3NY
John Shehata | @JShehata
• 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
John Shehata | @JShehata
• 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
20#C3NY
John Shehata | @JShehata
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
John Shehata | @JShehata
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
John Shehata | @JShehata
• 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
John Shehata | @JShehata
• 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
24#C3NY
John Shehata | @JShehata
• 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
25#C3NY
John Shehata | @JShehata
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
John Shehata | @JShehata
• 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
27#C3NY
John Shehata | @JShehata
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
28#C3NY
John Shehata | @JShehata
• 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
30#C3NY
John Shehata | @JShehata
• 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
John Shehata | @JShehata
32#C3NY
John Shehata | @JShehata
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
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
• Use legible font sizes
• Size tap targets appropriately
OPTIMIZE USER EXPERIENCE
34#C3NY
John Shehata | @JShehata
• 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:
Mobile: Speed / Performance
John Shehata | @JShehata
36#C3NY
John Shehata | @JShehata
“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
John Shehata | @JShehata
GOOGLE PAGESPEED INSIGHTS TOOL
38#C3NY
John Shehata | @JShehata
Read: https://developers.google.com/web/fundamentals/performance/
OPTIMIZED RENDERING
39#C3NY
John Shehata | @JShehata
• 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
40#C3NY
John Shehata | @JShehata
• 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
41#C3NY
John Shehata | @JShehata
• 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
42#C3NY
John Shehata | @JShehata
• 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
John Shehata | @JShehata
• Make your mobile pages render in under one second– http://calendar.perfplanet.com/2012/make-your-mobile-pages-re
nder-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
John Shehata | @JShehata
45#C3NY
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
46#C3NY
John Shehata | @JShehata
• First, Check Google Webmaster Tools Crawl Errors
MOBILE ERRORS
47#C3NY
John Shehata | @JShehata
• Google Reporting Faulty Mobile Redirectshttp://googlewebmastercentral.blogspot.ca/2014/06/faulty-redirects.html
FAULTY REDIRECTS
48#C3NY
John Shehata | @JShehata
49#C3NY
John Shehata | @JShehata
• 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
John Shehata | @JShehata
• Avoid App Download Interstitials (use banners instead)
INTERSTITIALS
x x
51#C3NY
John Shehata | @JShehata
• 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
53#C3NY
John Shehata | @JShehata
• Unplayable Videos• Flash/Sliverlight• Popups• Sideway Scrolling• Tiny Font/Buttons• Device Specific Content• Slow Pages
BROKEN CONTENT
Mobile: App Indexing & Deep-Linking
John Shehata | @JShehata
55#C3NY
John Shehata | @JShehata
https://developers.google.com/app-indexing/
APP INDEXING & DEEP LINKS
56#C3NY
John Shehata | @JShehata
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
57#C3NY
John Shehata | @JShehata
• 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
John Shehata | @JShehata
59#C3NY
John Shehata | @JShehata
• FB: 78% Of US Users Are Mobile
MOBILE: SOCIAL
60#C3NY
John Shehata | @JShehata
• Check how your Social Media buttons appear in mobile
MOBILE: SOCIAL
61#C3NY
John Shehata | @JShehata
• Dark Social Traffic (Apps Traffic is registered as Direct)
MOBILE: SOCIAL
62#C3NY
John Shehata | @JShehata
MOBILE: EMAILS
Mobile: Analytics & Tools
John Shehata | @JShehata
64#C3NY
John Shehata | @JShehata
• Study your site’s current traffic– Desktop, Tablet, Mobile– Check Devices Traffic– Check Operating Systems
GOOGLE ANALYTICS
65#C3NY
John Shehata | @JShehata
• Mobile, Tablet, Mobile & Tablet are 3 System Segments• You need to create a desktop traffic segment
DESKTOP SEGMENT
66#C3NY
John Shehata | @JShehata
• Use System Segments
• Create Advanced Segments (Mobile Organic)
MOBILE/TABLET SEGMENT
67#C3NY
John Shehata | @JShehata
• 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
68#C3NY
John Shehata | @JShehata
PAGE TIMING
69#C3NY
John Shehata | @JShehata
SPEED SUGGESTIONS REPORT
70#C3NY
John Shehata | @JShehata
– 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
John Shehata | @JShehata
• 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
John Shehata | @JShehata
• 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
John Shehata | @JShehata
Mobile All
Query Impressions Clicks CTRAvg. position Impressions Clicks CTR
Avg. position
Mobile/AllImpressions
Mobile/AllClicks
Mobile - allCTR
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% -
GWT + EXCEL- Find Low/High Mobile Impressions, Clicks, CTR- Check Mobile Rankings and Display
74#C3NY
John Shehata | @JShehata
CONDUCTOR
75#C3NY
John Shehata | @JShehata
GOOGLE FETCH
76#C3NY
John Shehata | @JShehata
77#C3NY
John Shehata | @JShehata
DENIED BY ROBOTS.TXT
78#C3NY
John Shehata | @JShehata
• https://developer.chrome.com/devtools/docs/mobile-emulation
EMULATING DEVICES
79#C3NY
John Shehata | @JShehata
GOOGLE ADWORDS – KEYWORD PLANNER
80#C3NY
John Shehata | @JShehata
• 2013
• 2014
PIZZA
81#C3NY
John Shehata | @JShehata
• Gas Station
LOCAL
82#C3NY
John Shehata | @JShehata
• http://mobitest.akamai.com/ • http://validator.w3.org/mobile/• Browser Extension user-agent switcher• http://developers.google.com/speed/pagespeed/insights/
MORE TOOLS
<Mobile />
John Shehata | @JShehata
84#C3NY
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@JShehata