Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Note:My question is not about Javascript.

I'm developing a plugin for jQuery/Mootols/Prototype, that work with DOM.

This plugin will be to improve page performance (better user experience).

The plugin will be distributed to other developers so that they can use in their projects.

How does the lazyload: The images are only loaded when you scroll down the page

(will look like this: http://www.appelsiini.net/projects/lazyload/enabled_timeout.html LazyLoad).

But he does not need HTML5, I refer to this attribute: data-src="image.jpg"

Two good examples of website use LazyLoad are: youtube.com (suggested videos) and facebook.com (photo gallery).

I believe that the best alternative would be to use:

<A href="image.jpg">Content for ALT=""</a>

and convert using javascript, for this:

<IMG alt="Content for ALT=\"\"" src="image.jpg">

Then you question me: Why do you want to do that anyway?

I'll tell you: Because HTML5 is not supported by any browser (especially mobile)

And the attribute data-src="image.jpg" not work at all Indexers.

I need a piece of HTML code to be fully accessible to search engines. Otherwise the plugin will not be something good for other developers.

I thought about doing so to help in indexing:

<noscript><img src="teste.jpg"></noscript>

But noscript has negative effect on the index (I refer to the contents of noscript)

I want a plugin that will not obstruct the image indexing in search engines.

This plugin will be used by other developers (and me too).

This is my question: How to make a HTML images accessible to search engines, which can minimize the requests?

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

HTML5 data attributes exist purely for per-author, ad hoc extension purposes. So they will never be "supported" in any particular way other than to be ignored by browsers and useful for scripts or meta-data.

Suggestion #1

<a href="image.jpg"><img src="data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Info"></a>

Here you are not relying on src to direct the search engine to the image. You are relying on href. This has nothing to do with JavaScript or HTML 5. It's old fashioned HTML that sets the stage for JavaScript enhancement.

The only difference between this and your own first example is that I have used an img tag inside the a rather than text. This provides a better perceptual loading experience IMO, YMMV.

Suggestion #2

You might also check out some of the recent solutions for re responsive images for responsive design and retina displays. Check out http://24ways.org/2011/adaptive-images-for-responsive-designs-again/ for some thoughts in that direction?

Suggestion #3

Another alternative is: some lazyload scripts remove/replace the src onReady/onLoad, then put it back as the user scrolls. I haven't had as much luck with this, because the requests usually fire before the JS kicks in. But it is an option.

So your HTML source delivers, simply

<img src="image.jpg" alt="Info">

This has nothing to do with JavaScript or HTML5 and is index-able. Again, this sets the stage for later JavaScript enhancement. Your JS onReady or onLoad transforms this into

<img src="data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="image.jpg">

(If you are very paranoid, you might wrap this in <a href="image.jpg"></a> so that it is still index-able after manipulation.) This prevents the images from loading before you are ready. Then, as you scroll, the JavaScript can then transform the code back into:

<img src="image.jpg" alt="Info">

When it's time for the image to load. Which, again, is still index-able.

Edit Because it's somewhat relevant, I'd like to share http://www.iwdn.net/showthread.php?t=5914 as a most reliable resource about indexing. Unfortunately, it's several years old at this point and the experiment hasn't been repeated.

share|improve this answer
    
Thanks, but... As I said on html5: Because html5 is not supported by any browser (especially mobile). And the attribute data-src="image.jpg" not work at all Indexers. And I add, I need something that is independent of html5 (ie validate in HTML4 as well), since this plugin will be distributed to other developers. And I repeat, my doubts about indexing of images is not about javascript. I'm sorry, but I will speak: read the entire question before answering. Sincerely Guilherme. –  Guilherme Nascimento Dec 6 '12 at 13:17
    
My first suggestion is valid HTML 3.2, HTML 4, HTML 4.1, and HTML 5 and will allow images to be indexed. My second is example also serves index-able, valid HTML 3.2, HTML 4, HTML 4.1, and HTML 5 which JavaScript then transforms afterward. Since I am pretty much agreeing with your own first example you obviously misread. We used the first solution on a recent project and not only are our images are indexed, but our specialist SEO consultants approved it. I updated my post to hopefully increase clarity. –  morewry Dec 6 '12 at 17:10
1  
Suggestion # 1: Search engines may end up indexing the contents of src (ie. data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAO‌​w==)? Suggestion # 3: If search engines index this way, then the best thing would be to use <noscript><img src="image"></noscript> if javascript is enabled the DOM-Javascript takes the contents of noscript and transforms it: <img src="image">, agree? Thanks (+1 for you) –  Guilherme Nascimento Dec 6 '12 at 18:32
    
Good catch! That base64 string represents a single transparent pixel. An alternative, though it adds an HTTP request: you could use src="placeholder.gif" and Disallow: placeholder.gif in robots.txt. I've also tried the noscript approach on a slideshow and it did work several years ago. The only downside was that since you have to do it for every image, the markup got a little cluttered. –  morewry Dec 6 '12 at 19:20
1  
If so, there would be positive trades not only in performance, but also that by using href you can also create a pattern to easily control which version of an image gets indexed if you have, for example, two sizes of the same image, by linking to the canonical one. OTOH, the text around an image contributes to an SE's ability to categorize that image. So you may lose some opportunity for relevance if your index image isn't inline as an src with the rest of your content. Lots to consider. –  morewry Dec 6 '12 at 23:58
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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