Canonical_url and 'hreflang' tags on every page problem

Online Store and Theme Development
, ,
1

Our client is using ‘Screaming Frog’ Seo tool to test the shopify store and it suggests that 'We should include only the ‘canonical_url’ in the ‘hreflang’ tag of every page. Also, they said that this is probably holding back their search results in the shopify store.

I am working on this code, I was searching documentation and more to figure it out and find a solution, this topic is new for me, our current code in ‘theme.liquid’ is the following one:

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="">
    <link rel="canonical" href="{{ canonical_url }}">

    <!-- Imaginary Store Hreflang -->
    {% assign base_url_us = shop.url %}
    {% assign base_url_ca = shop.url | replace: ".com", ".ca" %}
    {% assign base_url_fr = shop.url | replace: ".com", ".ca/fr" %}

    {% if template == 'index' %}
      <link rel="alternate" hreflang="x-default" href="{{ base_url_us }}/">
      <link rel="alternate" hreflang="en-US" href="{{ base_url_us }}/">
      <link rel="alternate" hreflang="en" href="{{ base_url_us }}/">
      <link rel="alternate" hreflang="en-CA" href="{{ base_url_ca }}/">
      <link rel="alternate" hreflang="fr-CA" href="{{ base_url_fr }}">
      <link rel="alternate" hreflang="fr" href="{{ base_url_fr }}">
    {% elsif template == 'product' %}
      <link rel="alternate" hreflang="x-default" href="{{ base_url_us }}{{ product.url }}">
      <link rel="alternate" hreflang="en-US" href="{{ base_url_us }}{{ product.url }}">
      <link rel="alternate" hreflang="en" href="{{ base_url_us }}{{ product.url }}">
      <link rel="alternate" hreflang="en-CA" href="{{ base_url_ca }}{{ product.url }}">
      <link rel="alternate" hreflang="fr-CA" href="{{ base_url_fr }}{{ product.url }}">
      <link rel="alternate" hreflang="fr" href="{{ base_url_fr }}{{ product.url }}">
    {% elsif template == 'collection' %}
      <link rel="alternate" hreflang="x-default" href="{{ base_url_us }}{{ collection.url }}">
      <link rel="alternate" hreflang="en-US" href="{{ base_url_us }}{{ collection.url }}">
      <link rel="alternate" hreflang="en" href="{{ base_url_us }}{{ collection.url }}">
      <link rel="alternate" hreflang="en-CA" href="{{ base_url_ca }}{{ collection.url }}">
      <link rel="alternate" hreflang="fr-CA" href="{{ base_url_fr }}{{ collection.url }}">
      <link rel="alternate" hreflang="fr" href="{{ base_url_fr }}{{ collection.url }}">
    {% else %}
      <link rel="alternate" hreflang="x-default" href="{{ base_url_us }}{{ request.path }}">
      <link rel="alternate" hreflang="en-US" href="{{ base_url_us }}{{ request.path }}">
      <link rel="alternate" hreflang="en" href="{{ base_url_us }}{{ request.path }}">
      <link rel="alternate" hreflang="en-CA" href="{{ base_url_ca }}{{ request.path }}">
      <link rel="alternate" hreflang="fr-CA" href="{{ base_url_fr }}{{ request.path }}">
      <link rel="alternate" hreflang="fr" href="{{ base_url_fr }}{{ request.path }}">
    {% endif %}
  </head>

I found a solution, which I do not know if it is the right one, the probably solution is the following one:

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="">
    <link rel="canonical" href="{{ canonical_url }}">

    <!-- Imaginary Store Hreflang -->
    <link rel="alternate" hreflang="x-default" href="{{ canonical_url }}">
    <link rel="alternate" hreflang="{{ request.locale.iso_code }}" href="{{ canonical_url }}">
  </head>

Any help would be soo valuable for me.

Thanks

1 Like
2

If you have different language or region versions of a page, each alternate URL should be the main version for its specific localization. If you only have one language version, you don’t need multiple hreflang tags. What’s your situation?