R E VA D I G I TA L . C O M

MOBILE SEO CONSIDERATIONS

Presented by: Reva McEachernPrincipal, 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 Statistics45% of all consumers use Smartphone for in-store product research and browsing72% of tablet owners make purchases from their devices on a weekly basis60+% 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 expressi

on

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