FROM CACHE - en_header

Custom Canonical for Product Pages

Ted_K_
Tourist
17 0 3
‎07-04-2016 07:44 PM

Custom Canonical for Product Pages

Instead of using variants, we actually have separate pages for each color of the product. This practice apparently creates quite a number of near identical pages. e.g.

https://www.wazofurniture.com/products/sofa-conrad-dark-grey
https://www.wazofurniture.com/products/sofa-conrad-dark-blue

I'm thinking of creating a custom product metafield (something like product.seo.unique_url) and apply it in the global theme.liquid.

If the custom metafield is present (eg https://www.wazofurniture.com/products/conrad-dark-blue canonicalizes to https://www.wazofurniture.com/products/conrad-dark-grey), then a custom canonical tag ("<link rel="canonical" href="https://www.wazofurniture.com/products/conrad-dark-grey" />) should be generated. If no custom metafield is present, the original global tag should be applied, ie: <link rel="canonical" href="{{ canonical_url }}" />

I have come to this point:

{% if template contains "product" %}
{% if product.metafields.seo.unique_url == "" %}
<link rel="canonical" href="{{ canonical_url }}" />
{% else %}
<link rel="canonical" href="{{ product.metafields.seo.unique_url }}" />
{% endif %}
{% else %}
<link rel="canonical" href="{{ canonical_url }}" />
{% endif %}

It works when the custom metafield is present, but it won't fall back when the metafield is absent. It simply returns <link rel="canonical" href="" />.

Any help in tweaking the code is appreciated.

9,398 Views
Replies 10 (10)
Jason
Shopify Expert
10873 190 2177
‎07-06-2016 06:58 AM

Re: Custom Canonical for Product Pages

Hey Ted,

You can try this:

{% if product.metafields.seo.unique_url == blank %}

Or as a revised complete version:

{% if template contains 'product' %}
  {% if product.metafields.seo.unique_url == blank %}
    <link rel="canonical" href="{{ canonical_url }}" />
  {% else %}
    <link rel="canonical" href="{{ product.metafields.seo.unique_url }}" />
  {% endif %}
{% else %}
  <link rel="canonical" href="{{ canonical_url }}" />
{% endif %}

 

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
9,374 Views
0 Likes
Ted_K_
Tourist
17 0 3
‎07-07-2016 05:18 AM

Re: Custom Canonical for Product Pages

Thanks so much, Jason. This little tweak works like a charm!

I believe this custom metafield can give SEO minded webmasters ample room to canonicalize product pages the way they want. They may even set the target page to the longer path /collections/collections-handle/products/products-handle, if they so choose. 

9,375 Views
Richard_Xue
New Member
1 0 0
‎11-15-2016 05:41 PM

Re: Custom Canonical for Product Pages

Hello Jason, 

Great work on the shopifyFD ! I am still new to shopify and i am trying to do what this post suggests with this code in the theme.liquid 's <head>

{% if template contains 'product' %}
  {% if product.metafields.seo.unique_url == blank %}
    <link rel="canonical" href="{{ canonical_url }}" />
  {% else %}
    <link rel="canonical" href="{{ product.metafields.seo.unique_url }}" />
  {% endif %}
{% else %}
  <link rel="canonical" href="{{ canonical_url }}" />
{% endif %}

and on the product page i have

namespace: seo

key: unique_url

value: https://ihslinkyfurniture.com/products/collapsible-ottoman-42-inch

however, even when saved, the product page that i am testing for still doesn't show any effect. It does show the default global canonical but not the link that we want to change as stated in the 'value:' section.  Is there something that is missing from this picture? Your advice would be really helpful! Thanks!

9,375 Views
0 Likes
Ted_K_
Tourist
17 0 3
‎07-31-2017 11:18 PM

Re: Custom Canonical for Product Pages

Richard, please make sure that you save the metafield before saving the page. 

I created a git for the code at https://github.com/WazoFurniture

9,375 Views
0 Likes
Sammy5
New Member
2 0 0
‎09-23-2018 02:05 PM

Re: Custom Canonical for Product Pages

Hi guys,

A quick question following on from this subject,

Is it possible to edit the above code to make the canonical pointing to a collection?

My aim is to have a canonical pointing to the below version of a product:

domain.com/collection/product/product-name

 

Any suggestions?

9,375 Views
0 Likes
Iky
Tourist
11 0 3
‎04-28-2019 07:39 AM

Re: Custom Canonical for Product Pages

Thanks Jason! It works perfectly! I am so happy now!

@Jason wrote:

Hey Ted,

You can try this:

{% if product.metafields.seo.unique_url == blank %}

Or as a revised complete version:

{% if template contains 'product' %}
  {% if product.metafields.seo.unique_url == blank %}
    <link rel="canonical" href="{{ canonical_url }}" />
  {% else %}
    <link rel="canonical" href="{{ product.metafields.seo.unique_url }}" />
  {% endif %}
{% else %}
  <link rel="canonical" href="{{ canonical_url }}" />
{% endif %}

 

@Jason wrote:

Hey Ted,

You can try this:

{% if product.metafields.seo.unique_url == blank %}

Or as a revised complete version:

{% if template contains 'product' %}
  {% if product.metafields.seo.unique_url == blank %}
    <link rel="canonical" href="{{ canonical_url }}" />
  {% else %}
    <link rel="canonical" href="{{ product.metafields.seo.unique_url }}" />
  {% endif %}
{% else %}
  <link rel="canonical" href="{{ canonical_url }}" />
{% endif %}

 

 

8,934 Views
Torben_
New Member
1 0 0
‎08-13-2019 06:02 AM

Re: Custom Canonical for Product Pages

Hi,

 

I am trying to get this done, but I am already struggling with editing the metafields. ShopifyFD seems to not work anymore (?). 

 

Is this still the way to go in 2019 and does this work when using Langify to translate the shop?

 

Thanks,

Torben

8,405 Views
0 Likes
Iky
Tourist
11 0 3
‎09-06-2019 02:45 PM

Re: Custom Canonical for Product Pages

I was very happy installing canonical tag for product pages! Now, I have another interesting question..
Can any Shopify Experts please comment if the code below makes sense?
My intention is to have the combination of 1) & 2)
1) Keep the existing product page canonical linking
2) Stop indexing all the Tag pages and Add a canonical tag to a collection page


{% if template contains 'product' %}
{% if product.metafields.seo.unique_url == blank %}
<link rel="canonical" href="{{ canonical_url }}" />
{% else %}
<link rel="canonical" href="{{ product.metafields.seo.unique_url }}" />
{% endif %}

{% else %}

{% if template contains ‘collection’ and current_tags %}
<meta name=”robots” content=”noindex” />
<link rel=”canonical” href=”{{ shop.url }}{{ collection.url }}” />
{% else %}
<link rel=”canonical” href=”{{ canonical_url }}” />
{% endif %}


{% endif %}

7,727 Views
0 Likes
Susie22312
New Member
3 0 0
‎09-22-2019 08:47 AM

Re: Custom Canonical for Product Pages

I have the same issue in my shop.  Each product has a separate product set up for each colorway/variant AND on each product page I have all variants listed.  I did this intentionally for UX experience but know it creates a lot of low quality / duplicate content issues for SEO.

 

I have already had custom code implemented on the product pages to point the variants on the page to the main product.

 

See example: 

 

https://shopmaddieg.com/products/quadrille-moroc-turquoise-navy-on-oyster-fabric-302276p?_pos=3&_sid...

 

<script>
 $(document).ready(function(){
 var productHandle = '';
 var canonicalLinkElement = $('link[rel="canonical"]');
 console.log(canonicalLinkElement.attr('href'));
 console.log(canonicalLinkElement);
 function loadJSONcollection() {
 console.log("triggered");
 $.ajax({
 //url: '/admin/products/search.json?query=title:"Quadrille%20Sigourney%20Fabric"',
 url: '/admin/products/search.json?query=title:"Quadrille Moroc Fabric"',
 type: 'GET'
 })
 .done(function(data) {
 productHandle = 'https://shopmaddieg.com/products/' + data.products[0].handle;
 console.log(productHandle);
 canonicalLinkElement.attr('href',productHandle)
 })
 .fail(function(data) {})
 .always(function(data) {});
 }
 loadJSONcollection();
 });
  
 </script>

 

However, I am now trying to deal with the duplicates in the catalog like the original poster addressed.  For example, I want all of these to canocalize to only the first instance of the product in the catalog.

 

https://shopmaddieg.com/search?type=product&q=moroc

 

My original developer is no longer with the agency and I cannot find anyone to help me implement this.  Can anyone give me any direction on where to put the code?  My coding skills are non-existent.  Happy to hire someone to get it done but thus far, have been unsuccessful trying the "Hire a Shopify Expert" route.

 

Any direction is more than appreciated.

7,589 Views
0 Likes
Matthew1888
New Member
7 0 0
‎10-26-2020 05:59 AM

Re: Custom Canonical for Product Pages

Shopify FD doesnt seem to be working anymore (October 2020), so this solution isn't possible, does anyone have any other suggestions?

943 Views
0 Likes
Promotion image (Anonymous)
Terms of Service Privacy Policy