3

I have multiple popup galleries that are all located in one page (homepage, to be exact). Each gallery is represented by a logo. Once the user clicks on one of the gallery logos, Javascript kicks in and transforms the hidden <img data-lazy="http://link-to-full-size-image" alt="Example"> tags into a slider gallery using lazy loading (by using the url in the data-lazy attribute as the img's src).

I did some reading on the internet and it turns out that I should provide a crawlable version of each gallery and make links that refer to it rel=canonical, but this only works when there is a separate page for each of the galleries.

In my case however, all galleries are displayed in a single page, therefore I'm not sure whether using rel=canonical for each gallery in a single page (resulting in multiple rel=canonical links on the same page pointing to different galleries) is a viable solution. The only way to link to a particular gallery in my current implementation is using hash fragments, i.e. example.com/#/gallery/gallery-name runs a Javascript action responsible for opening a gallery identified by its unique name: gallery-name.

What would be a good way to optimize this for SEO?

1

resulting in multiple rel=canonical links on the same page pointing to different galleries

That is not allowed. Only one canonical per page.

If you use hashbangs, then Google will call the escaped fragment version of the page to your server. It should serve the HTML version of the page with the corresponding gallery.

Another solution is to add a parameter to your URL where each value of a parameter would display a different gallery. Then add each version of your URL with each parameter value in your sitemap.xml.

1

This is a good resource explaining what you need to do with either escaped fragments or using the pushState and history API in HTML5 to provide content to search engines.

I do want to note that both Google and Bing do crawl javascript via pushState and escaped fragments might possibly be deprecated in the coming months by Google. So to be safe, move over to using HTML5 pushState.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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