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 do I increase my website DA and PA?
I want to launch a new site like www.plaza.ir. How can I improve its Da and PA quickly ?
Intermediate & Advanced SEO | | arpaymantul0 -
How to create AMP Pages for product website?
How to create AMP Pages for product website? I mean we can create it easily when we have wordpress through plugin, what about when we have millions of pages, It would be too tedious to create amp version of every page. So, is there any alternative way to create amp version?
Intermediate & Advanced SEO | | sachin.kaushik0 -
A/B Testing - Should I add product descriptions on my category landing pages as well as on product pages and if so . how to do this to avoid duplicate content
Hi All, I recently relaunched a new design on my tool hire eCommerce website and now display my products in grid form on my category landing pages as opposed to just a list view which we previously had on the old design. My bounce rates are alot higher than they use to be and my gut instinct is telling me maybe this is wrong . I want to do some a/b testing using a list view. My question is , previously in our list views we just showed the images and pricing and had on page content on the bottom of the page. The user would click on the product image and they would then we taken to the product page which has the product description , t&c, etc etc.. If I was to do this in my a/b testing but change it so we also displayed the product descriptions as well on the category landing pages . Is there a special way to do this as in effect, we would have duplicate content as the product descriptions are also on the product page?. Does anyone have any thoughts on this as to whether its a No No from an SEO point of view ?... Heres a short url link to one of my category pages - http://goo.gl/QJv5gw Historically we use to rank well for the category landing pages and not for the product pages.Our Rankings are down , bounce rates are higher so I am trying to sort both. We have good content on pages etc. Any advice greatly appreciated as always thanks Pete
Intermediate & Advanced SEO | | PeteC120 -
Urls in Bilingual websites
1-I have a bilingual website. Suppose that I am targeting a page for keyword "book" and I have included it in that page url for the English version: English version: www.abc.com/book Can I use the translation of "book" in the second language of the website url instead of "book" ? Please let me know which of the following urls are right " French Verison: www.abc.com/fr/book or www.abc.com/fr/livre livre=Book in French 2- Does Google have any tool to check if the second language page of the website has exactly the same content as the English version. What I want to do is for example for a certain page in English version, my targeted keyword is "book" . So my content would be around books. But in the French version of this page, I want to focus on keyword "Pencil" in French instead of "book". Is it wrong or any consequences? That was the main reason for the question number one. Because if it is ok to do what I explained in item 2 then I will set my urls like: In English : www.abc.com/book In French: www.abc.com/fr/crayon crayon=Pencil in French
Intermediate & Advanced SEO | | AlirezaHamidian0 -
How to title my products?
Hi, really struggling with product titles. Or should I say keeping staff writing out titles. If I sell a Coat. I would like the product titled like: Armani Jeans Coat Green but staff are doing it like Armani Jeans Fur Hooded Coat Green. Now I think this effects our SEO efforts as how likely are people to search for the Fur Hooded coat part? Yes we might hit the numbers of the small search but is it really worth it? Would it not be best put this Fur Hooded part in the short description and long description? I am trying to make my SEO titles and meta descriptions consistant for 1 product. But find it hard writing out Fur Hooded in the Meta Title when I know numbers will be minimal? The SEO titles or the product titles are effectively links on the website for each product. So hold more weight and the product titles act as the H1 titles on the product page itself. Surely we would be best using Armani Jeans Coat Green rather than such a long, obscure title that will gain very little search? Whats best way to approach this issue? As we can have products titled like: Creative Recreation Kaplan Patent Leather/Snake Trainers Charcoal. Which to me is too long, too obscure. Surely the extra detail should go in Short Description which is visible on the catelog page and keep the product titles shorted and more to the point, eg Creative Recreation Kaplan Trainers Snake Charcoal? All this Patent Leather/ business seems pointless to me? Any ideas?
Intermediate & Advanced SEO | | YNWA0 -
Online Store With 4 Products Available in 50 Sizes, Need Tips Categories/Products
I own and manage 2 online stores selling furnace filters. http://www.furnacefilterscanada.com and http://www.filtrationmontreal.com/ We have 4 different qualities furnace filters and each of them are avaible in almost 50 different sizes. My store is setup with almost 200 different products. ( 4 filtres X 50 sizes) None of them have variable. This was a lots of work to create 200 different products. The reason I did this is because when searching in search engine, vistors will use such keywords: 16x20x4 filter 20x25x2 furnace filter a/c filter 10x20x1 replacement filter online 20x20x1 16x25x5 filter toronto and so on... Must keywords request in search engine will included the furnace filter size. QUESTIONS: all my products descriptions are the same, the only difference is the filter size, is this Duplicate Content? will it be better to sell 4 filters with 50 variables? if my store use variable I don't see how I will rank on Google when shopper search for keyword like mention before in this post. My page name will always be the same. My description page the same and so on... Furnace Filters Canada is on BigCommerce platform and I love it. I'm in the process of moving Filtration Montreal to CoreCommerce. You can have a look at it here http://furnacefilter.corecommerce.com I'm very limited in SEO knowledge, the way I have setup http://furnacefilter.corecommerce.com I thing is the best way for SEO. What is your opinion & recommendations. Thank you for your help, BigBlaze
Intermediate & Advanced SEO | | BigBlaze2050 -
Another E-commerce Canonical Question
Hi guys, Quick question: one of our clients has an e-commerce site with a very poor canonical tag setup and thousands of pages of duplicate content. Let's use this as an example: BRAND > Category > Type > Color
Intermediate & Advanced SEO | | elcrazyhorse
Four separate pages/URLs. The BRAND page lists all products.
The Category page lists all BRAND products for that category.
The Type page lists all BRAND products of a specific type in that category.
The Color page lists all BRAND products of a specific type in that category of a specific color. Anyway, these generate four separate URLs: /BRAND
/BRAND/Category
/BRAND/Category-Type
/BRAND/Category-Type-Color Avoiding duplicate content and product listings, I would appreciate your proposed canonicalization strategy/feedback.0 -
Need Guidance On SEO Campaign
Hello, my website is www.mybluedish.com and I am launching an SEO campaign to increase our rankings, especially for the keyword 'satellite internet'. We used to be ranked #5 for this keyword and Google made some changes about 9 months ago that dropped us way back. We have recovered a lot back to #18 now, but have been stuck here for a while. I want to step up our SEO campaign and have come up with the following campaign. Could any SEO's please tell me if you think the following is the make up of a solid SEO campaign or if it should be adjusted? Thank you. 12 new blog articles/month 24 Articles submitted to 10 different directories each (total of 200 article directory submissions)/month 1 basic Press Release from PR.com/month 200 do follow blog comments/month 10 paid blog posts (on other people’s blogs of PR 1-5)/month
Intermediate & Advanced SEO | | MyNet0