Lazy Loading of products on an E-Commerce Website - Options Needed
-
Hi Moz Fans.
We are in the process of re-designing our product pages and we need to improve the page load speed.
Our developers have suggested that we load the associated products on the page using Lazy Loading, While I understand this will certainly have a positive impact on the page load speed I am concerned on the SEO impact.
We can have upwards of 50 associated products on a page so need a solution.
So far I have found the following solution online which uses Lazy Loading and Escaped Fragments - The concern here is from serving an alternate version to search engines.
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.
- Every gallery thumbnail has to have an hyperlink like:
http://www.idea-r.it/...#!blogimage=<image-number></image-number>
- When the crawler will find this markup will change it to
http://www.idea-r.it/...?_escaped_fragment_=blogimage=<image-number></image-number>
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 imageif
(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!)``...``}
The other option would be to look at a recommendation engine to show a small selection of related products instead. This would cut the total number of related products down. The concern with this one is we are removing a massive chunk of content from he existing pages, Some is not the most relevant but its content.
Any advice and discussion welcome
- Every gallery thumbnail has to have an hyperlink like:
-
Ok, cool. To reiterate - with escaped_fragment you are just serving the same content in a tweaked format and Google recommend it rather than frown upon it. Good to be sure though.
See you at SearchLove!
-
Hi Tom, Thank you for the response,
The concern about serving an alt version is that it would be frowned up from a SEO perspective and may lead to a form of penalty.
I agree that escaped_fragment would be the best approach and just wanted to satisfy my own concerns before I get them working on this.
Thank you and see you at Search Love
-
Hi,
I am not sure I follow your concerns around serving an alternative version of the page to search engines - is that concern based on concerns it will be frowned upon or technical concerns?
Using the escaped_fragment methodology would work for your purposes, and would be the best approach. If you have technical concerns around creating the HTML snapshots you could look at a service such as https://prerender.io/ which helps manage this process.
If that doesn't answer your question, please give more information so we can understand more specifically where you concerns are.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
How to handle images (lazy loading, compressing, caching...) to impact page load and thus SEO?
Hi all, I am looking for a conclusive answer on how to handle images on Wordpress websites. Most of the time we encounter the same problems regarding images. There are several options to make sure that images don't increase page load too much: Page caching and compressing: standard Lazy loading: helps decrease page load time, but Google might not crawl the images so not good for SEO. See this article on Googlebot scrolling. Correct image format (for example WebP): tried it several times and doesn't help much to decrease page load time. What is best practice? Are there standards or preferred options for the image dimensions and quality (max height, width, number of pixels, rectangular or square) before you upload it, also regarding responsiveness? Is it better to use .jpg, .png or WebP? To sum up, what should you do by default to handle images on websites so you can still have a good page speed even with loads of images? Thanks for your answers!
Intermediate & Advanced SEO | | Mat_C0 -
Product page as homepage
Hello, Is it ok that to use the homepage of website as a product page directly where you present all your products on your homepage or can it penalise you to do that ? and in that case, is it better to have a homepage that you don't rank and create a subpage for your product page. Thank you,
Intermediate & Advanced SEO | | seoanalytics1 -
Our website is not being indexed
We have an issue with a site that we can't get to the bottom of. This site: (URL removed) is not being properly indexed. When we do a search for (URL removed) in google.com.au. The site appears as the 4th listing with the following title and description: (Title removed) A description for this result is not available because of this site's robots.txt – learn more. We have checked the site's robots.txt and can see its been now implemented correctly: (URL removed) About a week ago, we also went into Webmaster Tools and submitted a request for Google to recrawl our site. We are unsure what the issue is that is causing the site to not be properly indexed and how to resolve it. Any assistance on this topic would be most appreciated!
Intermediate & Advanced SEO | | Gavo0 -
Ticket Industry E-commerce Duplicate Content Question
Hey everyone, How goes it? I've got a bunch of duplicate content issues flagged in my Moz report and I can't figure out why. We're a ticketing site and the pages that are causing the duplicate content are for events that we no longer offer tickets to, but that we will eventually offer tickets to again. Check these examples out: http://www.charged.fm/mlb-all-star-game-tickets http://www.charged.fm/fiba-world-championship-tickets I realize the content is thin and that these pages basically the same, but I understood that since the Title tags are different that they shouldn't appear to the Goog as duplicate content. Could anyone offer me some insight or solutions to this? Should they be noindexed while the events aren't active? Thanks
Intermediate & Advanced SEO | | keL.A.xT.o1 -
Website/SEO Audit Needed
We've been outsourcing our link building to India for the past 3 years and the results were pretty good up until beginning of this year. What they were essentially doing is putting links into directories, a few per month, and posting a few articles per month. Out of our top 10 keywords, 8 got into top 10. Then something happened around Jan 1 last year, our ranking started dropping, falling out of the top 50, before settling around 20-30ish. We disavowed most of the low quality links since then. Also, very odd, all the top ranking competitors all fell (including me) and were replaced by less "specialized" companies who sold a broad range of products (for example: all parts of the car, rather than someone who just focused on mufflers). Theres also other differences but again I can't put a finger on it. I'd like to find someone who can do a detailed audit of our site, and our competitors, what happened to cause the drop, and why the new top positions sites are ranked high. And I really don't have time to do an audit myself. Our site is American Hospitality Furniture dot com. Any feed back would be appreciated. Thanks in advance.
Intermediate & Advanced SEO | | AHH8880 -
Product Category Subcategory hierarchy
Hi all, I am developing an ecommerce store and would like some advice on the Category / Product URL structure for SEO purposes. Products have many options Products belong to a sub-category. Sub categories belong to a category There will be a maximum of 500 products in the database. 1. http://shop.com/{category}/{product_slug}?{product_option} Flattened with query string option http://shop.com/apple/iphone-5s?model=32gb&colour=white 2. http://shop.com/{category}/{subcategory}/{product_slug}?{product_option} // Hierarchical with query string option 3. http://shop.com/{category}/{product_slug}/{product_option} 4. http://shop.com/{category}/{subcategory}/{product_slug}/{product_option} 5. http://shop.com/{category}/{product-slug} http://shop.com/apple/iphone-5s-32gb-black Option 5 seems best to me, however I am also worried about duplicate content between pages. http://shop.com/apple/iphone-5s-32gb-black http://shop.com/apple/iphone-5s-64gb-black http://shop.com/apple/iphone-5s-64gb-white The above 3 examples will all have very similar content. And if I use canonical url tag, which product page would I refer these pages to? At least with Option 1 I can use the canonical tag to tell search engines that pages with get parameters can point to the non get parameter version. In addition to Option 5, should I create a http://shop.com/{category}/{subcategory} page? That way Option 5 item canonical tags can point to that page. e.g. http://shop.com/apple/iphone-5s which would contain product summary detail with product options listed on the page? Am I missing something here or can anybody provide a better solution?
Intermediate & Advanced SEO | | MangoMM0 -
What do you do with the page of a product that has been deleted?
As anyone know with an ecommerce website, products are constantly being added and removed. Once products are removed, the corresponding product pages are not reachable. Currently, I am redirecting to the Search page, if a product page is reached, whose corresponding product has been deleted. I am not sure if that is the correct, recommended technique from a SEO perspective. Should I try to show related products on the redirected page? Does anyone here know what is the best thing to do with this product page?
Intermediate & Advanced SEO | | amitramani0 -
How related to your industry do your links need to be?
Hello, Some of the hottest link building techniques right now are guest posting, viral content, and link bating. But I often see SEOs produce content that has very little relevance to the actually industry they are in. For instance, a dentist might build links by guest posting on a tech site, an attorney might create an infographic on color psychology, and an accountant might venture into celebrity gossip. While more advanced SEOs try to make sure that the content they produce has some relevance to their industry (even if it's marginal), where is the line drawn?
Intermediate & Advanced SEO | | lezal0