: Multiple galleries on one page 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
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?
More posts by @Jennifer507
2 Comments
Sorted by latest first Latest Oldest Best
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.