CODEWITHSUNDEEP
imageseolazy-loadinggoogle-search
nickpish
nickpish

Reputation: 847

Lazy-loading images via JS with <noscript> fallback

I'm using a jQuery slider to display a series of images and none of them are showing in a Google image search, even though we rank at the top of normal search results for the relevant keyword. My suspicion is that Google is not indexing the images because they're being (lazy-)loaded into the slider with JavaScript via the data-image attribute. It is critical for performance purposes that I lazy-load the images and not use a set of standard <img> tags instead, so I'm trying to figure out the best way to serve the assets in a way that's more easily indexed by search engines. I'm considering using the <noscript> tag within the slide markup as follows:

<li class="slide" data-image="img/image.jpg">
    <div class="caption">IMAGE INFO</div>
    <noscript><img src="img/image.jpg" alt="Image info" width="x" height="x"></noscript>
</li>

I'm curious if there are any potential issues with this approach, or if something entirely different would be preferable? Will search engines still consider this markup relevant with respect to SEO if it's contained within <noscript> tags?

Thanks for any insight here.

Upvotes: 1

Views: 3357

Answers (1)

Igor
Igor

Reputation: 383

The noindex tag is a solution, but not the best one. I had the same problem, first I tried image sitemaps, then noindex tag and finally I found the best solution. I wrote a blog post on this with a fully working example: Lazy loading and the SEO problem, solved!

The best solution is to use the method provided by Google to index AJAX contents. But it is not limited to AJAX, in fact you can use it on any dynamically generated content.

In my sample I use this method for an image gallery that loads images dynamically. In a few words you have to use escaped fragments. A fragment is the last part of the URL, prefixed by #. Fragments are not propagated to the server, they are used only on the client side to tell the browser to show something, usually to move to a in-page bookmark. If instead of using # as the prefix, you use #!, this instructs Google to ask the server for a special version of your page using an ugly URL. When the server receives this ugly request, it's your responsibility to send back a static version of the page that renders an HTML snapshot (the not indexed image in our case).

I generate HTML snapshots on the server side using ASP.NET (but you can generate them with any technology).

var fragment = Page.Request.QueryString["_escaped_fragment_"];
if (!String.IsNullOrEmpty(fragment))
{
    var escapedParams = fragment.Split(new[] { '=' });
    if (escapedParams.Length == 2)
    {
        var imageID = escapedParams[1];
        // Render the page with the gallery showing the requested image (statically!)
        ...
    }
}

The drawback of noscript tags method is that you provide a poor user experience, in fact the user is not able to bookmark the page showing a specific image. Using fragments and JavaScript you give users the best experience

if (window.location.hash)
{
    // NOTE: remove initial #
    var fragmentParams = window.location.hash.substring(1).split('=');
    var imageToDisplay = fragmentParams[1]
    // Render the page with the gallery showing the requested image (dynamically!)
    ...
}

Upvotes: 2

Related Questions