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
-
301 redirection help needed!
Hi all, So if we used to have a domain (let's say olddomain.com) and we had a new site created at newdomain.com how do we properly setup redirects page to page. Caveat, the urls have changed so for instance the old page oldomain.com/service is now newdomain.com/our-services on the new site. Do we need to have hosting on the old site? Do we need to setup individual 301s for each page corresponding to the new page? Just looking for the easiest way to do this CORRECTLY. Thanks, Ricky
Intermediate & Advanced SEO | | RickyShockley3 -
Website Does not index in any page?
I created a website www.astrologersktantrik.com 4 days ago and fetch it with google but still my website does not index on google as the keywords I use is with low competition but still my website does not appear on any keywords?
Intermediate & Advanced SEO | | ramansaab0 -
Merging 3 websites into 1
Hi I was wondering if someone can give me a bit of advice - outside of my full time job I run three websites - all in the same area, but all do three different things 1. Directory (DA19) 2. Blog (DA 23) 3. Products (DA35) I want to merger all three website into one and all be on one website (rather do it now than keep working on three websites). I have included the DAs of each site ( I know they are not amazing, but i've only recently started working on two of them), but I want to place all three websites under the Blog url. Regarding 301's of the pages, would I be better doing at the top level and 301 all the pages to the home page, or spending the time and 301 the old product page for instance to the new product page - this is a much bigger project, but what are the potential gains. Is there anything else I should consider when switching the sites - all three are wordpress sites (I know it has its limitations but they are easy to create). Thanks in Advance Andy
Intermediate & Advanced SEO | | Andy-Halliday0 -
E-commerce worldwide sub domains or folders
Hi Guys, We currently only sell to the UK so its pretty easy to manage our seo etc. However we are building a new site on Trespass.com and will be using magento enterprise. We will be serving the UK, US and the rest of the world. Does anyone here have experience with this? Is it best to have sub domains ie. UK.trespass.com, US.trespass.com? Or folders Trespass.com/uk Trespass.com/de Trespass.com/US Thanks guys
Intermediate & Advanced SEO | | Trespass0 -
E-Commerce Multilanguage - Better on Subdomains?
Hi, We have an e-commerce store in English and Spanish - same products. URLs differ like this: ENGLISH:
Intermediate & Advanced SEO | | bjs2010
www.mydomain.com/en/manufacturer-sku-productnameinenglish.html SPANISH:
www.mydomain.com/es/manufacturer-sku-productnameinspanish.html All content on pages is translated, e.g, H1, Titles, keywords, descriptions and site content itself is in the language displayed. Is there a risk of similar or near dupe content here in the eyes of the big G? Would it be worth implementing different languages on subdomains or completely different domains? thank you B0 -
Does anyone have any experience using GoodRelations Snippet Generator for E-Commerce versus markup from Schema.org?
I am trying to implement Structured Data markup on a large e-commerce site that has ancient code and is not on any standard e-commerce platform. It is a Webstore we self-host that was developed for us and heavily customized. What's worse is that I don't have access to the source code. I have to somehow instruct our IT Director how and where to place everything. So I'm going to need to be meticulously specific. As I began wading through our code and determining where to insert code as instructed by Schema.org I ran across this on one of their pages: "This class contains derivatives of properties from the GoodRelations Vocabulary for E-Commerce, created by Martin Hepp. GoodRelations is a data model for sharing e-commerce data on the Web that can be expressed in a variety of syntaxes, including RDFa and HTML5 Microdata. More information about GoodRelations can be found at http://purl.org/goodrelations/." I went to check it out and it appears that this could be a great resource as it has a snippet generator and several "cookbooks" for adding micro data to our site. Here's a link to their snippet generator: http://www.ebusiness-unibw.org/tools/grsnippetgen/ However, with a catalog of 5,000 SKUs, needless to say we aren't going to plug in our products into this generator one-by one. Has anyone here successfully used GoodRelations to help them implement micro data into a large E-commerce site that isn't a standard platform (not Magento, WP, Joomla or Volusion) ?? I would be very greatful to anyone who can share their experiences and or make suggestions on how we might best proceed. Thanks! Dana
Intermediate & Advanced SEO | | danatanseo0 -
Need bullet points for a new website on what to do for SEO
Hello, My company just launched a new website and its a competitve market it looks like. Its for moving boxes and moving supplies. They want a bullet point list (nothing real specific) of what I will be doing for SEO for the new website. I have been out of the loop for more than a year with SEO so not sure what the best things to do first are. Any help would be great. Thanks John
Intermediate & Advanced SEO | | maximumrank0 -
Website Siloing..best practice?
Hi all I am doing some research this week on the effects of siloing a Magento site. We have about 1,654 pages with approx 1,400 products. We want to silo the website in order to address the internal linking issues and to also focus the customer journey in a more organised way. I need to report all of the possible angles and effects that this will have on the site, prior to implementing it. Does anyone have info on best practice for siloing? I'd appreciate any help... Thanks Nick
Intermediate & Advanced SEO | | Total_Displays0