I have a confession to make. For years now, I’ve been marking up logos by creating an H1 tag with a link to the company name. I would use CSS to hide the link text, and display the logo as a background image like this:

.header h1 {
    background-image: url("/images/logo.jpg");
    background-repeat: no-repeat;
    position: relative;
    text-indent: -30000px;
    top: 56px;
    display: block;
}

The purpose of this is technique is that the site visitors would see the beautiful logo, while the search engines would read a standard H1 tag with the site title text.

This is not considered a best practice because search engines do not look kindly on hiding text in order to game the system. As is almost always the case, it’s best to strive for transparency and let your content speak for itself. The logo is an important part of any company’s business web site and the search engines appreciate this.

The solution is to use an image with alt text which displays the site title:

<header role="banner">
<a href="#">
   <img src="logo.gif" alt="Waffle Inc." />  
</a> 
</header>

Here is a quick Youtube video from GoogleWebmasterHelp that explains this.

I’m now in the process of going back through many of my sites and updating logos to use this more search-friendly method.