[odmassive]

Good People,

My friend has been waffling on about how he uses images to produce impressive looking title tags.

My response was "nice work horse face but what about your H1, H2, H3 tags?".

He then replied in a smug tone that made me want to vom " Ahhh, thats the clever part. You simply write the H1 tag text then position with css off the page"

I ended the coversation feeling well and truly bested.....but then I thought, would Google not penalise this as its a bit underhand surely?

Anyway without knowing myself I find myself back here.

Please advise that i'm indeed correct so I can go back and out-smug him.

Your help in this bitter rivalry is very much appreciated.

OD

[notbanksy]

As far as I'm aware OD, this is a legit design technique. After all, the text is not hidden from view from the user's point of view, it's just been replaced by a fancy image more often that not containing the same text.

If anyone here has any different experiences I'd be keen to hear them, but this is a technique I've seen implemented in some great sites.

In fact, I would say it's better than simply using the image instead, and adding an alt tag. By keeping text in the header tags, you improve the usability of the site. Using CSS to style it seems perfectly fair to me.

Sorry I've not been able to provide you with the requested smug...

[S3 Web Design]

Graphic designers often seem to follow this practice however I just feel an h1 tag should be used for what it was intended for ie to show visitors the main theme of your page. As your page has content I presume, then does it not make sense to indicate the theme hierarchy using the h tags as intended. What is the benefit of hiding it under an image. An image should have an alt and title tag.

Somebody please explain why you would want to put your main header hidden under a pic - just what is the benefit?

[odmassive]

Thanks the replies.

I presume the benfit is to have a more design led header. This way you can use ponsey fonts and not just boring system fonts.

You can then include the same text as you have in your fancy image in the H1 tag which can then be crawled. Am i right in saying that keyword inclusion in your H1 tag is important from an SEO perspective??

[Tom]

odmassive, on 02 December 2009 - 11:47 AM, said:

You can then include the same text as you have in your fancy image in the H1 tag which can then be crawled. Am i right in saying that keyword inclusion in your H1 tag is important from an SEO perspective??

Very important, Google puts a lot of weight on your H1 tag. I always use H1 for the logo (with image replacement), then h2 for the main page title, h3 sub titles etc etc.

[odmassive]

Tom, on 02 December 2009 - 11:56 AM, said:

Very important, Google puts a lot of weight on your H1 tag. I always use H1 for the logo (with image replacement), then h2 for the main page title, h3 sub titles etc etc.

When you say with image replacement what do you mean? Do you put the image over the h1 text? Cheers

[Tom]

odmassive, on 02 December 2009 - 12:34 PM, said:

When you say with image replacement what do you mean? Do you put the image over the h1 text? Cheers

Markup:

<h1><a href="#">Website name</a></h1>

Styles:

h1 a{
 display:block;
 width:100px;
 height:100px;
 background:url(/path/to/image.jpg) left top no-repeat;
 text-indent:-9999px;
}

So you're technically putting the image behind the text, but hiding the text by indenting it off the page. It could be done with just the H1, but the a allows it to be clickable.

[notbanksy]

odmassive, on 02 December 2009 - 12:34 PM, said:

When you say with image replacement what do you mean? Do you put the image over the h1 text? Cheers

not exactly. Use css like this

h1 {
text-indent:-9999px;
background-image:url(path_to_image.png);
background-repeat:no-repeat;
height:20px;
width:100px;
}

job done

[S3 Web Design]

I still don't get the point!! H1 is important for both SEO and visitors. I wouldn't put the website name in the h1 under the image, that is unlikely to help seo unless the website name has keywords etc in it, and i wouldn't put a duplicate h1 below the picture, use just one h1 and then follow the heirarchy h2, h3.. In the end I return to my original point the h1 should show the overall theme of the page.

[odmassive]

I agree with S3 that you wouldn't want to use your website name for every H1 on every page so would you be able to use a descriptive H1 with page keywards in such as "Cheap Bikes London".

Would you be able to have that as the H1 text but then indesnt it and have an better looking image for that same phrase with alt the same?

Would that likely be flagged as spammy by Google?

[Tom]

http://www.boagworld...scussionID=2624

Seems it's a strong point of discussion whether or not to use the h1 for a site title or content title.

I'll probably continue to use it for site title, until there's a good reason to change.

[I am Sam]

You're right, the H1 is certainly important, however this technique doesn't affect it in anyway. The crawler can see the h1 and it's contents in the source code and the visitor gets presented with your graphic. Seem's like a great compromise to me.

I'm pretty sure there is no major SEO backlash for using this technique. I've used it on multiple sites and will continue to do so.


Regarding the use of H1 for content title or site title, I guess it would be contextually sensitive. If you want people to find you by brand name slap your site title in h1, if you want them to find you by service/product etc use content title.

[notbanksy]

S3 Web Design, on 02 December 2009 - 01:26 PM, said:

I still don't get the point!! H1 is important for both SEO and visitors. I wouldn't put the website name in the h1 under the image, that is unlikely to help seo unless the website name has keywords etc in it, and i wouldn't put a duplicate h1 below the picture, use just one h1 and then follow the heirarchy h2, h3.. In the end I return to my original point the h1 should show the overall theme of the page.

The point is to make your website look nicer without compromising your relationship to search engines. The h1 text is still visible to any software reading the document, so its impact isn't lost. It's only when its viewed in a modern browser with stylesheets enabled that this effect will be apparent. A good example would be wanting to use a fancy font for your h1 tags.
This method gives you the best of both worlds

[S3 Web Design]

Right, I get the bit about using graphics so that you can make the headings look nicer with a different font but still don't get the rest!! Well each to their own.

[rallport]

odmassive, on 02 December 2009 - 10:10 AM, said:

Good People,

My friend has been waffling on about how he uses images to produce impressive looking title tags.

My response was "nice work horse face but what about your H1, H2, H3 tags?".

He then replied in a smug tone that made me want to vom " Ahhh, thats the clever part. You simply write the H1 tag text then position with css off the page"

I ended the coversation feeling well and truly bested.....but then I thought, would Google not penalise this as its a bit underhand surely?

Anyway without knowing myself I find myself back here.

Please advise that i'm indeed correct so I can go back and out-smug him.

Your help in this bitter rivalry is very much appreciated.

OD

It may be 'clever' but such techniques are still dicouraged by the google webmaster guidlines - a lot of people seem to use the technique though.

[rallport]

I am Sam, on 02 December 2009 - 02:44 PM, said:

You're right, the H1 is certainly important, however this technique doesn't affect it in anyway. The crawler can see the h1 and it's contents in the source code and the visitor gets presented with your graphic. Seem's like a great compromise to me.

I'm pretty sure there is no major SEO backlash for using this technique. I've used it on multiple sites and will continue to do so.


Regarding the use of H1 for content title or site title, I guess it would be contextually sensitive. If you want people to find you by brand name slap your site title in h1, if you want them to find you by service/product etc use content title.

See the google webmaster guidlines, hiding text is not recommended by google: http://www.google.co...py?answer=66353

[S3 Web Design]

I appreciate this post is quite old now but on reviewing a load of Matt Cutts videos the other day I saw that he actually answered this point and, putting the text -9999px off the page is indeed seen as hidden text and should not be done. See my Matt Cutts Video summaries.

[rallport]

Also there's a lot of discussion lately about the weight of the h1 tag being diluted, due to spammers. In an article I recently read (will get the link) h2 apparently carries just as much weight nowadays.

[charliesaidthat]

I have seen this use of h1 used quite a lot. It seems like a waste to me as page titles are very important.

I have seen it used in clever ways to hide keywords (seems very 'grey/black hat' to me) under menus and graphics and seems to do well. I cant help but feel that the best sites, are just optimised for the user and don't have hidden text, but sometimes the hidden text can really work wonders.

However, it seems to me when this is done with html and css it doesn't validate in W3C. Maybe it is just the sites I have seen and the way it has been employed.

These sites can be beaten without having to hide text.

[Gareth Daine]

Image replacement will validate and it is a legitimate technique I believe, as long as it's not used to disguise tons of keywords.

I think possibly though, that the <h1> tag should be used to describe the main theme of a page, although I have used image replacement in the past, I will be using the <h1> correctly in future projects.

[rallport]

S3 Web Design, on 29 March 2010 - 03:42 PM, said:

I appreciate this post is quite old now but on reviewing a load of Matt Cutts videos the other day I saw that he actually answered this point and, putting the text -9999px off the page is indeed seen as hidden text and should not be done. See my Matt Cutts Video summaries.

Yup, nice find.

Hidden text is also discouraged as per the recommendations in Google Webmaster Docs. In fact, hidden text has been bad ever since I can remember.

[completedesign]

CNN.com uses this technique. I think we are safe boys.

span {
display: block;
height: 0;
text-indent: -9999px;
width: 0;
}
common.css (line 74)

[radhika]

Google advices (on google webmaster help pages) to use h1, h2 etc tags on the sites so they would know what text is important on your web site.

[rallport]

completedesign, on 01 January 2011 - 11:18 PM, said:

CNN.com uses this technique. I think we are safe boys.

span {
display: block;
height: 0;
text-indent: -9999px;
width: 0;
}
common.css (line 74)

CNN.com is also a stupidly huge website, with, yep, 15.2 million backlinks according to yahoo siteexplorer AND a Pagerank of 10. CNN.com probably isn't the best example to use when talking about being penalised by Google, due to the sheer authority in Google. Google would never ever penalise such an authorative site for a tiny amount of hidden text.

[TylerCollins]

I would like to bump this thread to see if anyone else has any views on this?

I've been text-indent: -999px for many years and have I've never had any problems with being penalized in the search engines.

[rallport]

TylerCollins, on 02 December 2011 - 01:08 PM, said:

I would like to bump this thread to see if anyone else has any views on this?

I've been text-indent: -999px for many years and have I've never had any problems with being penalized in the search engines.

Look at it like this. Google is constantly making improves to it rankings methods in order to provide the highest quality search results to it's users. How does text shoved off a page help a user?

At the end of the day you've used text indent purely to get some textual spam inside a H1 for search engines alone to see - justify it however you want

I'd avoid personally.

[Wickham]

There are two or three issues here, and there's been a lot of debate, so here's my reasoning, which not all of you will agree with.

It's generally stated that the h1 should be for the page title, not the website title. Where I want the website title and a page title on a page I use a p tag for the website title and position it above the h1 page title.

When using HTML5 <section> tags the recommendation is to have a h1 tag (or a lower rank) in every <section> tag. If you don't have a h tag your Outline http://gsnedders.html5.org/outliner/ shows an undefined section, so you have to put one there for accessibility but you may not want it to show, so I then use a style with text-indent: -9999px; which screen readers will read (no problem with that) and the Outline is complete, but the page won't show the heading if I don't want it to.

When using an image where there would normally be a h1 tag, I can't see the problem with using text-indent: -9999px; so that blind people have something to replace the image and give them the heading to hear. I don't believe it affects Google as the text is still read by Google, whereas using display; none; or visibility: hidden is a no-no. The Google recommendation is not to hide text with CSS, but to use the Alt attribute, but the Alt won't help SEO when the image has a page heading so you have to use off-page CSS for a h1 tag or avoid using an image for a heading. I don't believe Google penalises using off-page CSS for text to any noticeable extent and this method is very common, I think Google realises this.

This post has been edited by Wickham: 05 December 2011 - 10:06 AM