SEO friendly Wordpress clickable header

Wordpress, by default, has a piece of code for header. The image you see on many themes is only a background. Code has its limitations, since you may not escape the regular fonts (remember fonts are displayed according to what people have installed on their computers).

Therefore, you make a nice header from a picture, adding the font you ever wished to have your blog name shining on the top of your blog. Now comes the first problem, how to get rid of the title that insists on keep showing?

You google and find the answer, "display: none;" right bellow the CSS for the header. Problem solved and you never think about it again.

However, and there's always a however, Google and search engines in general are image blind. Even if you use all title and alt tags, your site will never be searched the same way as a regular one.

Why does this happen? Simply because alt and title tags have not the same weight as what comes between <h1> and </h1>.

Not to mention screen readers and browsers that not render images (yes, they exist and people use them). A few people use them? Yes, but the god of search engines has a rule for accessibility, meaning, in the long run, that if ONE person wants to use a text browser, your site should display properly on it. And, trust me, screen readers don't see what’s behind a "display: none;".

The best way to deal with this is showing both your always dreamt image header AND your old semantic markup on the title.

The first thing to do is finding the code on your style sheet that is responsible for your title display. It looks something like this:

#header h1 a{
text-decoration: none;
color: #006600;
}

Replace it with the following code:

#header h1 a {
display: block;
width: X% or Xpx;
height: Xpx;
outline: none;
text-indent: -9000px;
text-decoration: none;
background: url(YOUR IMAGE ADRESS) no-repeat left top;
border-bottom: Xpx solid #006000;
}

Width may be % or px, depending on your theme, height is the height of your image;

border-bottom is up to you, change it to none if you wish;

The trick here is the text-indent: -9000px, it simply tells browsers to send you title way off the page, 9000 px away. But, and now is a good but, screen readers and search engines will see your site the same way they would if you were just showing the h1 tag.