Tag: Website logos

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.

HTML

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

CSS

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.