It does not matter if you are new to Joomla or you have been using it for a while. Canonical tags are important, but they can also be a pain to get right.

In this article, I will talk about what a canonical tag is, why it is important in Joomla, and give you three different ways to create a functional canonical tag in the Joomla CMS.

Now, there are other ways to create a canonical tag in Joomla. However, these will be the most user-friendly, and will not require any coding.

What we will cover

01 What is the Canonical Tag?

Canonical tags were first introduced by all the major search engines in 2009. It was fairly unprecedented to have Google, Yahoo, and Microsoft unite to offer a solution to a problem.

The canonical tag solves duplicate content indexation.

In the case of the canonical tag the problem was duplicate content. If the same page can be served from two different URLs, they provide duplicate content. Google does not want to index two identical pages just because it can be served via two URLs.

I believe the team at Moz has good defenition of duplicate content.

"Duplicate content is content that appears on the Internet in more than one place. That “one place” is defined as a location with a unique website address (URL) - so, if the same content appears at more than one web address, you’ve got duplicate content."

Example:

If the following links all serve up the same page, we have a duplicate content issue.

  • http://www.example.com/blog
  • http://www.example.com/index.php/blog
  • http://www.example.com/index.php/option=com_content&view=category&layout=blog&id=13

Duplicate content has a negative impact on the website. This problem is only compounded if Google indexes the wrong URL and then provides it in the search results.

Here are just a few of the problems caused by duplicate content.

  • Search engines don’t know which version to index/not-index.
  • Search engines don’t know which version to show in the results.
  • Users will visit all variants causing poor analytics data.
  • Users will link to all variants causing poor link equity on each variant since it is spread across all variants.

Essentially, your page is spread across several URLs making each variant less effective. When it comes to duplicate content on your own domain the whole is greater than the sum of its parts.

It is important to maintain a one-to-one content and URL ratio. There are some cases where this is not possible, but it should be the goal.

The canonical tag is a great way to fix the duplicate content issue for search engines. The canonical tag is placed on all possible variants and tells search engines which one the primary URL is.

Example:

All of these URLs serve up the same content.

  • http://www.example.com/blog
  • http://www.example.com/index.php/blog
  • http://www.example.com/index.php/option=com_content&view=category&layout=blog&id=13

The following canonical tag would tell Google and other search engines which page version should be indexed.

<!DOCTYPE html>
<html>
  <head>
    <link href="//www.example.com/blog" rel="canonical"/>
  </head>
  <body>
    <p>Hello world.</p>
  </body>
</html>

If this was placed in the head of the html document on the page served up by each of our three URLs, it would indicate that http://www.example.com/blog is the intended URL. Google would then know that the other two are simply duplicates and should not be indexed. It also tells Google that any links pointing to those other URLs actually belong to the primary.

You can see how utilizing the canonical tag would be a serious advantage of your site serves up duplicate content.

Now, you may be thinking, "My site does not have duplicate content." And you might be right. There is a really easy way to find out.

If you are running the Joomla CMS you have duplicate content.

If you are not running Joomla you can look at Google Search Console and Google Analytics to see if any URLs exist that should not.

Canonical tag syntax

The canonical tag is meant to be placed in the HTML <head> of a page on a website. The syntax for a canonical tag is similar to any <link> element in the HTML <head>.

The parts of a canonical tag are as follows:

  1. The beginning of the link tag <link
  2. The hypertext reference attribute href="https://www.example.com/blog"
  3. The relationship attribute rel="canonical"
  4. The end of the tag />

It is important to note that the canonical tag uses the <link> element and that the link element is what is called a void element or empty element. This is because it has no closing tag </link>.

The relationship or rel attribute is used to define the relationship between the linked resource and the current document. When the rel attribute is set as canonical it means that the current document is canonical to the resource identified by the hypertext reference href attribute.

The end of the tag does not require that you use / prior to the ending >. It is also not necessary to have the rel attribute follow the href attribute. However, they can be wise if you wish to maintain a strict HTML standard.

Your complete canonical tag will look like this. <link href="//www.example.com/blog" rel="canonical"/>.

02 Why Joomla Needs a Canonical Tag

If you are running the Joomla CMS you have duplicate content.

In Joomla as in most CMS based sites duplicate content is an issue. This is because URLs are generated dynamically. In the case of Joomla, the PHP core creates the URL that the content is then associated with.

However, Joomla has multiple URLs that a page can be associated with. Let me explain a little about URLs in Joomla. I believe it will help you understand the issue.

In Joomla a URLs can be created in two primary ways it can be created by the component that the page is associated with, or it can be created by a menu item.

Example:

Let’s pretend for a moment that you create a blog page on your website. That uses the alias "blog". The following URL is what Joomla creates.

/option=com_content&view=category&layout=blog&id=13

The com_content in this URL tells us it was created using the core Joomla Content component. It is using the category view, and the blog layout. Lastly it is pulling the content from category 13.

This is what your URLs will look like if Search Engine Friendly URLs (SEF-URLs) in the Global Configuration is set to NO.

Now if you set it to YES you should see URLs like this.

/index.php/blog

Here we can see that the index.php file is appending the domain in the URL. This can be removed by renaming the "htaccess.txt" file in the site root directory to ".htaccess".

If you do that you will have a URL that looks like this.

/blog

Now if the menu item id for your blog is 24 you could also find the page using the following URL.

/index.php?Itemid=24

The important thing to know is that all of these URLs work if you use the SEF-URLs and the .htaccess file.

The important thing to know about Joomla is that once you turn on SEF-URLs and rename the .htaccess file all of these URLs will work. That’s right! Every one of these will still serve up content if entered into your browser.

This needs to be fixed. There are several ways to go about doing it. Let me share with you my three favorite methods to adding canonical tags.

The https, www, and trailing slash problem

It is important to know that www and non-www are two different pages. This is also a duplicate content issue. I would recommend setting a rewrite rule in .htaccess to send all traffic to one or the other. The same goes for http or https and tailing slash or no trailing slash.

I recommend correcting this issue with a single redirect. This takes a little advanced .htaccess knowledge. You can find the details on how to do it in my guide on how to force https, www, and the trailing slash with a single redirect.

It helps keep users and Google from visiting alternative versions of your website. However, it cannot be done for every duplicate page. Joomla needs a canonical tag.

03 How to add canonical tags using custom fields

The first method to create canonical URLs in Joomla is to do so using the Custom Fields component.

Custom Fields were added to the Joomla core in version 3.7. With a little work we can create a canonical tag for any item if the component employs Joomla Custom Fields.

There are three steps to this method.

  1. Create a field group
  2. Create a new field
  3. Create a view override

A. Create a Field Group

This is the simplest step.

First, navigate to the Field Groups area of the component in the administrative backend. For the Content component this can be found in the Admin Menu > Content > Field Groups. You can also find it in the sidebar menu of the component.

Second, create a new Field Group. You will need to fill in some basic information.

  • Title – SEO
  • Description – Custom SEO fields

Save your new field group. This is all you need to do to the field group.

B. Create a new field

First, navigate to the Fields area of the component in the administrative backend. This can be found the same way as the Field Groups; however, it is called Fields. Second, create a new Field. The following is the recommended information you will need to enter.

  • Title – Canonical URL
  • Type – URL (url)
  • Name – Leave Blank
  • Label – Leave Blank
  • Description – Canonical tag to be placed in the HTML head.
  • Required – No
  • Default Value – Leave Blank
  • Schemes – HTTP, HTTPS
  • Relative – No
  • Status – Published
  • Field Group – SEO
  • Category – All (You can restrict the category that this is available in, however that is not likely to be helpful.)
  • Access – Public
  • Language – All
  • Placeholder – https://example.com/epic-blog-post
  • Render Class – Leave Blank
  • Edit Class – Leave Blank
  • Show Label – Show
  • Show On – Both
  • Automatic Display – Do not automatically display

Once you have entered all the previous data you can save the new field. Once you have saved it you will need to identify the field ID number. You will need it later. It can be found in the right column when viewing the list of fields.

C. Create a view override

This step will require a little bit of code editing. However, you do not need to be a programmer to do it. You just need to be able to follow these steps. If you are unfamiliar with creating overrides in Joomla, I would recommend reading Understanding Output Overrides in the Joomla documentation.

First, identify the component view you have created the field for. If you have created a field for the Content component you will need to create an alternate view in your template for the article view.

Second, copy the original view to your template. You can simply copy the default.php file from /components/com_content/views/article/tmpl/default.php. Copy the file to /templates/YOUR_TEMPLATE/html/com_content/article/. Once you have created /templates/YOUR_TEMPLATE/html/com_content/article/default.php it will be used instead of /components/com_content/views/article/tmpl/default.php.

Third, you will need to add a few lines of code to the new default.php file. Although you can add the following code snippet just about anywhere, I would recommend inserting it before the first ?> on or around line 26.

//Insert canonical link in HTML head if not empty
foreach ($this->item->jcfields as $field) {
    //Replace X with the Canonical URL field ID number
    if ($field->id === 'X') {
        //Makes sure the Canonical URL field is not empty
        if (!empty($field->rawvalue)) {
            //Inserts the Canonical URL field content with markup into the HTML head
            $canUrl = '<link href="' . $field->rawvalue . '" rel="canonical" />';
            $document = JFactory::getDocument();
            $document->addCustomTag($canUrl);
        }
        continue;
    }
};

Make sure you replaced X with the ID number of your new Canonical URL field. If you do not, this will not work.

04 Extensions that work

At the current time there is only one extension that I know of that creates working canonical tags. It is the StyleWare Plugin. The downside is that it only creates canonical tags for the content component article and category pages.

StyleWare Plugin (com_content only)

The Styleware Content Canonical Plugin automatically creates canonical URLs for the core Joomla content component articles and categories. If you use the core content component and have lots of categories or articles this is a great little plugin.

First, download the plugin

Downloading the plugin is the most difficult part of the process. You can download it from StyleWare.eu.

  1. You will need to register on the Style Ware website to download the plugin.
  2. Then go to the StyleWare Content Canonical Plugin page.
  3. Click the "Add to cart" button.
  4. On the next screen, click "checkout".
  5. Confirm you order and you will reach the success message.

A message with the download link will be sent to your email, so you can finally download the plugin.

Next, install and enable the plugin.

That is all there is to it.

05 Extensions that don't work

There are many components that claim to create canonical tags. However, in my experience they rarely do so with any amount of success.

Here are a few extensions I have personally tested.

sh404SEF

This is the most comprehensive approach to managing search engine friendly (SEF) URLs in Joomla. It takes a little work to set up, but it much more powerful than most other options.

The problem is that it does not serve canonical tags very well. sh404SEF is designed to "listen" for non-SEF URLs and create a SEF URL that can be used instead. Because this is the core of what sh404SEF does, each canonical tag must be created manually. The trouble is that the canonical tag is assigned to the SEF URL. This means that if a URL is requested that has never been used before it will have no canonical tag.

Unfortunately, sh404SEF is not a solution.

MetaMan

MetaMan is a plugin created by StackIdeas. StackIdeas creates some amazing extensions for Joomla. However, this plugin does not provide a true canonical tag. MetaMan has a canonical tag field where you can specify the canonical URL for a given page. The trouble is how MetaMan associates the data you enter with the page. MetaMan uses the URL to identify the page where the meta data belongs.

Let me explain why the URL identity method is a problem.

If you enter meta data (including the canonical URL) with MetaMan on http://www.example.com/blog, the meta data and canonical tag will only ever be displayed on /blog. This means that MetaMan is only good at creating self-referencing canonical tags. This is not a solution.

06 How to test canonical tags in Joomla

Before you call it a day, you will want to check to make sure your canonical tags are working correctly. This is very straight forward. You want to check the same item via several URLs.

Set up the test

You will want to turn on SEF-URLs in the website's Global Configuration and rename the htaccess.txt file to .htaccess.

Pick an article and menu item to use for the test. We will need the ID number for both the article and menu item. The ID can be found in the far-right column of all core component item tables in the Joomla backend.

Image of Joomla backend showing article id numbers highlighted

Let's pretend that your website is https://www.example.com.

Menu Item

  • Title - Blog
  • Component / View - Content / Category Blog
  • Category - Blog (id=13)
  • Alias - blog
  • ID - 24

Article

  • Title - Epic Blog Post
  • Alias - epic-blog-post
  • Category - Blog (id=13)
  • ID - 43

Test the menu item canonical tags

The first set of URLs we will test will be ones for the menu item.

  • https://www.example.com/blog
  • https://www.example.com/index.php/blog
  • https://www.example.com/index.php?itemid=24
  • https://www.example.com/index.php?option=com_content&view=category&layout=blog&id=13&itemid=24

You should see a link with the rel="canonical" tag in the head of the html document on all of these pages.

<link href="https://www.example.com/blog" rel="canonical"/>

Test the article canonical tags

Testing the article canonical tags is just a little more complicated. There are two sets of URLs we will test. We will take a closer look at the second set.

  • https://www.example.com/index.php?option=com_content&view=article&id=43

This first URL calls the article apart from the category and menu item. This makes sure we know that the canonical tag is assigned to the article itself. We should see the following canonical tag.

<link href="https://www.example.com/blog/epic-blog-post" rel="canonical"/>

If that has the correct canonical tag we will move on to the next set of URLs. In this set we will call for the same article. However, we will assign it to the menu item and category. Since the menu item and possibly the category may have a canonical tag, we need to ensure that they are overridden by the article canonical tag.

  • https://www.example.com/blog/epic-blog-post
  • https://www.example.com/index.php?option=com_content&view=article&id=43&itemid=24

We should find the same canonical tag as we found using the first article URL set. However, we also need to make sure that there is only one canonical tag. If you see both canonical tags, like the following, you have a problem.

<link href="https://www.example.com/blog" rel="canonical"/>
<link href="https://www.example.com/blog/epic-blog-post" rel="canonical"/>

Canonical tags are not easy. Make sure they are setup correctly on your website. A mistake can cause serious issues.

Conclusion

Canonical tags are an important part of any modern website. This is only compounded by the fact that the Joomla CMS creates multiple working URLs for most pages.

I recommend using the StyleWare canonical plugin to automatically generate canonicals for articles and categories. This is the easiest and most complete solution.

There are many other canonical extensions in the Joomla Extension Directory. Many of them don't work well; however, I welcome you to try them and tell me how they work.

If you have any questions or suggestions, please connect with me on social media or shoot me a message.