Custom Canonical for Product Pages

Tourist
16 0 2

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.

1 Like
Shopify Expert
9981 85 1492

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 %}

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Tourist
16 0 2

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. 

1 Like
New Member
1 0 0

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!

0 Likes
Tourist
16 0 2

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

0 Likes
New Member
2 0 0

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?

0 Likes
Tourist
11 0 1

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 %}

 


 

1 Like
New Member
1 0 0

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

0 Likes
Tourist
11 0 1

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 %}

0 Likes
New Member
2 0 0

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.

0 Likes