At the recent SMX Advanced conference in Seattle, Google’s Tech Lead for its developer program, Maile Ohye, spoke on a panel entitled, “Complicated Technical Issues That Sabotage SEO Efforts.” (There’s an excellent write-up on it here.)

She discussed (among other things) the company’s recently announced changes to rankings in smartphone search results based on mobile user experience.

Consolidating Google's Image & Mobile Guidelines for SEO Advantage

Consolidate your image optimisation strategy with your mobile strategy to best affect your SEO traffic.

Soon after, RKG chief product officer, and SEL contributing editor, Vanessa Fox produced an excellent write-up on technical SEO for mobile sites, in which she discussed different methods of optimising websites for different devices (in general URL architecture terms), including the benefits and challenges of each method.

Page Load Time Is Important For Mobile

Interestingly, one of the key takeaways of both Maile’s presentation and Vanessa’s write-up is that page load time has become a significant a ranking signal for mobile searches.

Google wants to provide mobile searchers with the best experience possible, and page response times are a part of this experience. This means that poor load times for mobile and smartphone users have the potential to negatively impact rankings to a greater degree than ever before — and that degree will only increase as time goes on.

This follows the trend we’ve seen for desktop searches over the last couple of years, with page speed being given greater weight as a ranking factor over time. However, it’s apparent that Google’s threshold for speedy page response times is much tighter for mobile and smartphone devices (sub 1 second) than it is for desktops (sub 3 seconds).

Responsive Design & The Challenges For Image Optimisation

As a relapsed website coder myself, I find that responsive design is the most attractive solution for creating a mobile experience. It’s lightweight in terms of code and server impact, it’s easily executed and debugged, and it’s simple to maintain and support.

In short, if you know what you are doing, then it’s likely the preferred solution when building a website out from scratch — especially given that there are plenty of other ways to dynamically use your server’s processing power per page request (this is especially true for enterprise-level websites).

Given the page load time issue, a preference for responsive design might appear to sound the death knell for effective image search optimisation, given that the first casualties of responsive design websites are often large page assets (big images, basically).

Why? Because replacing the <img> tag with images called for via CSS removes the ability to optimise those images effectively with alt attributes and captioning. You also create a canonicalisation issue when listing multiple versions of the same image (each sized for different devices) with equal weighting (one each linked by its CSS file, called on page load using media queries).

The alternative — housing the image with the lowest file size in the <img> and then “switching it out” via the CSS for non-mobile devices — prioritises the lowest file size images, which typically fare worse for image optimisation. Google prefers to show bigger, better quality images where possible to facilitate user conversion (is an image searcher likely to click through the smallest, hardest to distinguish version of an image presented to them?).

So what? I hear you say. Who uses Google Image search anyway?

Well, according to Google (in informal meetings I’ve had with them on behalf of clients), ~10% of all searches are via Google Image search. It’s true that the click flow is much lower since the image search redesign – but even accounting for that, image search is a huge market.

If you also consider the relative lack of optimisation in image searches for many of the higher-competition marketplaces, as well as images’ ability to help convince browsers to commit to a purchase in e-commerce, it should be clear that neglecting image optimisation in your campaign would be criminal.

How Do We Optimise For Image Search Via Responsive Design?

Fortunately, we have some handy tools available to us to keep our code light, prioritise the best image, and scale beautifully for smartphones of all resolutions.

To deliver this robustly, we can use Fluid Image techniques developed by Ethan Marcotte to allow for smooth image scaling cross-browsers using CSS. We can then link to our preferred large image in the HTML (optimised for SEO in the standard ways) and use Adaptive Images (or an equivalent in your dynamic language of choice) to handle loading in appropriate image file sizes for your requesting device.

Et voilà!

Being a belt and braces (that’s “belt and suspenders” to you Americans) sort of SEO, I’d follow up my selected image optimisation with a unique image sitemap listing the appropriate image URLs and their associated <image:title> and <image:caption> information to disambiguate my preferred file from any file indexed via stray or external linking.

Opinions expressed in the article are those of the guest author and not necessarily Search Engine Land.

Related Topics: All Things SEO Column | Channel: SEO | Multinational Search | SEO: Image Search | SEO: Mobile Search

Sponsored


About The Author: has over twelve years web development experience & is the founder of QueryClick Search Marketing, a UK agency specialising in SEO, PPC and Conversion Rate Optimisation strategies that deliver industry-leading ROI.

Connect with the author via: Email | Twitter | Google+ | LinkedIn



SearchCap:

Get all the top search stories emailed daily!  

Share

Other ways to share:

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. Comments may also be removed if they are posted from anonymous accounts. You can read more about our comments policy here.
  • http://wwwNickBogatin.com/ Nick Bogatin

    I typically use max-width for any background CSS driven images and I’ve usually added a class which handles the image sizing via max-width for each image driven by html. So, it is always the largest image possible being loaded and it shrinks when necessary. So for example . But the adaptive images concept is definitely something worth considering. I like the way it handles the whole process. Also, though I’ve known about image sitemaps, I’ve never implemented one so I’m going to take this as a push to get it done. Thanks for an enlightening article.

  • Cindy Krum

    Great article! This is stuff I have been telling clients for awhile. Glad to see I am not the only one – PS: I quoted you today in a write up for a project – Thanks!

  • lisa741

    as Johnny answered I cannot believe that any body able to make $9988 in four weeks on the computer. did you look at this site w­w­w.K­E­P­2.c­o­m

  • http://www.spinxdigital.com/ Stephen Moyers

    People are now being more mobile and surfing things on mobile instead of their desktop.So for creating a good user experience to users on mobile I prefer to create a website with responsive web design and tools and method which you have shown
    for image scaling in responsive website is really awesome. Thank for sharing!!!

  • http://uk.queryclick.com/ Chris Liversidge

    Glad you got some good value from this nick!

  • http://uk.queryclick.com/ Chris Liversidge

    Thanks Cindy – always nice to get referenced!

  • http://uk.queryclick.com/ Chris Liversidge

    You’d only include the larger, preferred version of any image in the sitemap. That’s a strong signal to Google that it’s the preferred version for indexing. It can act like a ‘soft’ canonical to help consolidate link value / solve indexing issues.

  • http://www.webphenoms.com/ Joelle Ayala

    I knew about the image sitemap tip, but had know idea about the discrepancy of image seo for responsive sites. Thanks for the heads up.

    On another note, I’m not sure if I should use Disqus for blog commenting on my site, does anyone have anything to say regarding whether this is good for SEO? I know that it’s in an iframe and I think it’s up to google whether they crawl an iFrame or not…any advice would be great.

    Thanks in Advance

    Joelle Ayala
    Co Founder and Director of Growth @ WebPhenoms.com

  • http://uk.queryclick.com/ Chris Liversidge

    If you want the comment content to apply freshness to your page (the framing page) then it’s not a good choice. There was also an indexing bug for Google which is largely cleared up now.

    All that said, for convenience of commenting and adding an easy value add it’s a great system and the best of the non-do-it-yourself commenting systems out there. We use it at QueryClick as were not looking for add-on unique UGC or freshness signals.

 

Get Our News, Everywhere!

Daily Email:

Follow Search Engine Land on Twitter @sengineland Like Search Engine Land on Facebook Follow Search Engine Land on Google+ Get the Search Engine Land Feed Connect with Search Engine Land on LinkedIn Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Search News Recap!

SearchCap is a once-per-day newsletter update - sign up below and get the news delivered to you!

 


 

Search Engine Land Periodic Table of SEO Success Factors

Get Your Copy
Read The Full SEO Guide