Tag: seo

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.

Advertisements