Graphical headers and SEO

[JWL]

Hello,

I'd like my website to have graphical header text but I'm concerned
about the impact this will have on search engine success, as none of the
pages will have <h1> headers. Is it sensible to do something like this:

<h1 class="hidden">blah blah</h1>
<img src="blah.gif" alt="blah blah" />

'hidden' being:

..hidden {
position: absolute; /* taken from sitepoint.com */
left: -9000px;
top: 0;
}

What would you do if you absolutely had to have graphical headers?

Thanks for your time

 

[Els]

Hello,
Hi,

I'd like my website to have graphical header text but I'm concerned
about the impact this will have on search engine success, as none of the
pages will have <h1> headers. Is it sensible to do something like this:

<h1 class="hidden">blah blah</h1>
<img src="blah.gif" alt="blah blah" />

'hidden' being:

.hidden {
position: absolute; /* taken from sitepoint.com */
left: -9000px;
top: 0;
}

It is an option, but some day Google will be able to see that the H1
is hidden from actual visitors, and penalize the page for it. (or at
least that is what I expect for the future)

What would you do if you absolutely had to have graphical headers?

I use the title in alt text to the image:
<h1><img src="blah.gif" alt="blah blah"></h1>

I'm not entirely sure if Google reads that alt text as an H1 then, but
any image-less visitors will. I combine that with Google's own rule
"make pages for your visitors, not for search engines", and hope for
the best

(no idea about other search engines though)

 

[Andy Dingley]

What would you do if you absolutely had to have graphical headers?

Alt text on the <img>

h1 img { font-size: something-reasonable; color: likewise; } to make
alt text in this case readable, if it's ever used. Default size on alt
text is often minuscule.


SEO optimisation is no longer my problem, if the client has already
decided that "pretty" over-rules "content"

 

[carolyn]

Hello,

I'd like my website to have graphical header text but I'm concerned
about the impact this will have on search engine success, as none of the
pages will have <h1> headers. Is it sensible to do something like this:

<h1 class="hidden">blah blah</h1>
<img src="blah.gif" alt="blah blah" />

'hidden' being:

.hidden {
position: absolute; /* taken from sitepoint.com */
left: -9000px;
top: 0;
}

What would you do if you absolutely had to have graphical headers?

Thanks for your time

If I absolutely had to have graphical headers, I still would not. Graphical
headers cannot be crawled by search engines. They can not be translated by
translation services. They are not loaded by either text only browsers, or
browsers set to not load graphics. They do not allow the font size to
adjust so it looks good on both my 1280x1024 maximized browser window and
my 320x160 hand held.

I would and do create graphic backgrounds for a header, and then overlay
text on top of it. Typically locating the graphic to one end and aligning
the text to the other end, to try to minimize the amount of text being
obscured by the underlying graphic.

I hope that helps,

Carolyn

 

[carolyn]

It is an option, but some day Google will be able to see that the H1
is hidden from actual visitors, and penalize the page for it. (or at
least that is what I expect for the future)

I have heard that they already do that. I don't know if it is fiction or
fact however. I do know that if they don't do it already, they will be
doing it soon.

 

[Spartanicus]

What would you do if you absolutely had to have graphical headers?

http://homepage.ntlworld.ie/spartanicus/SE_friendly_graphic_header.htm

 

[Gregory Nickoloff]

What you might try is using an external style sheet to control the display
of your <h1>s in the header.

As far as I know, but I haven't really tested extensively, Google and the
like do not read external style sheets when doing their thing. (You'd have
to check out the server logs closely over a period of time to be sure)

If you set the header image as the background for a header <div>, and set
the display attributes of the <h1>s, etc to "display: hidden;" or perhaps,
"visibility: none;" You should be able to get by.

There's more to it than this, but for most situations, I believe it will
work without blowing your search indexing...I would like to hear more from
anyone with some experience in this method.