Thankfully the death knell for Flash started well over 3 years ago and now with the advent of tablet devices, notably the iPad, we hardly see any at all. In its place we find a plethora of JQuery based galleries and sliders.
JQuery widgets were once the domain of the particularly geeky (says he writing a tech blog!) with the whole case sensitive commands and obscure, code only access that has still meant that the odd Flash Gallery got used occasionally. But easy to use libraries are now emerging; the kind of thing where you can simply put your images on a page, surround them with a <div> and call a single line of code. Hey Presto! a working gallery. To the point where even the defaults are good enough!
I have been playing with a nice JQuery gallery called Galleria. It's reasonably pretty, free (in vanilla form) and has a nice series of options (not free but good value!) that are quite worth while. It's flexible enough that I've tweaked it to be a slider as well without having to re-invent the wheel and uses a reasonable css model that you can override quite easily. Not only that they have gone for all the latest HTML5 and CSS3 trickery so its fast and kept legacy browser compatibility. Oh and it's touch compliant for mobile and tablet use!
If you dig inside the code it's really quite a clever piece of coding, with nice calls you can make after its loaded to play with the functionality and with enough documentation to get you started. I'm glad I didn't have to write it!
Now for the big question, does it have any SEO value? It's a really good question, because it is naturally assumed that JQuery is parsed by the search engine spiders. The problem is that may be true for specific JavaScript tricks and redirects, but it doesn't work for content and it doesn't count towards the ranking of your page or images. What spiders really like is ordinary HTML with ordinary Tags; like <img> or <a> There is a nice article about it Image SEO that describes what gets indexed quite well.
Modern JQuery Galleries have nice solutions to this though. As with Galleria, all you need do is use ordinary image tags on your page <img src="MyHouse.jpg"> and the JQuery will pick them up and reformat the page to make it look like a gallery. This means you can assemble your images as you would for any ordinary page and populate it as you need to for SEO.
As a quick Summary this is what most of the spiders understand. (there is a lot more, but this is the simple version!)
- <img
The spider now knows its an image! - src="http://www.mysite.com/images/MyHouse.jpg"
This is where the image is, using a full path makes life easier for the spider (and quicker)
The usual caveats with friendly urls apply, the easier it is the more (little) marks you get! - alt="This is a picture of my house in Devon, it's beautiful in the sunny weather"
Really important bit! This gives the picture context and allows good indexing and relevance. Don't just use a list of keywords, you get more marks for something that makes sense, remember the spider needs to be quick, so Keep It SimpleS. Look to get a simple sentence structure with context and include small words that won't get indexed (it's the easiest way to check if it's a real sentence) - title="My House"
Apparently this isn't used to rank you result, but does help in the same way that a page title does in ordinary search results to give your image context where they may be hundreds of others. - >
Don't forget to close the tag!
At the time of writing, nothing else counts in the image tag. You may find your JQuery Widget lets you use other tags as well, typically data-description or data-something which are valid HTML but are not indexed, they often control internal linking and order, so are worth doing if you want to take the time.
I will agree with the developers <img> tags with loads of attributes doesn't make for nice code, i.e.:
<img src='images/WP_000039.jpg' data-title='Dog Washing' title='Dog Washing' data-description='This is actually our own Dalmatian, she doesn't like the bath so she is excellent practice!' alt='Dog Washing - This is actually our own Dalmatian, she doesn't like the bath so she is excellent practice!' data-thumb='images/T_WP_000039.jpg'>
JSON is a far nicer way to represent the data.
{
link: '/seo',
title: 'Dog Washing'
description: '<H2>Dog Washing</H2>
<p>This is actually our own Dalmatian, she doesn't like the bath so she is excellent practice!<p>',
image: 'images/WP_000039.jpg',
thumb: 'images/T_WP_000039.jpg',
},
But the search engines can't read it, so avoid it, unless you specifically don't want it read by the spider. Which is often the case if it's a slider that just repeats what is further down the page.
If you do it right you will be pleasantly surprised at how fast your images appear in Google, Bing et-al.
I've been pestering my wife to sort out her Dog Grooming Business, eventually I gave up and did a totally vanilla site and within a week the images in her little gallery started appearing in obscure Dog Grooming Searches, that's brownie points worth earning!
