How To: H1 as an Image While Maintaining SEO

Estimated reading time: 1 minute, 35 seconds

If you check out the header of this site you’ll notice that it’s an image but if you look at the code there’s no image there, just some text for Search Engine Optimization (SEO) purposes. You’re probably wondering how and why, well here’s the math:

As you know, having the H1 on your site filled in does wonders for your SEO, and aside from your Title tag and meta tags, it’s the first thing on your site that’s read by browsers. On this site I have “my name is robb clarke and i build websites” as the information in my H1 tag.  Obviously that text isn’t what’s displayed on the site, I have an image, all nicely styled, in its place. Now, obviously text on images are readable by search engines, so how do display an image while maintaining your SEO?

Here’s how.

HTML

<h1><span>my name is robb clarke and i build websites</span></h1>

CSS

h1 {
font-size: 18px;
font-weight: bold;
width: 900px;
height: 198px;
background: url(images/header.jpg) top left no-repeat;
display: block;
margin: 10px 0 10px 0; }
h1 span { display: none; }

So what this does is takes the text inside of the SPAN tag and applies the “display: none;” to it, thus hiding it from your sight but not the search engine’s. Then to display the image in its place we make the image the background of the H1 tag and set the height and width accordingly.

You can also do it another way without the SPAN tag by just using text-indent.

HTML

<h1>my name is robb clarke and i build websites</h1>

CSS

h1 {
font-size: 18px;
font-weight: bold;
width: 900px;
height: 198px;
background: url(images/header.jpg) top left no-repeat;
display: block;
margin: 10px 0 10px 0;
text-indent: -9999px; }

This will send any text 9999px to the left and out of sight.

Questions? Comments? Concerns?