In this guide, you will learn how to use article tags to sort your content in Joomla 4. Tags may be used instead of or in addition to categories.
Tags allow you to group collections of related items together based on a certain topic. Here’s a list of some key comparisons between tags and categories.
- Articles may have multiple tags, but only one category
- Categories have a linear, hierarchical structure. Tags have more of a “cloud” like structure.
- Articles with matching tags are considered as being similar and may be displayed in the similar articles module.
- Categories are usually more general, and tags more specific to the content.
- Tags can be created instantly from within the article edit screen, categories must be manually created and organized separately.
Tagging Example
Here’s an example scenario of a situation where you may want to use tags. Say you have six different articles, their titles and brief descriptions are below:
- Pill a Cat – A step by step guide on safely pilling your cat (giving them medicine) as comfortably as possible.
- Crazy Cats Causes – If your cat’s been acting up, here are some possible reasons and solutions.
- Best Dog Foods – The top 10 brands of dog food for your furry friend.
- Worst Cat Foods – Not everything’s a healthy choice.
- Doggy Anxiety Medications – How commonly prescribed anti anxiety medications work in dogs.
- Dog Training 101 – Effectively teach the three basic commands, sit, stay, and come.
If I were to categorize those articles using categories, I have several options. The articles could be grouped generally by animal type into two categories – dogs and cats. They could be grouped into more specific subcategories like medical, behavior, and food, under the dog/cat parent categories. Doing it that way would require me to create 6 subcategories total with 3 subcategories under each parent category, which is cumbersome. I could put them all in one category of animals. There are countless ways these articles could be categorized.
Rather than using categories, I can use tags. With tags, I can specifically group the articles by content without the need to create a ton of subcategories. This requires less work on my part and I don’t have to come up with an overly complex categorization system.
Now, when a user clicks the “Food” tag, they’re shown all articles about cat food and dog food. When they click the dog tag, they’re shown all the articles about dogs. The tags overlap, unlike categories.
All tagged articles must have a category. Even if you don’t plan on using categories, all articles in Joomla must be in some category. Tags are secondary to categories as far as Joomla is concerned. Categories are part of the core Articles component, tags are more of an add-on feature. If you don’t want to use categories, you may put all your articles in one category (like Uncategorized), and then hide the category from displaying on the front end using the article, menu, or global options.
Note that articles are not the only thing that can be tagged in Joomla, but for the sake of this guide, we’ll stick with articles. Contacts, banner categories, article categories, and more can also be tagged using similar logic and the same pool of tags.
Adding Tags
There are two ways to add tags to your website.
From The Article
The easiest way is with the article editor. Find an article you’d like to add a new tags to, open it in the article editor, type the name of the new tag, and hit the enter key. This will automatically create a new tag and add it to the article. If the tag already exists, the existing tag will be added.
From The Tags Manager
The second way to add a tag to an article is with the tags manager. Navigate to Components → Tags in the back end menu.
This is the tags manager. This screen lists all the different tags that have been created, along with the number of items that have been tagged respectively. You may create a new tag manually by clicking the New button in the toolbar.
Each tag may have a description. Additionally, you can create a hierarchy of tags by assigning one tag a parent tag.
Front End Tags View
How your tags display will depend on which template you’re using. The default Cassiopeia template displays the tags under the article info block at the top of the article.
When a user clicks a tag, they are taken to a page displaying all the articles with that tag. This is the “Tagged Items” view.
Additional options may be configured in the Tags component. Go to the Tags manager (Components → Tags) in the back end and open the Options. Here, you can change different view settings.
The first tab, Tagged Items, has the settings for the single tag display page.
Here’s a summary of what each setting does.
- Default Tagged Items Layout
- You have a choice of the default layout, or compact. These are the two built-in component layout options.
- Enable Versions
- Enable versioning on tags. This will save the last 5 times someone edited a tag, by default. In case you need to restore an older version.
- Maximum Versions
- Ties in directly with the last setting. How many versions to keep of a tag.
- Tag Name
- Shows the tag name on the page containing those tagged items. Usually set this to hide, as the page title will already be the tag name. Turning this on may show the tag name twice under two separate headings.
- Tag Image
- Display the image set in the options tab of a tag item on the tagged items page.
- Tag Description
- Show the tag description of the tag item on the tagged items page.
- Image
- An image to show at the top of all tag items page, regardless of the tag.
- This will be shown in addition to the tag image, if set.
- Order
- How to order the articles that have been tagged in this view.
- Direction
- The direction of the order. Ascending is first to last, oldest to newest, A to Z. Descending is the opposite.
- Table Headings
- Shows table headings if you use the Compact view. The default view does not use a table.
- Date
- Show a selected date next to the articles. Only works with compact layout.
- Item Images
- Shows the article intro image, and any images above the read more break, along with the tagged item. In default layout only, not compact.
- Item Description
- Shows the text/html above the article’s read more break. The introtext.
- Maximum Characters
- The maximum amount of characters of introtext to show along with an item in the tagged items list.
Tag Menu Item Types (Component Views)
The Tags component has 3 different views to select from – the compact list of tagged items view, the list all tags view, and the tagged items view.
We just discussed the tagged items view. It’s the view users see when they click a tag and it displays a list of all the articles with that tag. You can manually create a menu item for a tag if you want to link directly to that page, or configure tag-specific options for an individual tag.
Compact List of Tagged Items
The Compact List of Tagged Items view/menu item type displays a list of all the articles that have a certain tag or tags. In this example, I created a menu item that displays all of my articles with both the tags “Dogs” and “Food.”
The default option is to match items with ANY of the tags selected. So it would show all my articles tagged Dogs AND all my articles tagged Food together.
To make it show only items with both of the tags, I need to set the Match Type property under the Item Selection Options to All instead of Any.
You can also customize the way the list of items looks like under the List Layouts tab. These options follow the standard for any list layout. The Tag Options tab will display mostly the same options explained in the section above for Tagged Items.
When I visit this menu item in the front end, it now only shows my articles with both the tags “Dogs” and “Food” – I only have one article with both tags at the moment.
List All Tags
The List All Tags menu item type will display a list of all the tags on your website, or all the tags under a parent tag of your choosing.
Under the Options tab, you can give the page some heading text with or without a heading image. This would likely be information about the page and the content of the tags in this group. You also have the option to show tag descriptions and images.
Under the Selection Options you can select from a few different display options. Such as how many tags are displayed and what options the user has to filter the results. This tab does not relate to the Item Selection Options tab from the Compact List of Tagged Items view.
This is what the List All Tags menu option looks like on the front end. I added a little text to the heading area of the Options tab, but left all the other settings as their default.
Note that the filter only allows the user to search by tag title, and they cannot filter results by multiple tags at once.
Possible Drawbacks of Tags
In many other CMSes, users can filter articles by selecting multiple tags at once. They can select two or three tags, and get a list of articles with all of those tags. The only way you can show users lists of articles containing sets of over one tag together is through the Compact List of Tagged Items menu item type. Joomla has no built-in way of filtering multiple tags at once on the front end. It can only be done if we pre-select the multiple tags to filter by in the back end using the menu item.
When users search for tags using Joomla’s built in search tool, it only searches for the tagged items page itself – not the articles attached to the tag. If a user searches for a tag by title, they must click the tag result to view all the articles under that specific tag. The search tool cannot filter articles by tag.
There are some third party extensions that may help with this problem, and allow your users greater control over viewing tagged items. One extension I’m experimenting with is JFilters, a free/paid extension that allows you to display filtered search results based on category and tag selections. It grants the ability for users to filter article search results by tags selected using an ANY matching items filter, not an ALL matching filter.
Tags Modules
There are two core Tags modules included with Joomla 4. The Similar module and the Popular module.
Tags – Similar
Description: This module displays related articles based on the tags the article currently being viewed has. For example, if two articles have the same 3 tags, they’ll be closely related. Each article page would likely show a link to the other in this list.
Module Options:
- Maximum Items: The maximum amount of articles to show
- Match Type: How the similarities are found
- Any: Includes articles with any of the same tags as this article.
- All: Includes only articles with all the same tags as this article.
- Half: Includes articles with at least half the same tags as this article.
- Order Results: How the articles are ordered – By number of matching tags (the default) probably makes the most sense.
Caching: Available
Tags – Popular
Description: This module displays the most popular article tags used in your website. It’s based on the number of items in that tag category.
Module Options:
- Parent Tag: You may restrict tags shown to tags under one parent tag, if you want. Leaving this blank uses all tags across all articles.
- Maximum Tags: The maximum amount of tags to show in the list.
- Time Period: The time range to include tags from. If you want it to ignore older tags for relevance, you could set it to only use the last month or the last year of tags.
- Order: The value the tags are ordered by – default starts with number of items
- Direction: The direction of the order. Ascending is going up in value, descending is going down. So descending by the number of items will sort from the highest number of items to least.
- Display Number of Items: Display the number of items associated with each tag next to the tag labels
- Show No results text: displays the message “no results” if there are no results found.
Cloud Layout
You can use a cloud layout by setting the layout setting in the advanced tab to “cloud” instead of “default.” This will display the tags in a cloud, where the size of each tag is based on the number of items attached to that tag. There are some cloud layout options as well:
- Minimum Font Size: The font size for smaller items (tags with less items in them appear smaller)
- Maximum Font Size: The font size for tags with the most items
Caching: Available
Other Useful Extensions
Here are a few of the third party extensions you may find useful when working with tags.
- JFilters – This previously discussed extension allows you to filter article search results by tag. The free version has basic functionality, the paid version has some nicer display options.
- Tag Transform – This paid module displays tag clouds with more customization options. It’s similar to the popular tags module.