Image Galleries Advice

[Gazley]

Hi there,

My first site in PW is coming along nicely but as it showcases photography, I am about to implement the galleries which for this site is über-important. I have a few questions/concerns that would be keen to get other opinions on.

First of all, I'm concerned about page load speed from an SEO perspective. The site owner doesn't like thumbnails. She would prefer the images to only be viewed within the context of of a carousel or gallery widget. She has many album sets in different categories so, they also need to be presented as a choice.

Given her dislike of thumbnails, the images of which there are many will be downloaded at their full size and this could impact on page load time.

So, any thoughts or advice around SEO/page load speed with multiple images, with a size between 45-95k each image?

Any recommendations for a really good gallery or image presentation JS widget?

I know this post is a bit vague but in the current site (that is being replaced), the images are loaded on demand. However using that approach, whilst page load speed is optimised, when Google crawls the pages, it doesn't actually see the images and therefore they aren't crawled/indexed, not helping SEO.

Any advice or comments would be very much appreciated!

[Pete]

In what way doesn't she like thumbnails? If she means that she would prefer a gallery to open with just the first image showing and controls to get to the next one then it's not too bad - the first image will load first and the others will load afterwards, meaning that the load time is irrelevant as long as the user sees that first image pretty much right away.

Does that sound more or less like what she's after?

The issue then is the one you've spotted already - there would be an SEO hit because of the total page load time.

Just to get a bit more info on the layour, how would the category list be displayed? Is it a set of text based links that, when clicked, open up the relevant category of images?

A solution if that is the case would be to somehow (all theoretical ) have it load a modal window via Ajax that fetches the first image and displays buttons to load the next image in that modal window, also via Ajax. You're then also into other tricky SEO territory as whilst Google is trying to follow what goes on with Ajax nowadays I'm not sure how good the support is yet. You'd certainly get quick page load times for this idea though, as it would load the first image when it's requested, as with every other image, though I couldn't guess how you'd go about linking together multiple Ajax modal contents off the top of my head - maybe not the most helpful suggestion

As for better advice, my choice of lightbox is almost always FancyBox and it's also used in the PW admin. Version 2 is worth a look as it's newer.

[Gazley]

Hi Pete,

Thanks for your comments. What you suggest is pretty much what I did on the old site. I wrote the gallery control myself, it displayed the first image and when you clicked on the image or the buttons, it then pulled each subsequent image down thereafter. So, when the page is rendered, the images aren't specified in the markup. However, Google doesn't acknowledge the images either, so a big loss from an SEO POV.

She doesn't like seeing a bunch of thumbnails like on similar sites where the idea is to click on the thumbnail and then load the larger image. I want the images specified in the markup but when the browser sees them, it will start downloading them despite the fact that they aren't initially visible.

Thanks for the FacyBox recommendation. I will take a look at it.

Cheers!

[ryan]

There are so many great ways to present photos that it'd be hard to narrow it down. Soma linked to a really cool one recently, but now I can't seem to find that link. Most of these solutions use jQuery/Javascript to take a semantic (SEO friendly) list of images and convert them to some kind of interesting presentation. Given that your client doesn't like thumbnails, I'm thinking you are probably looking at some sort of image slider. There are lots of these out there, but this one (Zurb Orbit) is the one I've already got open so figured I'd link it.

You (or your selected gallery script) will probably want to use javascript to assist in the loading of images, so that you need not load them all in the initial request. This is where you start running into search engines not being able to see them. But so long as you are providing an alternate path by linking to them or linking to page(s) containing them, that's what you need. If necessary, you can use your JS initialization to hide those links once your JS takes over responsibility of presentation for them. But disable JS in your browser to test your alternate paths and make sure you can still get to all the images one way or another. It also doesn't hurt to get a site map in the mix.

[Gazley]

Hey Ryan,

>As you are providing an alternate path by linking to them or linking to page(s) containing them, that's what you need.

Having all of them on a site accessible "viewall" type page is an interesting idea although if this was left indexable by Google to gain SEO juice, it would probably be penalised because of excessive page load time (average number of images per album might be 40+) and there are a lot of albums in the overall Gallery.

Unless, of course, the images were just "housed" in a series of pages where with only a handful of images per page which Google could find and index without the excessive page load time that lots of images would cause. In that case, some kind of slider control that provided a JS callback option to the site to load the next image would work well because there would be no browser discoverable img tags on the page to slow down the overall page load of the page containing the slider. So, a slider control with a JS API might do the trick.

>It also doesn't hurt to get a site map in the mix.

I've seen a PW module for generating a site map, whether it be XML or user-HTML, but an image sitemap might be an interesting challenge.

Cheers

--Gary

[ryan]

How much SEO value to photos have anyway? I would think the SEO value would come from the descriptions of those photos, not the photos themselves. So by alternate links and/or sitemap, I was thinking something like this:

<li><a href='/path/to/photo.jpg'>Description of photo</a></li>

or

<li><a href='/path/to/page/photo-jpg'>Description of photo</a></li>

In the second example, 'photo-jpg' would be a URL segment and it would instruct the page's template to just display the 1 photo having that name, and with description (in alt tag and/or in the content area).

[Soma]

I also thought about this in particular when creating an online gallery, it's not as easy but possible. I'm not sure about sizes and page loads as I think google indexes without loading images, I think that's was their image search does. Only limit I know is for tablets and phone that will crash on about 500kb, images are different.

The concept would be simple but will require some work and figuring out. You generate a gallery 1 page a image that works with normal urls and segments, then progressively enhance it using ajax to create the page (image page) loading and replacing of the content. In the templates you create a image view with caption that is returned if loaded via ajax. If not requested via ajax you add header and footer from the rest of the site. You can test this with the $config object. A view might look like this (pseudo code):

if(!$config->isAjax) { include("./header.inc"); }

// get what image should be displayed from ajax request (post)
if($config->ajax) {
  $imgcat = $input->post->category;
  $imgname = $input->post->imgname;
  $img = ...
  // do some magic to get image and output it.
} else {
  // alternatively get the image from urlSegments
  $imgcat = $sanitize->name($input->urlSegment1);
  $imgname = $sanitize->name($input->urlSegment2);
  $img = ...
}
echo "<figure>";
echo "<img src='{$img->url}' alt='{$img->alt}'/>";
echo "<figcaption>{$img->description}</figcaption>";
echo "</figure>";

if(!$config->isAjax) { include("./footer.inc"); }

If a visitor comes through google with the urls segment url, you can do some jquery/js magic to check the url and if usr has js he will get redirected to a url that can fully use your ajax gallery.

So if google comes it will browse a regular "static" version, if a visitor comes with js he will get enhanced features. You could also go as far to implement some plugin that allows for history either using hashs or push state.

I don't know if there a jquery gallery that would help on this, or if you would have to code it yourself.

[Gazley]

Hey Ryan,

As to the SEO juice of a photo, it's basically in the image file name and the ALT text. Your second suggestion is the better one because it will render a page that has the image and the ALT text whereas the first one would simply get a reference to the unadorned image. Cool suggestions though - as they're not IMG tags, they won't instigate an automatic download. Nice trick!

Thanks

--Gary

[Gazley]

Hi Soma,

A very cool suggestion too. Having the ability to test for the type of request leads to these possibilities. I will have a good think about all of this!

Thanks

--Gary