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>


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?

  • now is your intent to make these "text" invisible to users or visible? You can simply put a description/caption for each image w/ Nivo
    – KJYe.Name
    Feb 5, 2013 at 14:49
  • The text would be nicely styled text that would need to be positioned over the background image. The text maybe multicoloured / multi sized. I know there are basic titles for nivo slider, but I don't think there is anything better than that.
    – james
    Feb 5, 2013 at 15:20
  • you can manually modify the CSS for nivo-slider. if that's the case just use caption.
    – KJYe.Name
    Feb 5, 2013 at 15:22
  • The problem with doing that would be the text wouldn't animate with the rest of the image. What i'm looking for is a way to have the text in the image, yet still have the text there for seo purposes.
    – james
    Feb 5, 2013 at 16:42
  • I would like to think just setting the title tag of the image would work. But I hear these days alt tags / title tags don't hold as much weight
    – james
    Feb 5, 2013 at 16:46

1 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).

  • Would having hidden text between or above each slide have the same amount as weight on SEO as having the actual text visable on the page? I know that Google must make allowances for hidden content (due to all the JS used now days). But as long as the content is in the area of the images with the actual "graphical" text on would google know that its "display:none" ?
    – james
    Feb 6, 2013 at 15:14
  • It's one of these gray areas. I'd say that as long as it's not just a dumb list of keywords there - it should have the same weight as any other content. Still though - in a modern webpage you shouldn't have slider before the content in HTML code. Making a proper website will make you 100% secure. Feb 6, 2013 at 15:22
  • I didnt realize that was an issue with modern website.. Lots of modern looking websites have sliders at the top of the page. Do you have any resources on why this is no longer a good idea?
    – james
    Feb 6, 2013 at 15:29
  • Or more to my point, a slider with the key messages of the website.
    – james
    Feb 6, 2013 at 15:37
  • I think you need to distinguish the client side from code side. The slider can be on top of the page, but it doesn't need to be on top of the HTML code. You can have a website where there is no slider AT ALL in website HTML because it's progressively added by JavaScript. Read the progressive enhancement article. That's what you should aim for in regards of SEO. Content is king and one of the ways to further promote it is by pushing it up in HTML hierarchy while pulling flashy things down to scripts layer. Feb 6, 2013 at 15:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.