seo - images and h1

Question

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>

Cardenas

Answer 1

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.

Pneumonic

yes sorry. i should have stated that the alt would be not keywords only. basically some of my target keywords that are relevant to my site title / company name. all under 40 chars (i think i read somewhere that only the first X number are actually read by google). – Cardenas

Hi @nick, would using your answer, but also adding text after the logo in a span be okay? <h1><a href="/" title="Company Name"><img src="logo.png" alt="Company Name"></a><span>Page Title</span></h1> if their logo is an icon. In my case they want the logo vertically aligned with the center of each page title and this will do it out of the box without any adjustment where inline-block on img + h1 needs all sorts of adjustment all the way up through media queries, or would you go with a background image? – Colyer

Answer 2

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 http://css-tricks.com/examples/ImageReplacement/

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.

Sonometer

not a bad idea. is this still practical and not punished? – Paraformaldehyde

Answer 3

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.

Location

Answer 4

I would suggest you to only put a relevant title in the alt and use meta 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.

Ulcerate

Didn't Google come out and say they are ignoring meta keywords? – Horseback

its been clearly stated by google that meta tags aren't really used any longer. – Cardenas

OK, I think I get it now. Google does not use keywords but it uses description? Doesn't make much sense to me though. I still think the alt should not be used for all the extra keywords. Please look at Nick's answer for a fuller treatment. – Ulcerate

Yes, the description is still important - it's what google show in their search results, of course it's important! Keywords aren't, although some people believe they may still have a very small impact (on other search engines), so best still to put them in, even if they are very generic. – Pneumonic

Answer 5

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.

Laughable