6

I am trying to decide whether it is a good idea to use different URLs for the rel="canonical" and open graphs og:url links in the following use case:

A pretty standard product page: https://www.smithandcanova.co.uk/aspen/449-double-zip-top-washbag.html

As with many fashion products they come in a number of different colour options. In this case Brown or Black. The default colour currently set is brown. As such travelling to the main link above will take you to the page displaying images of a (mighty fine if I don't say so myself) wash bag in brown.

To improve the experience when linking from external pages (category specifically) I have added the ability to include a parameter on the end of the url to give users a landing page specific to their choice of colour e.g.:

https://www.smithandcanova.co.uk/aspen/449-double-zip-top-washbag.html?color=black

This will load the same page except that the product will display in black rather than brown as with the original link. Brown can be returned to by changing the colour drop down on the page.

Now the issue:

rel="canonical"

It seems a bit of a no brainer to use the root URL (449-double-zip-top-washbag.html) For the rel="canonical" header tag on all pages loaded irrespective of the ?color= parameter in the actual URL.

I am lead to believe this is the best choice because the content on the page per colour is almost identical, violating the golden no duplicate content rule for Google. At most I could have the page title, header and description include the colour to make some difference in content, however all the rest of the text would be identical. Further I would also not wish to write completely different content (description) per colour as switching between colours could be a confusing experience for customers.

I have heard that if your product's colour is very important and ranks very highly per colour then it might be an idea to split the canonical to include the colour in the URL links. I do not believe this is a strong enough argument in this use case (but feel free to comment).

og:url

This leads me onto the open graph og:url link. As this link is mainly used to pull and display content for posts on social media channels I think the og:url parameter should include the colour, otherwise:

  1. The image that is loaded into the social post would often show the wrong colour product (if the colour being linked was not the default colour) and therefore cause friction for the poster. This is the main sticker for me.

  2. The customer will come to the page showing the wrong colour (quite easy to change it with the drop down though).

  3. The product:color or product:ean tags cannot be used.

The main issues against using different URLs are:

  1. Using different og:url links per colour dilutes "likes" by grouping to just the colour instead of the product a whole. This is not necessarily a bad thing if the colour is a main driver. The main question is how important is the number of likes a post has in terms of display reach on Facebook / other platforms? This argument is very similar to the Google canonical argument but as there is no downside due to duplicate content down ranking I think it seems sensible to go the other way on this.

  2. Facebook display a warning when using the Facebook Sharing Debugger stating that the rel="canonical" and og:url links differ when testing a page. I am unaware if any penalty is applied due to this? Do any other platforms using the open graph get upset about this and penalise?

So there you have it. Pros and cons for each method. I have come to the conclusion the having the same rel="canonical" for all colours is best and to have separate colour specific urls for og:url links.

While this case is specific to me I think it applies to large amount of product pages on the web and as such advice on the pros and cons would be greatly appreciated. So if you have any more points to throw into the ring I'm sure many people would be glad to hear them.

Other solutions:

  1. Include images for all the product colours with multiple og:image tags. This is one option however Facebook's docs state that multiple images should be used to offer alternate resolutions (no mention for different images). The official Open Graph page seems to be ambiguous on this point. I reluctant to go against protocol specs in this case.

  2. Using product product.group "og:type" from the Open Graph spec. This would mean I would need further pages for the products also the product.group does not allow prices e.t.c so I believe it is better suited to category pages.

  3. Use product.item "og:type" from the Open Graph spec. Same problems but cannot see any disadvantages to using this over just product tag except that it may not be as well adopted by new social platforms. It has the advantage of adding a link to a product group page, which in this situation could be a category say of the collection the product belongs to. (Maybe this is for a separate post).

  • Why are you making this an either/or proposition? You will have to use the canonical tags, no question. As for the OG stuff, that is entirely up to you. – closetnoc Jan 13 '17 at 16:35
  • @closenoc Thanks for the reply. I agree with you that I have to use the canonical tags. The issue I am struggling with is over what url to set the canonical tags to; the one with the colour parameters included or without. – hygap Jan 16 '17 at 8:05
  • The way I look at these scenarios is that any page with a parameter should have a canonical tag to the same page without parameters. Cheers!! – closetnoc Jan 16 '17 at 15:39
2

What a lovely analysis I must say! The first point of having duplicate content on different pages is what is bothering you but you must also understand that different links will increase the number of pages being indexed as well [including different keywords]

For example, if you have a Black iPhone 7 vs a Silver one, all the e-commerce places will have two different pages. The keywords black, silver are a part of the URL as well. What you can do is to link these pages from each other.

Do not worry about duplicate content as you can keep the colors in the URL as well as the Header tags as well. This will also resolve the issue with having different og tags as well.

I have cross-referenced this with a number of leading e-commerce stores and maybe you can too.

  • I think you have a good point @karan-shah After some more research I have leant of the schema.org tag isSimilarTo which can be used to reference the same product in alternate options see the guide on audisto.com. This seems to back up your point of using separate URLs for the canonical link. – hygap Jan 16 '17 at 8:06
  • great, do give the vote a thumbs up if I've helped you :) – Karan Shah Jan 16 '17 at 10:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.