Graphic Headers Without Losing SEO

One road block I've come across recently was the request to change all of my Drupal headers into stylized font headers. This didn't surprise me as far as the asthetics of the pages, but it did concern me about the "Search Engine-Friendly" aspect of the site. Fortunatly I came across this solution from Mustardseed Media.

CREATE GRAPHIC HEADERS WITH CSS

At first this doesn't seem like a solution at all! What difference does it make if I drop the graphic in there in the HTML, or in the CSS? Well, it turns out it makes a big difference. Here's the gameplan:

• Hide the plain-jane header text so it doesn't make the page ugly.
• Use the graphic as a <div> background image.
• Allow the search engines to crawl the <h2> tags and give them the proper authority they deserve!

Here's how we do it:

1. Create your header graphic - noting the width and height dimensions - and upload it to the server
2. Remove the Title from the node type that you are wanting to replace. This could be by removing the print $title function in the node.tpl.php, or create a tpl.php file specifically for the content type that you want to use this function with. Another way to do this is to create a style for that title where you use the display:none; in the CSS.
3. Enter the header in the body section of the content and wrap it in <h2> **** </h2> tags. Be sure to set the input format for Full HTML, or make sure the <h2> tag is accepted in the filtered HTML (Administer>Site Configuration>Input Formats).
4. KEY STEP: set a class ID for the <h2> tag, like <h2 class="graphic-header">
5. In your style.css file, create a line for the h2.graphic-header and follow these style rules

• Set the Width to match the width of the header graphic - if the graphic is 200px wide set it as { width:200px;}
• Set the Padding at the top to match the height of the graphic - if the graphic is 50px high set it as {padding-top:50px;}
• Set the Height to 0 {height:0px;} - This will essentially push the text down below the border of the graphic.
• Set the overflow to hidden {overflow:hidden;} - This will hide anything that exceeds the border (which is now the text and we've hidden it efficiently)
• Call the graphic as the background image {background-image: url(/images/sweetgraphic.jpg);} - This fills the empty space that we've just created with the sweet graphic that we want to show up instead.
• Set the background to no repeat {background-repeat: no-repeat;} - This saves our butts if we're off on the dimensions, they won't see the top of your graphic in the bottom margin.

Now that I've explained it all, the final stylesheet should look something like this:

h2.graphic-header
{
width: 200px;
padding-top: 50px;
height: 0px;
overflow: hidden;
background-image: url(/images/sweetgraphic.jpg);
background-repeat: no-repeat;
}

And when the spiders crawl your page, they will see this:

<h2 class="graphic-header">This is a sweet header because it looks cool and it's friendly</h2>

Check it out by inspecting the graphic above that says "Create Graphic Headers with CSS" in Firebug if you don't believe me!