Welcome to Idea R | Branding - Web Agency - Digital Strategies
Switch to the mobile layout

      Idea R - Do others know who you are? Design your corporate identity
  • HomeHome
  • About UsAbout Us
  • ContactsContacts


Take a software geek from the 80s, add a new generation graphic designer and dilute with a longtime marketing strategist. Shake vigorously and you'll get the Idea R's blog.

Change language... italiano
Go to the blog summaryGo to the blog summary

You may be interested in

How to dramatically increase social media LIKEs to your web site

How to dramatically increase social media LIKEs to your web site

Here's a free download that I created some time ago. It's a good tool for increasing engagement, but use with caution.

ASP.NET 301 permanent redirects: the best solution

Have you changed your domain and don't want to loose your SEO page rankings?

Last published

Metalworking industry: how to multiply customers using only the website and zero advertising budget

Metalworking industry: how to multiply customers using only the website and zero advertising budget

Find out how to design a website for the metalworking industry, that will be a magnet for customers and able to triple your leads.

A simple but effective SEO strategy: the middleman

Get excellent results in a short time using this SEO trick. Lern how to quickly apply the middleman technique and have many new web pages indexed.

Most popular

Case study: TAV Engineering, branding for B2B services

Case study: TAV Engineering, branding for B2B services

How to create a brand that keeps distance from the cold and aseptic image of the metal industry, focusing instead on the human aspect.

Case study: IED Open Day, building a font by hand... literally

These days graphic design is mainly the result of software tools. Here's a case study where a brand is designed with glue and scissors

Editor's pick

Case study: branding and marketing for a magician

Case study: branding and marketing for a magician

Singular case study in the world of illusionism. See how we have created a brand and a web marketing campaign with exceptional results.
Mental marketing secret #1: the fake compromise

Mental marketing secret #1: the fake compromise

Can mentalism influence marketing? As a marketing professional and a long term magician, I will reveal you some tricks.

Stay informed on digital strategies

Take a look at the last published articles
RSS feed

Lazy loading and the SEO problem, solved!

Published on 5/19/2014
Last update 5/22/2014
Categories: SEO
Lazy loading and the SEO problem, solved!

Lazy loading applied to a web page is an excellent technique when all contents aren't immediately visible and you want to speed up page rendering.
A perfect candidate for this method are image galleries with many items, only the first image is visible when the page loads, other images will be visible only if the user decides to browse them. At the bottom of this article there's an image gallery that uses lazy loading:

  • when the page first renders, only the first image and caption are loaded and displayed;
  • since users usually browse images in order, the second image and caption are cached via JavaScript, so they can be quickly rendered;
  • if the user decides to jump to an image other than the next one, it will be pulled from the server along with its following one.

This technique sounds great, but has a big SEO problem: search engine crawlers does not execute scripts, they only analyze HTML markup, so all the code that renders images dynamically is totally ignored along with images and captions.

The first SEO solution comes directly from Google documentation, it's very simple, but unfortunately it does not work.

False solution #1: image sitemaps

In the official Google webmaster documentation it is written that if you load images dynamically using JavaScript, you can make Google aware of them using sitemaps.
I assume that you know what a sitemap is, may be you don't know that for every page you can specify many images attached to it.
Here's an example of a sitemap for a single page that displays dynamically three images.

            <image:title>My first title</image:title>
            <image:title>My second title</image:title>
            <image:title>My third title</image:title>
                My image caption.

I have a travel blog that uses the same gallery at the bottom of this article. Every post has many images, thousands considering the whole web site.

I've done it perfectly:

  • every image has a well formed name;
  • every image has an alt attribute;
  • every image was placed in the sitemap along with title and description;
  • sitemap was referenced in robots.txt;
  • sitemap was registered in Google Webmaster Tools;
  • Google Webmaster Tools parser reported correctly the image contents.

After two years do you known how many images were indexed? ZERO!
I tried to discuss this with experts on Google forums, but nobody was able to give a significant answer.
My opinion is that despite of what is written on Google webmaster documentation, if images are not placed inside HTML markup, image sitemaps are ignored.

Partial solution #2: noscript tags

The <noscript></noscript> tags are used to inform the browser that if JavaScript is not enabled, the enclosing markup code should be rendered instead.
That's a perfect chance for us, in fact we can place inside a static gallery that loads all the images on the first rendering.
There're some drawbacks:

  • every gallery have to be duplicated: the lazy loading version and the static version (longer HTML code);
  • spiders look with suspect noscript tags because they are frequently used for cloaking (stuffing keywords not really related to the page).

Last but not least there's an user experience problem: there's no way for the user to bookmark the page with the gallery positioned on a specific image, every bookmark will always open the page showing the first image.

Very good solution #3: escaped fragments

[UPDATE: in October 2015 this method was officially deprecated by Google]

The solution was developed by Google not only for lazy loading, but for indexing AJAX contents in general.
Here's the official page: Making AJAX Applications Crawlable.

The documentation is simple and clear, but in a few words the solution is to use slightly modified URL 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).

It seems complicated but it is not, let's use our gallery as an example.

  1. Every gallery thumbnail has to have an hyperlink like:
  2. When the crawler will find this markup will change it to

Let's take a look at what you have to answer on the server side to provide a valid HTML snapshot.
My implementation uses ASP.NET, but any server technology will be good.

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


What's rendered is an HTML snapshot, that is a static version of the gallery already positioned on the requested image (server side).
To make it perfect we have to give the user a chance to bookmark the current gallery image.
90% comes for free, we have only to parse the fragment on the client side and show the requested image

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!)


Did you like this article up to here?

Before you continue, follow us on our Facebook page pressing the button here below!
In this way, we'll be able to keep you updated on digital strategies not only with our posts, but also with the best articles that we collect around the web.

Best solution #4: hijax links

In Making AJAX Applications Crawlable it is written that if you're starting from scratch, one good approach is to build your site's structure and navigation using only HTML. Then, once you have content in place, you can spice up the appearance and interface with JavaScript (and AJAX). Googlebot will use your fallback links, while users will enjoy your dynamic contents.
This solution is the one that we adopted in our gallery. If you inspect the HTML link of every thumbnail you'll see something like:

<a href='//www.idea-r.it/...?blogimage=<image-number>' onclick='...show(<image-number>);return false;'>

  • From the user perspective, the return false at the end of the onclick handler will make the href totally ignored and the JavaScript code executed.
  • From the spider perspective, the href will be followed to index contents and the JavaScript code ignored.

Let's take a look at what you have to answer on the server side to provide a valid HTML snapshot.

var parameter = Request.QueryString["blogimage"];
if (!String.IsNullOrEmpty(parameter))
    var imageToDisplay = Convert.ToInt32(parameter);
    // Render the page with the gallery showing the requested image (statically!)


You can experiment it yourself.
Try for example to click the following URL and you'll see what the Google crawler will index:

Since we still want the user to be able return to a bookmarked image, leave the following code (seen in previous solution):

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!)

To make bookmarking possible, we have to change the URL in the address bar every time the user clicks on a new image. Add the following code at the end of the JavaScript rendering method:

window.location.hash = 'blogimage=' + displayedImageNumber;

You can experiment it yourself with the gallery:

  1. copy the following URL into the clipboard
  2. navigate to another page;
  3. paste the URL in you browser address bar

You'll see again this page, but with the initial image set to the 5th one.
All the galleries you see in this blog are implemented using our Infrared CMS, so you can test test their optimization.

Did you find this article useful?

If you think your friends will like it too, share it on Facebook.
You have only to press the button here below!

Click on the image to see the next one
This is the first image title

This is the first image title

This is the first image description

You are the reader number 35,665.


Creative Commons License

Photographies, videos, graphics and texts by Idea R are licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Previous article

Previous article

Coca Cola, plants make us happy

Next article

Mental marketing secret #2: the lie detector

Next article
  • Visual Communication, Art DirectionVisual Communication, Art Direction
  • Apps, Cloud, Mobile, Software DesignApps, Cloud, Mobile, Software Design
  • Digital StrategiesDigital Strategies
  • BlogBlog
Touching finger
RSS feed

Scroll to top