mobile seo considerations
Post on 14-Jan-2015
819 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related