SEO for CSS hide JS fade-in

I have an image that I want to fade in once the pag开发者_运维问答e loads.

I have set the css for that image to have zero opacity.

I then use js to fade the image in (increment the opacity to 1). This happens within about a second of the page loading.

I can imagine that elements with zero opacity won't add value to the SEO. However I know that the google crawler can read JS to some extent. Does this mean that it will understand that it is visible after a second and index it like any regular image?

Also how would the SEO be affected if I replaced the opacity with 'display:none' at page load and 'display: block' with JS a second later?

Any insight would be appreciated, cheers!

---

SEO is a dark art. The only people who can answer this question accurately will be Google's engineers, and they won't answer it. There are a lot of "SEO experts" who will bluff you that they know the answer, but the truth is that they're all of them making educated guesses.

My answer to the question follows, but bear in mind the above -- I am only making an educated guess.

Stuff like this is an edge case; if your page is well written and semantic then even if details like this do have an effect, it will be drowned out by the much more heavily weighted effect of the actual content.

In any case, the use of opacity and visibility in conjunction with dynamic content is so common these days that Google must be aware of it and factor it into their algorithms. Therefore I don't believe this will affect you. But to reiterate, this is an educated guess.

---

Replacing opacity with display styles shouldn't affect your SEO; but I do recommend the display:none, display:block option over opacity for more browser-compatibility. I'm not sure what the Crawler can read, but using opacity shouldn't hurt your image. If you want to add more SEO to it, add <figure> and or <figurecaption> around your image. and don't forget the alt and title attributes (nix title if you're using figcaption).

---

I'm pretty sure that this works well with seo:

<span style="text-indent: -9999px">
  This will not be visible on screen but readable by a crawler
</span>

and this should also work

<div style="position: relative; left: -9999px">
  This will not be visible on screen but readable by a crawler
</div>

But I do understand that these two techniques might not work in your specific case.