Add H1 Tags to Your Forum and Threads

Shahrukh Khan

New Member
H1, H2 and H3 tags can help search engines determine the content of a webpage.

So this modification is important for your site. It also is good for your members, as it gives them a description of the thread that they are perusing.

As always, you should back up your database before making any changes.


Go to your Admin CP --> Styles & templates --> style manager --> in the style on the right, in the dropdown menu that says All style options, click on Edit Templates. Scroll to FORUMDISPLAY templates, click, then find the template that says FORUM DISPLAY.

Now, FIND:
Code:
[b][b]$navbar[/b][/b]

Below it add:
Code:
[color=red]<br />[/color]
[color=red]<center>[/color]
[color=red]<h1 class="myh1">$foruminfo[title_clean]</h1>[/color]
[color=red]<h2 class="myh2">$foruminfo[description]</h2>[/color]
[color=red]</center>[/color]
[color=red]<br />[/color]

Save

This adds the Forum Name and the Forum Description just below the navbar on your forums.


Now scroll down to your Show Thread Templates. Double click, then find SHOWTHREAD.
In your SHOWTHREAD template find:
Code:
[b][b]$navbar[/b][/b]

Below it add:

Code:
[color=red]<br />[/color]
[color=red]<center>[/color]
[color=red]<h1 class="myh1">$thread[title]</h1>[/color]
[color=red]<h2 class="myh2">$foruminfo[title_clean]</h2>[/color]
[color=red]</center>[/color]
[color=red]<br />[/color]

This places the Thread Title and the Forum Name just below the navbar on your threads.


Now, you can control the size and appearance of the titles and descriptions via your CSS. Here's how:

Go back to the Style Manager. In the same style's drop down menu, click on Main CSS. Scroll down to the botton to Additional CSS Definitions. In the bottom box, add this:

Code:
/* ***** H1 Tags ***** */
h1.myh1 {font-family: Arial; font-size: 20px; 
color: #000000; font-weight: bold;}
 
h2.myh2 {font-family: Arial; font-size: 16px; 
color: #000000; font-weight: bold;}

As you can see, you can change the font, font size, color, and whether its bold or not by simply changing the variables (if you don't want the title and description to be bold, simply replace the word bold in the code above with the word normal).


TIP: If you already have forum descriptions enabled on your forum (they appear in the same area as this, but in a long horizontal, you'll need to disable it by going to vBulletin Options --> Forum Display Options --> Enable Forum Description. Set this to OFF


Enjoy!
 
Top