Squarespace Image Galleries not showing up in Google Images? - Here's a fix
More in SEO, Social & Analytics
For some time now Squarespace customers have been complaining that images served from Squarespace Gallery pages do not appear in Google Images results.
This problem is particularly bad for photographers, artists or graphic designers who use their Squarespace website as an online portfolio.
This article explains the cause of the problem and provides a tool that can be used to resolve it.
Enough already.. ..TAKE ME STRAIGHT TO THE FIX
Why aren't Squarespace gallery images being indexed by Google?
The original theory was that, as Squarespace images are served via a Content Delivery Network (CDN) they weren't being associated with a website's URL because they have a different "http://static.squarespace.com/..." URL.
However, when I performed some investigations I discovered that every Squarespace image is hosted on the CDN and that all images apart from those on full gallery pages were being indexed by Google.
The fact that some images are being indexed and others aren't means that the CDN is not the source of the problem.
Lazy, lazy loading code
I looked at the code for the Squarespace gallery pages and realised that a coding omission was the probable cause for the Squarespace missing images problem.
It is a fact that a Squarespace gallery embedded into a page using the Gallery block can be indexed by Google whereas the same images on a standalone gallery page will not be indexed. Using this information, I decided to compare the code for a gallery page and an embedded gallery block.
The key difference I observed was that the embedded Gallery blocks include a src="http://static.squarespace.com...." reference to the image, whereas the Gallery pages do not. Gallery pages, only contain a data-src="http://static.squarespace.com...." attribute.
Google is not indexing data-src="" attributes as only the src="" attribute is recognised as a link to an image asset; data-src is a data-* attribute and does not have a fixed meaning.
The reason for using the data-src attribute is to allow for lazy loading of images (only loading them when needed). This speeds up site performance and considerably reduces server load but has the unfortunate side effect of hiding the images from Google.
Many lazy loading design patterns include a Google friendly list of image links wrapped in a <NOSCRIPT>..</NOSCRIPT> html tag. This allows the lazy loading but also allows Google to find the images.
The Squarespace Gallery image fix utility
I have written the Squarespace gallery image fix utility version to make it easy for site owners to easily generate <NOSCRIPT>..</NOSCRIPT> code for inclusion in their Squarespace websites.
To use it, you enter the URL of your Gallery and then copy the code that is generated and paste it into the Page Header Code Injection point in the Squarespace admin for your Gallery Page.
At the time of writing, the utility has only been available for a few days. Early results indicate that Squarespace gallery images that could not previously be indexed are starting to appear in Google image results.
