<h1> Header tags on text or Images with <alt> for SEO?

Draeger · 14 Mar 2009 at 08:11

Or both??

Hi,

I asked a question here on the forums a week or so ago regarding the importance of using <alt> text within images.

Now I'm working on a new project and the flow of the design looks much better if I use images containing text instead of just plain text within my header tags on each page.

My main reason for wanting to use images in place of the header tags is that in this instance they can contain a font that is in keeping with the theme and look of the site, it is the same font I used for the main logo but by the same token it is a font that would be unlikely to be found on most peoples PC's by default.

So I'm wondering a couple of things regarding the importance of <h1>, <h2>, <h3> tags etc.

1. How important are they as far as SEO goes these days?.

Looking through W3C and a few other sites it would seem that a fair bit of importance is still placed upon them as far as the structure and hierarchical content of a page goes. What are your thoughts on this, folks?.

2. Is it possible to use something like the following HTML to get the best of both worlds or would the likes of Google consider this to be bending the rules? :-

Code:

<h1><img src="level-1-headline.png" alt="This is a level 1 headline"></h1>

I would really like to stick with the images as titles for each section of my pages as they look so much better, however I don't want to limit anything as far as serps go and a little voice inside my head is saying "Play it safe - go with plain text".

Any ideas guys?. :cool:

simisker · 14 Mar 2009 at 09:55

You're on the right track with your thinking in point 2: you'd use an Image Replacement system and get the best of both worlds.

Here's a starting point.

And here's another.

Draeger · 14 Mar 2009 at 19:41

Thanks for those links m8, appreciate them.

Makes for interesting reading. I found a thread on the subject on the webmasterworld forums running to 4 pages with lots of interesting discussion.

For now, I have decided to play it safe and go with plain text. Been working on the project most of today. This morning I was tempted to throw caution to the wind and go for the images wrapped in <h1> tags but after reading some of that it looks like I will need to delve into my CSS and make some alterations there to get it to work properly.

Thanks again for the linkage!!. :cool:

ArmyofHarmony · 14 Mar 2009 at 23:28

Many people use text replacement to get round this... e.g. position text far off the screen using CSS but have an image appear in its place (this is actually a proper technique that isn't penalised by search engines although i won't recommend it).

What I do is use SIFR to replace text with a custom font - this can be read by search engines and uses flash and javascript to achieve that result. Example can be found here

www.considermac.com - the headers of this site has custom text using SiFR technique...

MikeTimbers · 14 Mar 2009 at 23:50

Just make sure you remember to allow for the disabled who need screenreaders etc. and also for different resolutions. Personally, I can't abide using images for text and flash is the worst thing to happen to web design EVER. (perfectly OK for embedding movies etc. and images but text is text and should be built as text.

Mattus · 15 Mar 2009 at 01:39

SIFR is a waste of time on that Mac site - doesn't even look good. Search for the Strada restaurant - that's a good example of SIFR. Generally, though, I don't like using Flash unnecessarily. I set the image as the background of the <h1> element, put the text inside the element and give it a negative indent of -5000px. CSS-capable agents will display the image, whilst search engines and people with no CSS will see the text. Only problem is if someone has images turned off.

simisker · 15 Mar 2009 at 02:13

It's an ironic state of affairs that for designers who care about typography of display fonts [i.e. those used for headings], embedding them within images is still the only way to get all the subtle details required [kerning, correct ligatures etc].

Oh well.

Incidentally, there's a nice implementation of a Flash-based IR over at http://www.campaignmonitor.com/blog/ . Expandable, selectable and anti-aliased; the only downsides are that (a) it requires Flash of course, and (b) when de-styled, headers are displayed twice.

philjohn · 15 Mar 2009 at 10:20

MikeTimbers said:
Just make sure you remember to allow for the disabled who need screenreaders etc. and also for different resolutions. Personally, I can't abide using images for text and flash is the worst thing to happen to web design EVER. (perfectly OK for embedding movies etc. and images but text is text and should be built as text.

I think you misunderstand how sIFR works and what it's meant to be used for.

With sIFR you build everything as semantic xhtml, so text is text (as you say). An h1 tag that you want to use the technique on is a normal h1 tag with text inside, but after the page has loaded a small piece of JS launches and manipulates the DOM replacing that text with the flash required. This means it's accessible (screen readers see the original dom), it degrades gracefully (the normal H1 content is displayed if no JS or no flash installed) but allows designers free reign to realise their vision without being constrained to using the same old fonts.