HTML markup and H1

When you build your Joomla website, or any type of site actually, make sure to keep your code as clear as possible, use semantic HTML and make sure it's valid. If you, as a human, can easily understand your HTML code, the same will probably count for search engines.

There are a few simple guidelines you should stick to:

• Allways put your CSS and Javascript in external files. Only very small files can sometimes be kept in-line for better performance, but this should be an exception)
• Structure your content using correct HTML tags. So don't use span-tags all over the place, but use more advanced HTML tags instead. For example, if you need a quote, don't use a span with font-style italic, but use the "q" tag. Especially if you build your site using HTML5, you can use a lot of tags that can help you to structure your content. Instead of using div's with an id, you can use <header>, <footer>, <aside> and much more. If used properly, you can help search engines to distinguish the main content from the page.
• Use micro-data (explained in a separate article).

Create structured content in your articles

Besides structuring your Joomla template, you should also structure your content. Again, this helps Google to find structure and hierarchy in your pages.

The utmost important thing to do is to use an <h1> tag on every page. Always one and never more then one. After the title-tag, it is the most important parameter in your content. 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>. 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.
• 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.

You could also play with other combinations, using the Menu-manager settings.

Option 2: Extensions

There are a number of extensions that can be used to set your title tags correctly so that they change <h2> titles to <h1>. An 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.

After you have arranged an <h1> on every page, make sure to keep structuring your text. Use <p> tags for the body text, and for further headings, use <h2> (preferably no more the 3-4 per page) and <h3>.

Then for special cases, use tags like <q>, <b>, <i> if needed. Make sure to use them for structuring, not for formatting!

• < Prev
• Next >