by DavidO
2 replies
  • SEO
  • |
For design reasons I've replaced my h1 text header with a graphic. It says the same thing but now I have no h1 tag!

Is it legit to use invisible text (display: none) in this case? I understand that some uses for invisible text are allowed. In fact, I've read specifically that invisible h2's are allowed but I can't find any reference to h1.

I've put my usual h1 text in the alt tag but this is surely not as valuable as an h1. Can I place the entire image and alt text in h1 tags?

Thanks for any suggestions. I need to be really careful with this.
#invisible
  • Profile picture of the author dburk
    Hi DavidO,

    I usually use:
    Code:
     
    h1 { text-indent: -9999px; }
    Seems to work all right.

    You can also leave the text in place, wrap your image in a div and use negative magins and z-index to position it over the text.
    {{ DiscussionBoard.errors[353809].message }}
  • Profile picture of the author fwblack
    If you're using an image tag to display your image, put your text in the alt parameter of the image tag... that will help. If you're using a background image in a cell or div you can't do that and I'd place the text in a paragraph or hx tag somewhere else on the page.

    I would not make it invisible or place it way off the page. Putting it in a layer div under the image would also work, but probably no better than making use of the alt parameter in the image tag.

    I use an image header on several sites with the alt parameter containing the text in the image header, on some sites I also have a h2 tag with the title just below the image. Works well either way.

    Fred
    {{ DiscussionBoard.errors[361042].message }}

Trending Topics