Search engine friendly H1's and other headlines

The use of the headline (H1, H2, H3, etc.) tag in your website’s HTML coding is a beneficial optimization technique. A headline tag, when used with keyword phrases, adds emphasis to those keywords in the eyes of a search engine. Every little bit of emphasis we can place on our target keyword phrases can help in the overall optimization puzzle.

Making a headline look like the rest of your site while keeping it search engine friendly can be tricky. Most HTML editors like Frontpage and Dreamweaver will, by most defaults, try to style your headlines with FONT tags. FONT tag control of a headline is not search engine friendly, and actually overrides the power of the headline in regards to optimization. But, with a little bit of CSS (cascading style sheets) knowledge, we can make our headlines appear in any font color, face or size that we want, but remain visible as a standard headline to the search engines.

Here is an example of a standard H1 tag used on the word “Hello”:

Hello

The HTML would look like this:

<h1>Hello</h1>

It’s big and ugly. But, this is how we want the search engines to see it. So now we need to style it for our visitors. Let’s say that your site has a blue theme, uses Verdana font, and uses small font sizes (8pt or smaller). This headline would not match your site at all. Let’s try to code it to look like this:

Hello

This is our same H1 tag, but with the color blue, the font face Verdana, bolded, and a font size of 8pt. Ok, there are three ways to do this with CSS formatting:

1. Include CSS styling to all headlines (H1, H2, etc.) directly in a stylesheet if you are already using one. Check your HEAD tags for the call to a file that ends in the “.css” extension.


2. Include the CSS styling to all headlines directly in the HEAD area without using a stylesheet.


3. Include the CSS style property directly to the headline tag itself.

Option 1:

In your pre-existing stylesheet, add this snip of code:

H1 {
font-weight: bold
color: #0000FF;
font-family: Verdana, sans-serif;
font-size: 8pt;
}

Change your properties for each variable as you desire. You can use this technique for H1’s, H2’s etc.

Option 2:

If you do not use an external stylesheet, but would rather add the style properties directly to your HEAD tags area, add this snip of code anywhere in the HEAD:

<STYLE type="text/css">

H1 {
font-weight: bold
color: #0000FF;
font-family: Verdana, sans-serif;
font-size: 8pt;
}
</STYLE>

Change your properties for each variable as you desire. You can use this technique for H1’s, H2’s etc.

Option 3:

Use the following inline code right in your headline tag:

<h1 style=”font-weight: bold; color: #0000FF; font-family: verdana, sans-serif; font-size: 8pt”>Hello</h1>

Change your properties for each variable as you desire. You can use this technique for H1’s, H2’s etc.

What you absolutely never want to see is a headline tag surrounded by FONT tags. Make sure that your headlines are free from any other external formatting in your site. You now have search engine friendly headline tags.