Content Sliders (Nivo Slider) and SEO

Question

With sliders like "nivo slider" it slices the image up into segments to perform its transitions. This means you cannot put "real" text over the top like you can with other basic transition sliders (e.g. jQuery Cycle)

(e.g. in jQuery cycle you could do something like this)

<div class="aSlide">

    <img src="ourImageWithNoText.jpg" />
    <div class="floatText"> here is some text we can postion over the top of our slide that will move as the slide moves</div>

</div>

Now if you have good SEO keywords in your slider (which maybe at the top of the page). You have to slice the text into the main image with nivo and you lose them keywords.

Would putting the same information in the title / alt tag work just as well? Or is it time to drop Nivo and go back to a slider you can position text over?

Answer 1

The most important thing is what google sees. You don't care what JavaScript does to the images. You care what Google reads.

Either use Fetch as Google or Lynx Web Browser to see how your website looks like from search engine perspective.

So first thing first - you should use alt tags on your images. This way it's more google-friendly, and actually becomes valid W3C code.

Secondly - as far as I can see on Nivo Slider website it's using quite clean HTML input

<div id="nivoslider-125" class="nivoSlider" style="width:700px;height:300px;"><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/nemo83-700x300.png" alt="" /><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/slider65-700x300.png" title="#nivoslider-125-caption-0" alt="" /><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/walle12-700x300.png" alt="" /></div>

so you shouldn't be bothered at all with the fact that is slices images. It could slice them, rotate, turn into a thousand pieces - it wouldn't matter at all. Google cannot see that. What should interest you is the HTML code. So your best bet in putting the description would be by using the longdesc attribute on img tag.

Alternative is that you use divs that are forced to be hidden. Like that:

<div style="display: none !important;">here is some text</div>

But I'm not sure if they won't collide with slider script, and doing things like that in general is a bad practice.

Third way would be to use progressive enhancement, and either - put your text descriptions in a placeholder Div, or don't put it at all onto a website.

In first case you'd want to replace your placeholder div holding your content with actual slider AFTER the main content is loaded (either use simple JS content or AJAX). In second case you'd add a slider into the proper spot after the main content is loaded (again: AJAX/JS) and in terms of SEO: Work as if slider wouldn't be there. Prioritize content instead (which is IMHO the best thing you can do).