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
-
Please have a look at my website. I am stuck here.
Here might be the reason. I had loads of unnecessary content so I given them the noindex tag. I tried to change the robot.txt file but that shouldn't be a problem in SEO. First my site had a country specific domain and then a year later I changed it to .Com, as to target globally (Mainly US). My site is ranking well in that specific country (never been close to page 1) on page 3 almost every time. It's not ranking in other countries, despite the fact that I've not targeted it to any specific country since the domain was changed. A month ago, I deleted 404 pages and all the thin content which was indexed in the SERP and also deleted the duplicated contents and as well as the copied contents. Meanwhile I've also tried changing the headings in some of the products articles as they were causing the duplicate heading issue. I've recently switched my hosting from the UK based server to the Us based server because the last hosting has bad downtime. So far until now nothing seems to be working in my favor. I'm just tired of resolving issues and in return finding a zero result. This is my devil site: 10stuffs.com plz check it out and tell me why my site is not ranking at all and what sould I do.
Intermediate & Advanced SEO | | anshu14320 -
Multiple product hierarchies (creation of refurbished products section) - best solution?
Hi all, I'm in discussion with a client who wishes to introduce a 'refurbished' products section to their website. This section will effectively replicate the structure of the 'brand new' products section. Unusually the key difference will be the fact that the 'refurbished' products section will feature significantly more products than the 'brand new' section, in the region of four times as many. As a guide the website currently stocks approximately 200 products across 8 core product areas. We have recommended that the two sections should be combined in order to prevent the creation of two separate product hierarchies. With 'brand new' / 'refurbished' products segmented via filter functionality. However the client is set on having two separate product hierarchies, i.e. a 'refurbished' section within a completely separate directory. Just wanted to crowd source opinion, in additionally to gaining insight if anyone has experience of a similar request. What solution did you implement? My feeling is that there is a high likelihood over time of the 'refurbished' section growing in authority and starting to outrank the 'brand new' products section. Not to mention a key missed opportunity to group and build authority / content within one product hierarchy. All thoughts and opinions much appreciated!
Intermediate & Advanced SEO | | 26ryan0 -
How are you taking you e-commerce site forward in 2014
Hi MOZland, With a new (our first e-commerce) client, we're going through a massive learning curve in handling a site of substantial size and complexity for the first time. While we've weeded out most of the on-page stuff that needed sorting, and we're in the process of dumping poor links implemented by previous SEO/online marketing efforts, do you have any suggestions about how to take a big e-commerce site forward in 2014, especially concerning technical pitfalls and link building efforts (and given that guest blogging has become something of a faux pas). Cheers, M
Intermediate & Advanced SEO | | Martin_S0 -
Folder or subdomain for new e-commerce addition
Our main content site has 5K pieces of unique content all targeting our market. We are planning to add e-commerce as a source monetizing our audience. Should we place the new commerce platform within a subdirectory or subdomain? The layout we are considering is... shop name: Brand Name Market http://www.brandname.com/market/ http://market.brandname.com I am also considering something like: http://www.brandname.com/market/ aggregating product details and content from http://market.brandname.com/ with rel= back to the subdomain if possible.
Intermediate & Advanced SEO | | ejovi0 -
Linking Within Website
Hello - I have about 10 landing pages that I am focusing on ranking for and I'm doing okay. My question is should I have all these pages on a drop down menu from my home page or is the innerlinking too much? http://www.kasplacement.com
Intermediate & Advanced SEO | | ksundheim10 -
Website architecture and sitewide link
Hello, I was reading this article about website architecture http://www.seomoz.org/blog/site-architecture-for-seo and I have a question about site wide link... I don't think site wide link are good if you want your homepage to have the most " juice " can someone confirm that to me. What I mean by site wide link is let's say I have a page about golf in califorina and I create a link to another page of my website which is about golf in florida that a good practicee to do that or not ? I just used this calculator http://www.webworkshop.net/pagerank_calculator.php and and if I do site wide links the juice doesn't go to my most important page ( the homepage ) which is the one I currently want to have the most juice. However, I noticed that website like amazon do site wide link let's say you are looking at a book and they have lots of links for other books or categories and they still rank very well for the word "textbooks" so I am kind of lost and don't understand why they still rank even though to me their juice goes away by doing site wide links to other books or categories ( even though it is related ) Can someone tell me more about site wide links are they good , bad etc... and is this calculator I use right or wrong ? Thank you
Intermediate & Advanced SEO | | seoanalytics0 -
What is the proper way to display e-commerce product guides? PDF / JPG?
Hi, On each product page in my e-commerce site, I have a link to show a certificate of authenticity for the product. (similar to any guide in an e-commerce site). I also have the details as plain text on the page, but this is required. What is the correct way to show it, using PDF or JPG? Thanks
Intermediate & Advanced SEO | | BeytzNet0 -
URL for New Product
Hi, We run an established website (mindflash.com) selling online training software. We are getting ready to launch a new section of the site where our users can sell their own online training programs. This will be branded as the 'marketplace'. This section will have a main page, category pages, tag pages, search and individual course pages. In our URL structure, I'd love to target the word 'training courses' but I don't want to neglect the product brand either. Is it better to use /training-courses in the marketplace urls or to use /marketplace? Or is it better to use both like /marketplace-training-courses or /marketplace/training-courses? Option 1: Example main section page: mindflash.com/training-courses Example category page: mindflash.com/training-courses/software-training Option 2: Example main section page: mindflash.com/marketplace Example category page: mindflash.com/marketplace/software-training Option 3: Example main section page: mindflash.com/marketplace-training-courses Example category page: mindflash.com/marketplace-training-courses/software-training Option 4: Example main section page: mindflash.com/marketplace/training-courses Example category page: mindflash.com/marketplace/training-courses/software-training Which option is better and why?
Intermediate & Advanced SEO | | mindflash0