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?
A Canonical tag is an HTML attribute value that identifies a URL as being canonical to the page it is served on. The canonical tag looks like this rel="canonical".
A complete canonical link will look like this. <link href="//www.example.com/blog" rel="canonical"/>.
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/bloghttp://www.example.com/index.php/bloghttp://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/bloghttp://www.example.com/index.php/bloghttp://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:
- The beginning of the link tag
<link - The hypertext reference attribute
href="https://www.example.com/blog" - The relationship attribute
rel="canonical" - 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. This method was first thought up by Robert Went.
It works well if you aren't afraid to do a little cut and paste with PHP code. You also should be using a template that will not have your edits overwritten by an update. This means that if you use a commercial template this solution may not work.
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.
- Create a field group
- Create a new field
- 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.
How to use the StyleWare plugin
Downloading the plugin is the most difficult part of the process. You can download it from StyleWare.eu.
- You will need to register on the Style Ware website to download the plugin.
- Then go to the StyleWare Content Canonical Plugin page.
- Click the "Add to cart" button.
- On the next screen, click "checkout".
- 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.
Finally, you will need to install and enable the plugin.
That is all there is to it.
Custom Canonical Plugin
Full disclosure: I developed this plugin in early 2018 because I wanted something that allowed me to put canonical links on menu items and tags. In October of 2018, I realized that lots of people were reading this blog post. A few people had reached out looking for more options. I decided to release the plugin free to the public.
The Custom Canonical Plugin allows Joomla administrators the ability to add custom canonical URLs to Joomla articles, categories, tags, and menu items. Canonical links can only be created manually using this plugin. Because of this, it may not be suited for an existing site with lots of content. However, new sites or sites with a manageable number of items it is a good solution.
How to use the Custom Canonical plugin
- Download the plugin.
- Install, enable, and configure the plugin on your Joomla website.
- Create canonical tags using the Canonical URL field in the Publishing or Metadata tabs of your item.
That is pretty much it. Nothing crazy.
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.
Helix Ultimate
Anyone who built their Joomla website with a Helix Ultimate based template may have serious problems with canonical tags. The issue does is not in the plugin but in the Helix Ultimate template. The template index.php file inserts what the developers think is a canonical tag into the HTML <head>. It looks like this...
<link rel="canonical" href="/<?php echo JUri::getInstance()->toString(); ?>">The error with this method may not be obvious unless you know what the JUri class and its methods do. This is essentially grabbing the current URL, casting it from an object to a string, and then using it as the canonical link.
Why is this a problem? At best it is creating a self-referencing canonical tag. This, of course, assumes the URL is correct.
What if the URL is not correct? What if we used a query string with UTM parameters. It will always point to itself. Unfortunately, for anyone using Helix Ultimate you have a canonical tag that is always self-referencing, even when the URL is not correct.
If you do use Helix Ultimate or a JoomShaper template make sure to delete that line from your template's index.php file. It will save you a lot of headaches.
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.
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/bloghttps://www.example.com/index.php/bloghttps://www.example.com/index.php?itemid=24https://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-posthttps://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.
Of course, you are welcome to try my plugin, Custom Canonical, to add your own canonical tags. Please let me know how it works.
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.
