H1 - H6 headings

logo pdb
Ryte.com (formerly On-page.org) is one of the best on-page SEO tool, highly recommended by Joomlaseo.com (see review). Free for 1 account (forever)!!!

Making sure your readers have no issues reading your text requires you to structure it. Especially larger pages should not be written as a massive block of text. Structure it with paragraphs and split them in nicely readable chunks using HTML headings. Ideally, the main heading should be an H1 (this is the <h1> element in your HTML) and subsequent headings H2's. If you need more hierarchy, you could even use H3's, but don't go deeper than that.

This structure is good for your readers but also helps Google to find structure and hierarchy in your pages. The most important thing to do is to make sure there is a logical structure in your headings. Ideally, start with a H1, but starting with a H2 will not kill your SEO rankings either. The next heading-level should be either an H2 or H3, whatever comes next, similar as you would normally do when you build a Word-document.

Web Hosting

Why starting with an H1 is often tricky in Joomla

In an ideal world, use an <h1> as the starting heading on every page. Always one and never more than one. Mostly you would want the title of the articles in Joomla to be the <h1> of the page. The problem in Joomla is that with the standard set-up, article titles are usually set up as <h2>:

h1-title

Now leaving this to an H2 is not really a problem, but if you want things perfect, it is better to use H1's. To work around this, you can use a number of solutions:

Option 1: Correct set-up of Joomla

If you do so correctly, you can achieve <h1> titles with the Joomla core options:

  • In your Article Manager, go to the Options and set the parameter Show Title to No. This ensures that the title in the article is not shown at all.
  • Instead, just start the content of every article with an <h1>. This may mean that you need to type the same title in both the Title field and in the editor window, but for smaller sites, this should not be too much trouble.

Article-Manager-h1-title

You could also play with other combinations, using the Menu Manager settings, there are many ways that lead to Rome ;)

Option 2: Extensions

There are a number of extensions that can be used to set your title tags correctly so that they force <h2> titles to become <h1>. A popular example is the Header Tags extension. This works well, the only downside is that this means yet another extension installed.

Option 3: Use a template override

Usually, template overrides are for more advanced users, but this is probably the simplest template override that exists. Especially in Joomla 3, creating template overrides has become extremely easy:

Go to Extensions > Template Manager > Templates and select the current template. Then go to the Create Overrides tab, click on com_content (hidden options are now shown) and click on Article. A code-editor window opens up. Now look for the following section around line 28:

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

You will notice the <h2> tag. If you replace the opening and closing tag with an <h1> your titles will be shown correctly.

Note that you can achieve the same in Joomla 2.5 (which is also still possible in Joomla 3) by copying the file default.php located incomponents\com_content\views\article\tmpl to templates\YOUR_TEMPLATE\html\com_content\article (if needed, create the html and com_content folder in your template folder) and performing the same changes there.

Note that this procedure may not work in all templates, as some template clubs maintain their own overrides, which may conflict with this procedure.

Further structure

After you have arranged an H1 on every page and also some H2's if needed, make sure to keep structuring your text. Use <p> tags for the body text. Usually, I do not go deeper than that. For my module titles, I often use the H3 heading.

Within your text, you can lay emphasis on specific words by using the <strong> element. Google recognizes this and usually your CSS will make it bold so users recognize it as standing out. Also, italic can be used for specific purposes. Use it sparsely though and only if it really makes sense. Don't just use it for SEO purposes....

About this site

Joomlaseo.com is fully built and written by Simon Kloostra, SEO Specialist and Webdesigner from the Netherlands. I have also published a book and blogs for companies like OStraining, TemplateMonster, SEMrush and others.