Mobile SEO Considerations
Upcoming SlideShare
Loading in...5
×
 

Mobile SEO Considerations

on

  • 1,004 views

As sophisticated smartphones and faster internet connections gain greater market share, accessing the Web via mobile devices is becoming standard practice. 45% of all consumers use Smartphone for ...

As sophisticated smartphones and faster internet connections gain greater market share, accessing the Web via mobile devices is becoming standard practice. 45% of all consumers use Smartphone for in-store product research and browsing, 72% of tablet owners make purchases from their devices on a weekly basis, 60+% US accessing mobile Internet. Mobile is exploding, and it's no longer the future of search, it is the now of search.

Statistics

Views

Total Views
1,004
Views on SlideShare
968
Embed Views
36

Actions

Likes
0
Downloads
6
Comments
0

1 Embed 36

http://revadigital.com 36

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • You can also use logical operators to make more complex queries, e.g. not, and, only.
  • As we think about content, code and structure, now is the time to develop strategies that put mobile first.
  • There’s opposing camps in the field. Some say responsive design is the best approach, others adaptive, and then there’s folks like Jakob Nielsen that say the best experience can only be derived from having two separate websites.
  • If a web experience that is truly distinct from the desktop experience is required, then this may be considered alongside adaptive design.
  • If a Web experience that is truly distinct from the desktop experience is required, then you can also consider adaptive design.
  • In a responsive website, the same HTML is always sent. Google algorithms should automatically detect this setup. No redirects are required. A single web address is shared.
  • You can also use logical operators to make more complex queries, e.g. not, and, only.
  • You can also use imports but that is not recommended.
  • You can also use imports but that is not recommended.
  • Adaptive design, like creating two sites, allows targeting of specific hardware, but maintaining a single shared site preserves a canonical URL, avoids complicated redirects, and simplifies the sharing of a web addresses. Use vary HTTP header as a hint to request that Googlebot-Mobile crawl the mobile pages.
  • Recommendation is to use HTTP redirection.
  • The media landscape is changing and it’s important to allow mobile considerations to drive decisions on content and structure.

Mobile SEO Considerations Mobile SEO Considerations Presentation Transcript

  • MOBILE SEO CONSIDERATIONS Presented by: Reva McEachern Principal, REVA Digital Media We live in a world where everything is mobile, thus the best mobile strategy is to be mobile by design. R E VA D I G I TA L . C O M
  • EVERYTHING IS MOBILE It’s a sociological shift in how users relate with both the digital and physical world. Mobile Changes Everything. Mobility IS Everything. Everything is MOBILE. R E VA D I G I TA L . C O M
  • MOBILE INTERNET USE Failing to develop a mobile strategy means you’re ignoring a large part of your users. 2011-2012 Statistics 45% of all consumers use Smartphone for in-store product research and browsing 72% of tablet owners make purchases from their devices on a weekly basis 60+% US accessing mobile Internet Gartner, Google, Cisco R E VA D I G I TA L . C O M
  • MOBILE WEBSITE OPTIMIZATION VIEWS “Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.” - Jakob Nielsen, Web usability guru “All that we can really know about mobile users is that they’re on a small screen, and we can’t divine user intent from that.” - Josh Clarke, Web developer and mobile specialist R E VA D I G I TA L . C O M
  • SEPARATE DESKTOP / MOBILE SITE When using separate desktop and mobile URLs, implement a two-way annotation that helps Google discover your content and understand the relationship between your desktop and mobile pages. Pros • Mobile-specific content • Mobile-specific interface Cons • Multiple URLs • More work updating content Remember • Ensure that annotations are bidirectional Avoid • Creating a site that is not a true desktop alternate R E VA D I G I TA L . C O M
  • DESKTOP / MOBILE SITE ANNOTATIONS Google also supports the rel=“alternate” annotation for the desktop pages in Sitemaps. Note the required rel="canonical" tag on the mobile URL should still be added to the mobile page's HTML. <link rel="alternate" media="only screen and (max- width: 640px)" href="http://m.jcrew.com" > <link rel="canonical" href="http://www.jcrew.com" > <?XML VERSION="1.0" ENCODING="UTF-8"?> <URLSET XMLNS="HTTP://WWW.SITEMAPS.ORG/SCHEMAS/SITEMAP /0.9" XMLNS:XHTML="HTTP://WWW.W3.ORG/1999/XHTML"> <URL> <LOC>HTTP://WWW.JCREW.COM</LOC> <XHTML:LINK REL="ALTERNATE" MEDIA="ONLY SCREEN AND (MAX-WIDTH: 640PX)"HREF="HTTP://M.JCREW.COM" /> </URL> </urlset> desktop mobile sitemap R E VA D I G I TA L . C O M
  • RESPONSIVE DESIGN Responsive design utilizes CSS media queries to scale and adapt a website to any device it’s viewed on. The typical media query used to resize for a smartphone: @media only screen and (max-width: 640px) Pros • Single URL, better for SEO • Easier to maintain content Cons • Requires mobile-first redesign • Too much info for mobile user Remember • Be sure not to block Googlebot from crawling page assets R E VA D I G I TA L . C O M
  • MEDIA QUERY MATH Media queries consist of a media type and one or more expressions, involving features, that resolve to either true or false. The result of the query is true if the media query matches the type of device the document is being displayed on and all expressions in the media query are true. Media type Media expression True/False R E VA D I G I TA L . C O M
  • CSS MEDIA QUERIES Media queries do not prevent CSS downloads. Separate CSS per media can mean a lot of CSS and a lot of unnecessary resources being downloaded if not properly optimized. Avoid too many requests for images and image rescaling through CSS. Avoid • Download and hide • Download and shrink • Excess CSS downloads Do • Use responsive media @media screen and (min-width : 640px) { /* let's do somethin' */ } stylesheet <link rel="stylesheet" media="screen and ( max-width: 640px)" href="small.css" /> link to stylesheet R E VA D I G I TA L . C O M
  • OPTIMIZING IMAGES FOR MOBILE For decorative images, use background images rather than img tags. Combining background images and media queries makes it easy to swap out large desktop for small mobile images. Android devices request all background images. Avoid • Too many server requests • Using large sprites >520K Do • Use image sprites sprite R E VA D I G I TA L . C O M
  • ADAPTIVE DESIGN In adaptive design, dynamic serving is a setup where the server responds with different HTML (and CSS) on the same URL depending on the user agent requesting the page. Pros • Loads only what is needed • Easier to maintain content Cons • Requires browser detection Remember • Use vary HTTP header • Make redirection consistent w/ rel="alternate" tag and Sitemap R E VA D I G I TA L . C O M
  • REDIRECTS & USER AGENT DETECTION GET /page-1 HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19 (...rest of HTTP request headers...) HTTP/1.1 200 OK Content-Type: text/html Vary: User-Agent Content-Length: 5710 (... rest of HTTP response headers...) Avoid • Irrelevant redirects • Incomplete lists of user-agents • JavaScript redirects Do • Use HTTP redirection JavaScript can also be used to redirect users to the URLs pointed to by the link rel="alternate" tag. But the client side needs to first download the page, then parse and execute the JavaScript before triggering the redirect. vary http header R E VA D I G I TA L . C O M
  • FINAL THOUGHTS There's a world of change already playing out with how websites are made. For the purposes of search, this comes down to microdata and adaptive design. Microdata means that your website becomes a giant explicit data feed of products, locations, and a growing list of things as defined at schema.org. Adaptive design means that, eventually, you can unify your mobile, tablet and desktop versions of your sites, meaning fewer targets for search, less dilution, and therefore better positions. R E VA D I G I TA L . C O M
  • RECOMMENDATIONS If a client is starting from scratch or considering a redesign, recommend Responsive Design to ensure a mobile-first strategy If Adaptive Design is used, recommend that user-agent strings are up to date and the site provides users a way to override the redirect policy for an optimal experience If Separate Desktop and Mobile URLs are already used, evaluate whether the mobile site is a true desktop alternate and recommend the proper annotations be implemented to avoid PageRank split Remember that numerous factors must be considered when developing a mobile strategy, many of which extend beyond the wheelhouse of SEO alone Stay abreast of advances in Microdata and Adaptive Design. These things will drastically alter the mobile search experience in the near future R E VA D I G I TA L . C O M
  • RESOURCES Media Queries: https://developer.mozilla.org/en-US/docs/CSS/Media_queries Building Smartphone Optimized Websites: https://developers.google.com/webmasters/smartphone-sites/details Designing for the mobile web: Special considerations: http://www.uxmatters.com/mt/archives/2011/01/designing-for-the-mobile-web- special-considerations.php 10 key considerations for your mobile Web design strategy: http://mashable.com/2011/03/24/mobile-web-design-tips/ Guidelines for mobile Web development: http://www.smashingmagazine.com/guidelines-for-mobile-web-development/ Considerations for mobile design 3 part series: http://www.uxbooth.com/blog/considerations-for-mobile-design-part-1-speed/ Contact Me: Reva McEachern, hello@revadigital.com, revadigital.com R E VA D I G I TA L . C O M