CODEWITHSUNDEEP
htmlseohtml-heading
bobo
bobo

Reputation: 8727

Should I use multiple h1 or multiple h2 without h1?

In a web page that shows a list of tutors, the current HTML codes:

<div id="tutors">

 <h1>Tutors</h1>
 <div class="tutor">
  <h2>John</h2>
  <p>...</p>
 </div>

 <div class="tutor">
  <h2>Mary</h2>
  <p>...</p>
 </div>

 <div class="tutor">
  <h2>David</h2>
  <p>...</p>
 </div>

</div>

Now, for some reasons, the word Tutors which is currently wrapped by h1 needs to be removed in the page. I can think of 3 choices:

  1. Use css to hide it.
  2. Simply remove it, and the page will have h2 without h1.
  3. Remove it, and change all h2 to h1.

Which one is more appropriate?

Upvotes: 8

Views: 7417

Answers (6)

Aaron
Aaron

Reputation: 5227

Perhaps you should consider formatting these items as a definition list, e.g:

<div id="tutors">
    <h1>Tutors</h1>
    <div class="tutor">
        <h2>John</h2>
        <p>...</p>
    </div>
    <div class="tutor">
        <h2>Mary</h2>
        <p>...</p>
    </div>
    <div class="tutor">
        <h2>David</h2>
        <p>...</p>
    </div>
</div>

becomes:

<dl title="Tutors">
    <dt>John</dt>
        <dd>...Description here...</dd>
    <dt>Mary</dt>
        <dd>...Description here...</dd>
    <dt>David</dt>
        <dd>...Description here...</dd>
</dl>

And then apply CSS classes and styles to the elements to prettify it for sighted users. Just a thought.

Upvotes: 2

Ayman Safadi
Ayman Safadi

Reputation: 11552

#3: Remove it, and change all h2 to h1.

  1. For SEO, hiding text is frowned upon because it can be considered black-hat SEO. Unless you're going to replace the header with an image that has the text, "Tutors".
  2. You cannot have <h2> unless there's an <h1> beforehand.

Upvotes: 7

Ansel Santosa
Ansel Santosa

Reputation: 8444

None of these options are good SEO.

  1. This is risky and a bad practice. Search engines have become very good at figuring out when text is hidden and if they find that a heavily weighted tag like <h1> is hidden it will hurt your rank.
  2. You should never skip a step in the hierarchy of headers (don't have <h3>'s without <h2>'s etc.). In addition they should always appear in decreasing order of importance.
  3. Every page should have exactly one <h1> and it should be the first heading tag. They are on the order of <title> in terms of SEO weight.

Why does this headline need to be hidden in the first place? It seems like a good description of the content of the page.

Upvotes: 2

King Friday
King Friday

Reputation: 26076

Doesn't matter.

If you are using jQuery to show and hide things it has no bearing on SEO. Search engines see what you see when you view source in all practical senses. You aren't doing anything sneaky anyway.

Reference my post here on stack overflow If I do everything on my page with Ajax, how can I do Search Engine Optimization?

because what you are doing is AFTER the search engines have looked at it for all practical purposes.

Upvotes: 2

Andy
Andy

Reputation: 10830

This is a preference. You should always separate presentation and structure, so I would say just comment it out, and put that it use to be there. If you hide it, this really isn't presentation because it is never seen. So 3 would be the most appropriate.

Upvotes: 0

Josh Diehl
Josh Diehl

Reputation: 3079

Depending on the use case for the page, any three of those sound like valid options. That said, here are some things I thought about when considering this question:

  • SEO: it appears there is some opinion out there that the choice of tag content may affect search engine ranking.
  • Style-less rendering: if for some reason the page might be rendered without the accompanying css sheets, be aware of the effect of default rendering on the page and how you might want it to perform
  • Be aware that there are new common tags like 'section' in HTML 5, which might fit your page and be a bit clearer semantically than H tags

Upvotes: 2

Related Questions