9. #C3NY
9
SERPS INSPIRED BY MOBILE-FIRST DESIGN
John Shehata | @JShehata
10. #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
John Shehata | @JShehata
MOBILE RANKINGS
12. #C3NY
12
Responsive Dedicated Dynamic Serving
John Shehata | @JShehata
• 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
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
John Shehata | @JShehata
RESPONSIVE SITES
14. #C3NY
14
RESPONSIVE SITES - SEO
• Check Google Webmaster Tools Crawl Errors for Redirect & 404
John Shehata | @JShehata
Errors
• Allow Search Engines to crawl all assets (CSS, Images, JS)
• Check Page Load Time for Mobile and Desktop
• Optimize Speed
15. #C3NY
15
• 1 URL
• Link Consolidation
• Capacity for different mobile content
• Slower
• Higher Cost to maintain
• Old Redirect Lists
• Complex technical implementation
• Crawled Multiple Times
John Shehata | @JShehata
DYNAMIC SERVING
16. #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
John Shehata | @JShehata
DYNAMIC SERVING
18. #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.
John Shehata | @JShehata
19. #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/
John Shehata | @JShehata
googlebot-mobile
20. #C3NY
20
REDIRECTION TECHNIQUES
Using HTTP redirection (Recommended)
• Faster
• The redirection is done based on the user-agent in the HTTP request
John Shehata | @JShehata
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)
21. #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.
John Shehata | @JShehata
22. #C3NY
22
DEDICATED MOBILE SITES
• Better Mobile Experience
• Faster
• Dedicated Mobile Content
• Easier Implementation
• Link Equity Dilution
• Higher Cost to maintain
• Crawled Multiple Times with different user agents
John Shehata | @JShehata
23. #C3NY
23
DEDICATED MOBILE SITES
• 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>
John Shehata | @JShehata
24. #C3NY
24
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
John Shehata | @JShehata
site). Track Clicks!!
• Make Sure the mobile Site is Spider-able (robots.txt and meta
tags)
25. #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
John Shehata | @JShehata
• 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
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-
John Shehata | @JShehata
for-crawling.html
27. #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
John Shehata | @JShehata
28. #C3NY
28
TABLETS
• Google has no specific recommendations for search engine
John Shehata | @JShehata
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
30. #C3NY
30
MOBILE RANKING FACTORS
• SEO Traditional Ranking factors
• Important Ranking Factors
John Shehata | @JShehata
– User Experience
– Speed/Performance
• Negative Mobile SEO Factors
– Mobile Errors
– Broken Content
32. #C3NY
32
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
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
John Shehata | @JShehata
• Use legible font sizes
• Size tap targets appropriately
34. #C3NY
34
John Shehata | @JShehata
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/
36. #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!!
John Shehata | @JShehata
WHERE TO START?
37. #C3NY
37
GOOGLE PAGESPEED INSIGHTS TOOL
John Shehata | @JShehata
39. #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
John Shehata | @JShehata
40. #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
John Shehata | @JShehata
• Optimize Images
– Proper formatting and compression
– Use Web fonts instead of encoding text in images
41. #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
John Shehata | @JShehata
OPTIMIZE SPEED
42. #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
John Shehata | @JShehata
• Optimize CSS Use
– Put CSS in the document head
– Avoid CSS imports (@import)
– Inline render-blocking CSS
43. #C3NY
43
• Make your mobile pages render in under one second
– http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-
John Shehata | @JShehata
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
45. #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
John Shehata | @JShehata
MOBILE ERRORS
46. #C3NY
46
• First, Check Google Webmaster Tools Crawl Errors
John Shehata | @JShehata
MOBILE ERRORS
47. #C3NY
47
FAULTY REDIRECTS
• Google Reporting Faulty Mobile Redirects
http://googlewebmastercentral.blogspot.ca/2014/06/faulty-redirects.
John Shehata | @JShehata
html
49. #C3NY
49
UNPLAYABLE VIDEOS
• Verify no flash is used for navigation, videos, or other elements
John Shehata | @JShehata
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.
50. #C3NY
50
INTERSTITIALS
x x
• Avoid App Download Interstitials (use banners instead)
John Shehata | @JShehata
51. #C3NY
51
MOBILE ERRORS
• Irrelevant cross-linking between desktop and mobile content
John Shehata | @JShehata
• 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
64. #C3NY
64
GOOGLE ANALYTICS
• Study your site’s current traffic
– Desktop, Tablet, Mobile
– Check Devices Traffic
– Check Operating Systems
John Shehata | @JShehata
65. #C3NY
65
• Mobile, Tablet, Mobile & Tablet are 3 System Segments
• You need to create a desktop traffic segment
John Shehata | @JShehata
DESKTOP SEGMENT
66. #C3NY
66
MOBILE/TABLET SEGMENT
John Shehata | @JShehata
• Use System Segments
• Create Advanced Segments
(Mobile Organic)
67. #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)
John Shehata | @JShehata
MOBILE ANALYTICS
69. #C3NY
69
SPEED SUGGESTIONS REPORT
John Shehata | @JShehata
70. #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');
});
John Shehata | @JShehata
71. #C3NY
71
GWT: SEARCH QUERIES
• Google Webmaster Tools
– Mobile stats vs. All (Not Web)
John Shehata | @JShehata
• Use Mobile Filters
– Compare Keywords in Mobile vs. All
– Compare top pages in Mobile vs. All
72. #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
John Shehata | @JShehata
84. #C3NY
84
• Choose the site structure Wisely. Responsive is not the answer for
John Shehata | @JShehata
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
85. Thank You
John Shehata
@JShehata
John Shehata | @JShehata
Hinweis der Redaktion
Wordpress requires retreiving all data from DB, assets for it to load
How a browser loads a webpage
Browser downloads HTML file
It parses (looks through) the HTML
It encounters something it must load (image, external CSS file, etc.) and stops parsing HTML
It loads the external resource
If external resource is CSS or Javascript it then parses that file
It then continues to parse the HTML until it comes to another resource that must be loaded
How a browser loads a webpage
Browser downloads HTML file
It parses (looks through) the HTML
It encounters something it must load (image, external CSS file, etc.) and stops parsing HTML
It loads the external resource
If external resource is CSS or Javascript it then parses that file
It then continues to parse the HTML until it comes to another resource that must be loaded
How a browser loads a webpage
Browser downloads HTML file
It parses (looks through) the HTML
It encounters something it must load (image, external CSS file, etc.) and stops parsing HTML
It loads the external resource
If external resource is CSS or Javascript it then parses that file
It then continues to parse the HTML until it comes to another resource that must be loaded