H1 tag off page using CSS

[sftriman]

I was just looking at the design of a big-time hiking and camping store online. I noticed their H1 tag was configured using CSS to have margin-left:-5000px. So it's floated off the page, out of view, to the left, but still appears as a pure H1 tag. What's the thinking on this in terms of SEO?

I've configured my H1 tag to have a small font and appear near the top of my page (early content) on my sites, and while that works fine for SEO, it's usually a little clunky in terms of what purpose it serves on the page. The way this hiking site does it, the H1 is right after the body tag, which is "optimal" in some sense I think, but of course, it's hidden with that -5000px left margin. Good or bad?

[lucy24]

Clever until the moment the search engines figure it out. Then Not Smart.

You don't need to have text in your header at all. If your pages have a banner headline, put that between the <h1> tags, with an <alt> that gives the main text of the banner.

[sftriman]

I think you meant a banner image with alt text, not a "banner headline" which would in fact be text. Yes, I could do that for sure, that's a good idea - you're saying, the alt text is the text in the H1. I'm more likely to cut out a little swatch of real estate near my nav and wedge the H1 in there so that it can be pure text.

Back to this site - it's a BIG well known famous site, so it's hard to fathom why they are floating the H1 so far left, which sure sounds black hat-ish. Maybe it's not so bad as we may think? FWIW, it does appear as <H1>Hiking and Camping Supplies</H1> and the float is done in their CSS file. That may help a little with the camouflage?

[lucy24]

When you look at the site with your human eyeballs, is the <h1> truly invisible? Or is there some kind of nesting so it ends up just being a weird way of centering the whole thing?

Otherwise, yeah, it's hard not to see it as a textbook example of showing different content to humans than to search engines. "For a given definition of 'different'" won't quite cut it.

And yes, ahem, I did mean a banner image. A recent benefit is that people on crude mobile devices-- the ones that don't show images-- will then see the h1 approximately as intended. And so will you, if :: cough, cough :: you misplace an /images directory or a stylesheet. (Happened to me only yesterday. "Uhm, I thought I'd used some other fancy font for that header." Oops.)

[phranque]

sftriman, you might enjoy reading this thread - accessibility and <h1> header images:
http://www.webmasterworld.com/accessibility_usability/3844966.htm [webmasterworld.com]