[TUTORIAL] Add H1 Tags to Your Forum and Threads

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:

$navbarBelow it add:

<br />
<center>
<h1 class="myh1">$foruminfo[title_clean]</h1>
<h2 class="myh2">$foruminfo[description]</h2>
</center>
<br />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:
$navbarBelow it add:

<br />
<center>
<h1 class="myh1">$thread[title]</h1>
<h2 class="myh2">$foruminfo[title_clean]</h2>
</center>
<br />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:

/* ***** 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!




*credit Joeychgo @ vBulletin-FAQ*

thnxxxxxx

This was easy to follow but the large text on two lines takes up a lot of space under the navbar.

Why not just modify the style class on the Forum Description that vBulletin uses in their Forum Display options?

For me having it all on one line makes more sense and if it was tagged as H1 it would accomplish the same thing.

You can change the size of the text in the code for the Additional CSS Definitions, as per the instructions above ;)