[How To] Add H1 Tags to your vBulletin Templates for Long Tail Search Optimization

Here you will find details on three different methods of adding H1/H2 tags to your forum's templates. Heading tags (H1/H2) can help provide an extra SEO advantage for your forum. This can provide a direct long tail search boost!


Method 01 - Adding H1 Tags to Thread Titles in the Default vBulletin Style

In this method, you will focus on applying H1 tags around important text (acting as the page title).

To do so, you must edit your your navbar template.

Steps to Updating Your navbar Template with a H1 Tag

• Login to your vBulletin AdminCP.
• On the left hand side of the screen, locate Styles & Templates.
• Expand the menu and click Style Manager.
• Identify the style you wish to update, and then select Edit Templates from the menu.
• A list of all templates for the style will be displayed.
• Find the Navigation / Breadcrumb Templates in the list and and double click it.
• Then double click the navbar template to begin editing.
• At the very bottom of the template, below the rest of the text, please add the following:

HTML Code:

<if condition="THIS_SCRIPT == 'forumdisplay'">
<h1>$foruminfo[title_clean]</h1>
<else />
<if condition="THIS_SCRIPT == 'showthread'">
<h1>$thread[title]</h1>
<else />
<if condition="THIS_SCRIPT == 'group'">
<h1>$custompagetitle</h1>
<else />
<if condition="THIS_SCRIPT == 'album'">
<h1>$custompagetitle</h1>
<else />
<if condition="THIS_SCRIPT == 'tags'">
<h1>$tag[tagtext]</h1>
<else />
<if condition="THIS_SCRIPT == 'blog'">
<h1>$pagetitle</h1>
<else />
<if condition="THIS_SCRIPT == 'member'">
<h1>$userinfo[username]</h1>
<else />
<h1>$vboptions[bbtitle]</h1>
</if>
</if>
</if>
</if>
</if>
</if>
</if>

• Click save and you are done.

The result is that your thread, social group, album, tag, blog, and member pages will now have new title added, and formatted in a H1 tag which will help to optimize the page for SEO.



Method 02 - Using a CSS Trick to Add a H1 Tag to Your Logo

In this method, you will focus on applying H1 tags on text included in your logo or header image.

To do so, you must edit your your navbar template.

Steps to Updating Your Header Template with a H1 Tag Using the CSS Trick

• Login to your vBulletin AdminCP.
• On the left hand side of the screen, locate Styles & Templates.
• Expand the menu and click Style Manager.
• Identify the style you wish to update, and then select Edit Templates from the menu.
• A list of all templates for the style will be displayed.
• Then double click the header template to beginning editing.
• Please locate the following text in your header template
  
  • Note: This is the stock vBulletin template, so it may appear slightly different for you, if you modified or created a custom style.

Find:

HTML Code:

<a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a>

Replace With:

HTML Code:

<div id="header"><h1><a href="$vboptions[forumhome].php$session[sessionurl_q]">$vboptions[bbtitle]</a></h1></div>

• The next step is to add some CSS code.
  
  • Note: Within the following code you MUST update the "background path" to *your website's logo image*.

Code:

#header h1 { margin: 0; padding: 0; }
#header h1 a {
display: block;
background: url(images/misc/vbulletin3_logo_white.gif) center left no-repeat;
width: 209px;
height: 85px;
text-indent: -9999px;
float: left;
}

Now your H1 will enclose some important text that you want to promote to the search engines. The CSS code hides that text behind the image (i.e. your logo).

The H1 should ideally only be used once on the page. So if you plan to use additional heading tags, use H2/H3 or higher. Do not use another H1 on the same page for best results.

A semantically structured page requires the H1 tag to be the first of the H tags to be displayed on the page.

The H2 and H3 tags can be used multiple times through your page (on headings, not random text). Make sure that you follow the hierarchy as follows:

H1 -> H2 -> H3 -> H4 -> H5 -> H6

Do not use them out of order, and do not skip heading levels by jumping from (for example) H1 right to H3s. In this example you have skipped the H2 that must be included to achieve a semantic (i.e. correctly) structured page.

Method 03 - H1 Tag to Your Forum Title

In this method, you will focus on applying H1 tags on text below your logo or header image.

To do so, you must edit your your header template.

Steps to Updating Your Header Template with a H1 Tag Using the CSS Trick

• Login to your vBulletin AdminCP.
• On the left hand side of the screen, locate Styles & Templates.
• Expand the menu and click Style Manager.
• Identify the style you wish to update, and then select Edit Templates from the menu.
• A list of all templates for the style will be displayed.
• Find the header in the list and and double click it.
• Please locate the following text in your header template

Code:

$spacer_open

Below that please add:



The next step is to add some CSS code:

• Login to your vBulletin AdminCP.
• On the left hand side of the screen, locate Styles & Templates.
• Expand the menu and click Style Manager.
• Identify the style you wish to update, and then select Main CSS from the menu.
• Main CSS details of the style will be listed.
• Locate Additional CSS Definitions.
• Paste CSS variable inside the empty box.
• Click Save button

Code:

.h1 {
    font-size: 1.4em;
    color: #000000;
    margin: 0;
    padding: 6px;
}

Great tutorial thanks Michael

Hi Michael,

I'm using RR to accomplish the same:

forumdisplay

<h1 class="rr">[forum_title]</h1><p class="rr">Em seguida encontrará uma lista de tópicos na categoria <b>[forum_title]</b> do [bb_title]. [forum_description]</p>

showthread

<h1 class="rr">[thread_title]</h1><p class="rr">Este é um tópico sobre <em>[thread_title]</em> em <b>[forum_title]</b>, sob a categoria [parent_forum_title]; [first_post_20_words]...</p>

Is your method better than this one?

Thanks
n

Is it worth implementing all three or just do one of the above?

And sorry to be a pain

Then double click the header template to beginning editing.

The word header, should be navbar.

Nice easy to follow instructions

I've also found this article quite helpful https://www.vbseo.com/f30/h-tags-que...22/#post164625

Originally Posted by nfn

Hi Michael,

I'm using RR to accomplish the same:

forumdisplay




showthread

Is your method better than this one?

Thanks
n

I would not call one better then the other. I would leave yours how it is now.

Originally Posted by Lee G

Is it worth implementing all three or just do one of the above?

And sorry to be a pain



The word header, should be navbar.

Nice easy to follow instructions

The H1 should only be once per page, so you will only need one.

Also, thanks, will update the first post.

Its done me a big favour the above. I had a play around with the relevant replacements, moved the h1 header from there. Put the first bit lot of code above the relevant replacements, so I get the same result.

A few more tweaks here and there and I now have h1 headers on the vbclassifieds pages. Which is a big result with adding a bit more seo to them.

I already rank between 1 and 3 depending on what google country you use for my forum title so I have not bothered implementing anything different on forum home.

On the blogs is there any way of changing the blogs home from displaying the word "blogs" to say something with a few more key words and then having it work the way it is on the blogs pages.

Thanks again for the excellent tutorial

If I add Method 01 to my forum, I have a huge title below the notices that shouldn't be there at all, anyway I can remove that ?

You can reduce the size of the H1 using CSS. It does not have to be the large default text (and probably should not be).

On method 1 why do a get a line break under the title?

Originally Posted by nfn

Hi Michael,

I'm using RR to accomplish the same:

forumdisplay




showthread

Is your method better than this one?

Thanks
n

ive got mine set like this with h2 tags, i have no h1 tags any where should i just do step one and leave this as it is

<!--VBSEO_RR_1--> will be replaced by:

<h2><strong>[forum_title]</strong></h2><p id="relevant_replacement">Below you will find a list of discussions in the <b>[forum_title]</b> forums at the [bb_title]. The [forum_title] forum [forum_description]</p>


<h2><strong>[thread_title]</strong></h2><p id="relevant_replacement">This is a discussion on <em>[thread_title]</em> within the <b>[forum_title]</b> forums, part of the [parent_forum_title] category; [first_post_20_words]...</p>

thanks

Originally Posted by Michael Biddle

Also, thanks, will update the first post.

I think you forgot. It still says header.

Originally Posted by Joe Ward

You can reduce the size of the H1 using CSS. It does not have to be the large default text (and probably should not be).

Not sure how to do that, I would like to change size and colour, please could you explain how.

It is way too big at the moment. Thames Valley Bird Forum

Thanks

You can actually find the steps in step 03 above.

You'll need to add a class="h1" to your H1 tag, update the CSS with your desired sizing, color options, etc.

Great Idea, Thanks!!