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
-
Discontinued products on ecommerce store
Hi, I have a high number of very-low/zero traffic and zero backlinked product pages that have been discontinued (and wont come back). For these pages we automatically remove them from our website indexes and also removed internal links and then essentially kept the product pages and their urls intact but just added a note saying "no longer available, how about these..." with alternate similar product options. This seems to be the general consensus online for discontinued product pages that have little value. The questions is do I either 404 or noindex these now discontinued pages? What are the pros or cons? Thanks
Intermediate & Advanced SEO | | coma990 -
Avoiding duplicate content in manufacturer's [of single product] website
Hello, So I have read a lot of articles about duplicate content/ keyword canibalism/ competing with yourself, and so on. But none of these articles really fit to manufacturer website who produces one product. For example, lets say I make ceramic tiles, this means: Homepage: "Our tiles are the best tiles, we have numerous designs of tiles. We make them only from natural ceramic" Product list: "Here is a list of our tiles: Poesia tile, white tile, textured tile, etc" Page for each tile: Gallery: a bunch of images trying to prove that these tiles look best 🙂 Where to buy page: a map From what I understand this page is already doomed - it will not go well against larger retailers who don't focus only on tiles but they sell everything. This page is set to have a lot of duplicate content. But I hope I am wrong, can someone please make some suggestions how to do SEO on such a website where all pages are about the same thing? Any help would be much appreciated! Juris
Intermediate & Advanced SEO | | JurisBBB0 -
Ecommerce - Product Titles
Hi I want to find out how ecommerce sites optimise their product names: 1. When they have thousands of products 2. When some of their products are identical I notice on some sites, like this for example, they have no key phrases in their product titles http://www.argos.co.uk/static/Product/partNumber/6249346.htm How can this help for SEO? At the moment we optimise the titles as best we can for key phrases relevant to the products and differentiating attributes. Where we get stuck is, if their are 2 identical products - how can the content team quickly add a title which is useful for customers and search engines? Some products have no differences for us, but longer tail phrases are where we could get some good returns if the research is put in - it's just very labour intensive. Thank you
Intermediate & Advanced SEO | | BeckyKey2 -
Website Suddenly dropping rank
Morning Moz Fans: My URL is: http://goo.gl/Dhbjwj According to MOZ, which we are tracking this URL with, somewhere between the 3rd Feb and 10th the domain went from being fairly well indexed to being dropped to pages further back than 6-7, for pretty much everything, even the company name was only registering at the bottom of page one. Around this time we were transferring the website from .php into wordpress, so we were creating new pages, called by the same names and all the same content but we created the wordpress area in a sub domain of the website. Again around this time we had an issue with the blog area and had to take it down for 4-5 weeks due to some errors which meant google wouldn't have been able to crawl these pages properly, but the rest of the website was up and running. We also discovered recently that the company have and use this domain http://goo.gl/5JvDUH So my question is, what do you think caused the problem? has it been premaritally penalised? is there a way I can get google to specifically look at it and is there any more i can do?Thank you for your help
Intermediate & Advanced SEO | | popcreativeltd0 -
Are there any SEO Tips before killing a website?
Hey guys, My company acquired another company, and after a couple of months we decided to completely kill their website. I'm not finding any info about SEO best practices for this type of situation. From the "switching domains" and "new sites" articles and blog posts I can extrapolate that I should: 301 redirect their home page to ours Look at specific pages with good authority that relate to our pages and 301 them. Look at the strongest backlinks to their site and try to change them to point to our site. Create a 404 page for the rest of their webpages that tells them that we acquired the company (hopefully with a main menu and search bar) Any other suggestions?
Intermediate & Advanced SEO | | nrv0 -
E-Commerce SEO
Dear SeoMoz fans, I'm really glad to be a part of the community. Just have a quick question. I run a marketplace similar to eBay where users sell the products. I would like some suggestions on how to effectively proceed with SEO for an ecommerce marketplace of this type. Should I be proceed developing product review or product comparison landing pages and build links towards them as often suggested or should I consider alternative marketing methods? Looking forward to your replies.
Intermediate & Advanced SEO | | buzzmartseo0 -
Website rebranding, what should I worry about?
Hey guys, A client of mine will be doing a rebranding exercise, this include changing their brand name and their domain name. They are considered a well known brand within their industry (Their brand name shows up in Google's "Search Related to..." section) My question is: Apart from making sure all 301 are put in place,changing all the links to point to the new domain and doing PR exercise, is there anything else I should keep in mind / be aware of to ensure a smooth transition? Also can anyone come up with possible issues we might encounter during the move? Apart from having a significant drop in traffic and rankings? Thanks, Clement
Intermediate & Advanced SEO | | NextDigital510 -
Website Ranking Issue
Hey All My question is specfic to a particular website. The category of the website is Kitchen Appliances. The keyword is extremely competitive. The website I am currently optimizing has loads of products and many pages as well. I am constantly building links from industry specific websites for the website as well as composing articles and leading the users back to the website with keyword rich anchor text. I have been doing this for around 3 months and I do not see the website in the first 30 pages of the SERP (for the keyword kitchen appliances - the site is a page rank 2 BTW). No bugs reported as well in Webmaster tools. My next step is to add these articles to the website (www.example.com/KitchenAppliances ) with keyword rich metatags as well as content with internal links to my product pages. I also plan on sending traffic to these pages to build the pages link popularity. Do you think I can expect better results for the article pages than my original website product pages or do you think I should continue with the link building activity I was performing originally for the website. regards Ryan
Intermediate & Advanced SEO | | SEO5Team2