HTML for effective website logos

HTML for effective website logos

Ideally, the logo in the header section of the website should be in fact textual, in the form of a H1 heading. But that alone would look like something from back in the ’90s where the Internet was text.

Luckily, with a bit of CSS magic, we can have both the SEO benefit of a textual H1 and the awesomeness of the perfect eye-candy logo you’ve been designing for hours. The following example will accomplish just that and also make the logo clickable, offering a backlink to the frontpage of the website.


<h1><a href=”SITE_ROOT” target=”_self” title=”SITE_NAME”>SITE_NAME</a></h1>


body > header h1 a {
display: block;
background: url(logo.png) no-repeat;
text-indent: -9999px;

That’s it, really, plus this method is not considered a blackhat technique and does contribute to over-optimization.