Image in h1

Hi guys,

Does it matter for SEo if i use image as <h1>? Is it good or bad?

Thank you for your help

Here's the best way to go about it. Using CSS of course. And for reference, you should always have just one h1 tag per page.

Code: Select all

<h1>Your Page Title</h1>

Code: Select all

h1 {
    width: 200px;
    height: 60px;
    margin: 0;
    text-indent: -5000px;
    background: #fff url("logo.jpg") no-repeat 0 0;
    display: block;
}

Thank you Ryan! i dont know what i would do without you! Should i also close the page with <h6>?

No! In case you don't know, you should never skip a header number. Your page be organized in a way something like this:

Code: Select all

<h1>
    <h2>
        <p>
        <p>
    <h2>
        <p>
        <h3>
            <p>
            <p>
    <h2>
        <h3>
            <h4>
                <p>
                <p>
    <h2>
        <p>

You should never go from h1 directly to h3, however. And you may only use an h1 and an h2 in a page. I rarely ever get all the way down to h6.

Just a quick thought here. If you were going to use an image in the h1 spot, I would try to name the image with a keyword or keyword phrase.

Ichad - I wouldn't use any image in h1 unless it was a background image from the css.
I've been taking the policy of making my heading text 1% size, which works okay, if you can have a black dot somewhere in the picture...

Ryanfait - how strictly do you stick to the heading sequences rule, and how in sequence do you feel they have to be... For instance, recently on a site I wanted:

Code: Select all

H1
  H2
    H3
  H2
    H3
      H4
      H4
  H2
    H4

or something to that effect - is that okay? I know it's not a strict rule, but I like to stick to standards, and it bugs me when the standard's are vague!

"Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped."
Thanks very much the w3c! hehe

So I'd like you'r input on what's right!


Snow

First off, snow, I have text-indent: -5000px; to hide the text. While a black dot doesn't hurt anything in most cases, there's nothing left over unless you have a 5000 pixel long string of text with the negative indent method

As for the order, I think you're thinking more in terms of design, not structure. I firmly believe in the three layers of a website:

XHTML - The Structural Layer
CSS - The Presentation Layer
JavaScript - The Behavioral Layer

They should all be kept completely separate. If you've got a site with no design at all and you were organizing text, would you still skip that h3? Some people will say it's so trivial it doesn't matter, but I don't mind doing this to my CSS and XHTML respectively to make them look the same while keeping the structure intact:

Code: Select all

h3, .h4 {
    color: #c00;
}

Code: Select all

<h2>Content</h2>
<h3 class="h4"></h3>

Whats so bad about missing out a header tag?

its not good for structure and for SEo

Snow, I wouldn't use an image in h1 either... but that's what the original post was about.... or did I miss something?

As chubbs said, structure and SEO. Skipping a header tag is like sticking the weather section of a newspaper inside the classifieds.

Read on...

http://www.w3.org/QA/Tips/Use_h1_for_Title

If you follow the html phrase element link http://www.w3.org/TR/REC-html40/struct/text.html

You won't find any reference to using images inside H1's.

Headers are not SEO gold despite their praise. It's one more tool in the arsenal of SEO, but they are more about proper document structure. The standards for their use are made pretty clear by W3. Even so, these tags are still highly debated on just about every design forum. You'll never find the true answer anywhere except for the published standards.