Convert H2 To H1 In Joomla 3.0

We found a quick and easy way to convert your title H2's into H1's with one simple plugin. This way you don't have to alter any of the core Joomla code.

Steven Johnson
by | Posted: December 13, 2011 | Updated: May 6, 2013

Social Profiles

Google Plus
Blog Post Image 734px Wide

It is surprisingly hard to change the title of an article from H2 to H1 in Joomla. Fortunately, we know of a very simple way to do it. Our method does not require messing with the core Joomla code.

Why Header Tags Are Important

Header tags not only help you title sections of your content, they help search engines figure out what topics are being discussed. This can be a huge impact on how your content is found on the internet.

Having the H1 is also helpful for accessibility reasons. Screen Readers often use header tags to find relevant content on the page. If the main page title is a H2 may not treat it as the main page title.

It's a good rule of thumb to only use H1's for the title of the page. They tell the reader (and search engine) what the web page is about. They are meant to be the broadest part of the page. H2's and H3's are meant to help narrow down the discussion in different sections on the same page.

The Joomla H2 Title issue

The_Joomla_H2_Title_issue.jpg
media_1349964513135.jpg

In Joomla 2.5 and Joomla 3.0 the H1 title tag is assigned to the page header which is set in the menu item. This is great if you have a menu item for every page. This is not usually the case. The article title is then assigned an h2 tag. Almost every page has an article title. It needs to be a H1 instead of an H2.

  1. You can see in the picture above that the title is surrounded by <h2> tags.

The Solution

The best way we have found to change all H2 title tags to H1 is using an extension called, 'Header Tags' by Conflate.nl ( Also in the Joomla extension directory). It works great. Here is how to install and configure the Header Tags extension.

Step 1: Download The Header Tags Plugin

Step_1_Download_The_Header_Tags_Plugin.jpg
  1. Download the 'Header Tags' plugin here
  2. Click 'Download the Header Tags plugin 3.0'. You should download the plugin that matches the Joomla version you are running.

Step 2: Install Header Tags Extension

Step_2_Install_Header_Tags_Extension.jpg
  1. Login to Joomla (Not Pictured)
  2. Go to Extensions > Extension Manager (Not Pictured)
  3. Click, 'Choose File'. Navigate to the 'Header Tags' extension we just downloaded. It should be a '.zip' file.
  4. Click, 'Upload & Install'

Step 3: Go To Header Tags Extension

Step_3_Go_To_Header_Tags_Extension.jpg
  1. Navigate to Extensions > Plug-in Manager (Not Pictured)
  2. Type in 'header' into the search
  3. Click on 'System - Header Tags'

Step 4: Configuring Header Tags Plugin

Step_4_Configuring_Header_Tags_Plugin.jpg
  1. Click the 'Basic Options' tab
  2. Verify in the first section Tab mandatory is set to 'Yes'.
  3. 'Change the first of' is set to 'H2'.
  4. 'Limit' is set to '1'.
  5. 'Change excess in' is set to 'H2'.
  6. Click 'Save'

Note - There are more options below these options, but you will probably not need them

Step 5: Enable Header Tags Plugin

Step_5_Enable_Header_Tags_Plugin.jpg
  1. Click 'Details' to go to the main plugin edit area.
  2. Select 'Enabled' under 'Status'
  3. Click 'Save'

Step 6: Verify That It Works

Step_6_Verify_That_It_Works.jpg
  1. Go to one of your articles (Not Pictured)
  2. Look at the source and see if the first header tag has been changed to an 'H1'

Wrapping Up

As you can see, changing the headers can be easy. If you stick with this plugin you should be ok. If you are looking to change the core of your website and not use a plugin it's possible to do that as well.

We prefer this method because it's easy and safe. We have not had any problems using it so far. It will work with any template and seems to work in the latest versions of Joomla.

Additional Resources

 Download Header Tags    Interview With Header Tag Creator  
Steven Johnson

this is the description for Steven Johnson at JBeginner.

Website: www.intownwebdesign.com

Social Profiles

Google Plus
More in this category: Install and Configure Kunena »

1 comment

  • Comment Link David July 12, 2013 posted by David

    The option "disable by component" is important to avoid many h1 on the main page.
    Thank you very much for the link, I found it very useful.

    Report
Login to post comments

Free Joomla Install

123-action-icons

1. 2. 3. Free

Click Here to find out more about getting your Joomla Installed for FREE!

 

Purchase Custom Joomla Setup

Interested in Getting a custom Joomla setup and ou already have a good hosting company?


Not a problem.  We can provide our custom set up for $100.  With this install you get all the features and benefits of our custom joomla setup.

My Friends

Follow:

Joomla Hosting Reviews on Twitter JBeginner RSS Feed JBeginner on FacebookJBeginner on YouTube Joomla Beginner on Google+ Page