Best and safest SEO way to hide h1 tags

Question

I want to use images that I created in PS for page titles. Because they will be images they will not be picked up by Google, etc. What is the best practice for hiding the <h1>? I was planning on setting the <h1> visibility to hidden. Is this ok to do?

update

I want to hide <h1> tag behind header image. I read how to do it if I just link an image (fine). My header is a little different. I have a background image taking up the whole header div. On top of that I have a flash file playing (mostly transparent) with some star burst effects. I want this to be SEO friendly.

Answer 1

Use it like this

<h1>
  <a href="http://website.com">
    <img src="image.jpg" alt="My Website" />
  </a>
</h1>

Check this link from a Google Webmaster: https://www.youtube.com/watch?v=fBLvn_WkDJ4

Answer 2

If you're trying to hide an <h1> tag behind an entire page header then you're probably abusing the <h1> tag and what you're doing would be considered black hat SEO as that would almost certainly not be considered a page title or heading and would ultimately get you in trouble with the search engines.

The <h1> is essentially to be used for the page heading which is like the page's or document's title. The big image at the top of a page really doesn't serve that purpose especially if it's the same from page-to-page.n If that is the case here then you definitely shouldn't be doing this. Also, if you need to hide something for the search engines' sake that usually is a good sign you probably shouldn't be doing something. There are exceptions but they are few and far between.