One of our customers asked us how to wrap the title of a Joomla article in h1 tags. By default, the tag used for Joomla article titles is h2.

In this blog post, I'll show you how to change the tags used for your article titles, thanks to template overrides.

Why Do I Need to Change My Joomla Article Heading Tag to h1?

At the time of this writing, by default, all of your Joomla articles' headings will have the h2 tag. This is not the best SEO for your pages with articles.

Your article heading is the most important part of your site content. It is more important than your site name or logo.

If you would like to rank your articles well in Google, assign your Joomla article heading to the h1 tag.

How can I do it for my Joomlashack template?

You don't have to install any extensions to achieve this goal.

You will use Joomla template overrides technique with a small twist to do the job.

Your change will remain intact next time you update your Joomla or your Joomlashack template.

Let's get started.

For the purpose of this tutorial, I installed the Elan template on a Joomla site with the Learn Joomla English (GB) Sample Data:

If you look at the "Beginners" heading source code, you will see that it is surrounded by the h2 tag. Our goal is to replace it with the h1 tag.

Step #1. Create the /overrides Folder

• In your Joomla root folder, go to the /templates/js_elan/ folder

• Inside the /js_elan/ folder, create the /overrides/ folder:

Excellent! You just created a container for your future JS Elan template overrides. Next, you will copy the overrides content in it.

Step #2. Copy the /joomla_3.0/ Folder to the /overrides Folder

• In your /templates/js_elan/ folder, locate the /wright/html/joomla_3.0/ folder:

• Copy the /joomla_3.0/ folder to the /overrides/ folder:

Good job! You now are equipped to create your JS Elan template overrides.

From now on, you can change layouts of your Joomla pages without touching Joomla core files.

In this case, we will not change layout per se. You will just get into your Joomla article layout code and replace h2 to h1. 

Step #3. Replace the h2 to h1 

• In your Joomla backend, go to Extensions > Templates > Templates:

• You will see the Templates: Templates (Site) screen. Click Js_elan Details and Files:

On the next page Templates: Customise (Js_elan):

1. Click overrides
2. Click joomla_3.0
3. Click com_content
4. Click article
5. Click default.php

• You will see the /overrides/joomla_3.0/com_content/article/default.php file open for editing. Around line 64, find the following code:

<div class="page-header"> <h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1></div>

• Replace the h1 with h2.

Ths change ensures that your article page will have only one h1 tag, as it should for the best SEO practice.

• Next, slightly down the page, around line 93, find the following code:

<h2> <?php if ($params->get('show_title')) : ?> <?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?> <a href="/<?php echo $this->item->readmore_link; ?>"> <?php echo $this->escape($this->item->title); ?></a> <?php else : ?> <?php echo $this->escape($this->item->title); ?> <?php endif; ?> <?php endif; ?> </h2>

• Replace the h2 to h1

There you have it. Now go to your site and check the change. You will see that your article title now has an h1 tag.

What's Next?

Join our Joomlashack Everything Club now. Become a member and find everything you need to build great Joomla websites:

• 22 powerful extensions
• 20 beautiful templates
• 500+ easy to follow training videos
• 2 best-selling Joomla books.