Customizing your blog: Custom header images and good SEO

Custom-image headers bring branding dash and swagger, but eliminate a golden opportunity to woo the search bots. When you select "Instead of title and description" for your header image, Blogger cuts these elements from the high-value keyword space right at the page's top. The Google juice drains away like life blood ... But all is not lost.

Here's the patch. As always, consider tinkering on the test blog before the live one.

Go to Dashboard –> Layout –> Edit HTML.

Before we touch anything, backup your template.  Just in case...

Check the “Expand Widget Templates” checkbox.

Search for the line <div id='header-inner'> and add the following code immediately following that line:

<div class='titlewrapper' style='background: transparent'>
  <h1 class='title' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
  </h1> 
</div> 
<b:include name='description'/> 

The end result should look like this:

Now scroll up in your template to find the </b:skin> line.  Use your browser’s search function to help you find it – it’ll probably look something like:

...
body#layout #sidebar {   <-- This part will
padding: 0;              <-- vary based on
}                        <-- your template
]]></b:skin> </head>
...

Copy and paste the following code just before the </b:skin> line:

#header {
  position: relative;
  width: 648px;
  height: 150px;
}
#Header1_headerimg {
  position: absolute;
  width: 648px;
  height: 150px;
  top: 0;
  left: 0;
}

You will need to replace the width and height values with the actual width and height of your header image.

Click Preview to make sure things look correct and “Save Template” if they do.