seo - images and h1

I have a situation where I'd like to stick to using my logo instead of the actual text for my h1 tags. if I put in my keywords in the alt tag, instead of actually written, will I suffer in SEO. Is it better to have both text and an image? Thoughts?

<div id="hdr-top-logo">
<h1>
<a href="/">
<img src="logo.jpg" alt="keywords and title" />
</a>
</h1>
</div>

Yes for the SEO it is better to have text, since the crawler can't read the text inside images, but using alts will help somehow (not the same effect as the text) but will definitely help.

I would suggest you to only put a relevant title in the alt and use [meta][1] for keywords. Hope that helps. The alt will actually show up for people who can't or wouldn't like to see images. It also helps accessibility. Putting extraneous keywords in the alt could potentially hurt accessibility.


[1]:

[To see links please register here]

SEO is speculative at best.

Generally the accepted convention is to use where appropriate and you won't suffer. For example, your code I would write something like this:

<div id="hdr-top-logo">
<h1>
<a href="/" title="Blahblah.com logo">
<img src="logo.jpg" alt="Blahblah logo" />
</a>
</h1>
</div>

The benefits of actually having the text instead of the logo won't be much, if anything.

Note: alt + title should be **descriptive**, so don't just stuff a bunch of keywords in there, otherwise you will suffer SEO wise.

The best for SEO is to put text in the H1-tag and to make a unique H1 on every page. Try to limit your H1-tags to only 1 per page and let it describe the content of that page, including all the minor keywords of that specific page. Put this keywords as much in the beginning of the H1 as possible.

But when you really need to put an image in the H1, you best provide as much title- and alt-attributes as possible and let them contain your keywords.

So use this for example:

<h1>
<a href="http://your.url" title="some text with keywords">
<img src="logo.jpg" title="some text with keywords" alt="some keyword" />
</a>
</h1>

Hope this helps.

If you have access to the CSS, the ideal approach is to replace your h1 tag with an image via css.

So you have this html:

<h1 id="hdr-top-logo">
<a href="/">
</a>
</h1>

and this css:

#hdr-top-logo {
width: width of logo.png here;
height: height of logo.png here;
background: url(logo.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

When used appropriately, this is completely search-engine friendly.

NB there are quite a few different techniques for image replacement, this is the Scott Kellum method as seen here

[To see links please register here]

You might want to have a look and experiment to see which technique suits your situation best, there are different drawbacks to using different methods.