Headers and Images

[wyrd33]

I've been doing a lot of CSS coding, and I've started to think about just how SEO friendly my code really is. I've come up with a few questions that I'd like to ask:

Question 1: Are images just as affective as text?

A lot of web sites use a logo image wrapped in an <h1> tag. Some use text and overlay the logo with a nested <span> tag.

How SEO friendly are images that properly use Title and Alt attributes? Are they just as affective as text? Or is text that much better to forgive the extra non-semantic <span> tag?

Question 2: How many <h1> tags can I use?

I've always been under the impression that you should use one single <h1> tag, period. In fact, most web sites I see use <h1> for the logo and leave it at that. However it's come to my attention that alistapart.com uses two when you view an article page (<h1> wrapped around the logo, and <h1> for the article header).

What is the actual appropriate use for <h1>? Is it acceptable to have two? Thoughts on using <h1> for the logo and nothing else?

Question 3: How should headers be nested?

I've seen header tags nested in two ways:

1) By page section. e.g. Logo uses <h1>, content uses <h2>, sidebar uses <h3>

Example:

<h1>logo</h1>
<div id="content">
   <h2>content title</h2>
   ...
   <h2>content title</h2>
   ...
</div>
<div id="sidebar">
   <h3>sidebar title</h3>
   ...
   <h3>sidebar title</h3>
   ...
</div>

2) By content section. e.g. Content and sidebar both use <h2>, any subsections use <h3>, regardless if its content or sidebar header.

Example:

<h1>logo</h1>
<div id="content">
   <h2>content title</h2>
   ...
      <h3>subsection title</h3>
      ...
   <h2>content title</h2>
   ...
      <h3>subsection title</h3>
      ...
</div>
<div id="sidebar">
   <h2>sidebar title</h2>
   ...
   <h2>sidebar title</h2>
   ...
</div>

Does it matter in terms of SEO? Is it personal preference?

Thanks for your time.

[Sojan80]

Question 2: How many <h1> tags can I use?

I've always been under the impression that you should use one single <h1> tag, period. In fact, most web sites I see use <h1> for the logo and leave it at that. However it's come to my attention that alistapart.com uses two when you view an article page (<h1> wrapped around the logo, and <h1> for the article header).

What is the actual appropriate use for <h1>? Is it acceptable to have two? Thoughts on using <h1> for the logo and nothing else?

A long time back Kevin Yank posted the following in an issue of the tech times I believe which should answer you're question nicely:

The Hard Facts about Heading Structure

[wyrd33]

Nice find. Is there a link to this article?

[Shyflower]

Hx tags are like outline headings. The H1 is the title tag of your topic (don't confuse this with the title element in your head information). H2 is a sub-topic, H3 begins a more detailed explanation of h2.

If you use Hx tags correctly, it can make writing a page a whole lot easier. Start out with your H-outline and then fill in your information.

On the web, Search Engines put pretty heavy weight on the H1 and then decrease the weight given to the other subheadings.

[Dan Schulz]

The link is in the post. Anyway, to answer the questions...

Question 1: Are images just as affective as text?

For SEO purposes? Not really. But you should never do something soley for SEO purposes. Always put your users first. If you do it properly, you'll also satisfy the search engines as well (afterall, what good does having a high ranking site that brings in lots of traffic do if your site is so unusable it makes the people that do come leave in droves?).

A lot of web sites use a logo image wrapped in an <h1> tag. Some use text and overlay the logo with a nested <span> tag.

While image substitution techniques (and yes it is a substitution, not a replacement) can work, a lot of those Web sites use them improperly (and yes, I even have to include SitePoint in my list of offenders here). Afterall, a logo is an image - it should therefore be marked up as such (thereby saving the H1 element for the page title, which will give you a far better ROI on your SEO anyway, especially if you use the heading text properly).

How SEO friendly are images that properly use Title and Alt attributes? Are they just as affective as text? Or is text that much better to forgive the extra non-semantic <span> tag?

The text will be far more effective, but again, you should put the users first. Think of the alt and title attribute as supporting characters, not the main protagonists/antagonists (if a Hollywood reference helps you understand).

Question 2: How many <h1> tags can I use?

Not only did I answer your question above, but you also answered it yourself (see below).

I've always been under the impression that you should use one single <h1> tag, period. In fact, most web sites I see use <h1> for the logo and leave it at that. However it's come to my attention that alistapart.com uses two when you view an article page (<h1> wrapped around the logo, and <h1> for the article header).

One per page - and use it as the page title, not the site title/logo.

What is the actual appropriate use for <h1>? Is it acceptable to have two? Thoughts on using <h1> for the logo and nothing else?

Beating a dead horse are we? Ok, I'll continue to flog Mr. Ed for you. The H1 heading element is used to denote the topmost heading of the page. In layman's terms, this would be the page title, and nothing more.

Question 3: How should headers be nested?

Look at a newspaper article (especially the larger ones). The article title will be the H1, with the main sections of the article being H2 elements, and the bullet points that reinforce the main sections of the article being H3 through H6 headings respectively. Never jump from a H2 to a H4 (or 5 or 6), and always use at least two H2-H6 elements. If you can't divide your topic into multiple sections, then don't use the subheadings. If you need a visual reference, think of a nested outline.

I've seen header tags nested in two ways:

1) By page section. e.g. Logo uses <h1>, content uses <h2>, sidebar uses <h3>

This would be a far better and more accurate representation:

<div id="content">
	<div class="wrapper">
		<h1>Page Title</h1>
		<p>Introductory paragraph</p>
		<h2>Section Heading</h2>
		<p>Page content...</p>
		<p>Page cotent...</p>
		<h2>Section Heading</h2>
		<p>Page content...</p>
		<h3>Section Subheading</h3>
		<p>Page content...</p>
		<p>Page content...</p>
		<h4>Section Sub-Subheading</h4>
		<p>Page content...</p>
		<p>Page content...</p>
		<h4>Section Sub-Subheading</h4>
		<p>Page content...</p>
		<h3>Section Subheading</h3>
		<p>Page content...</p>
		<p>Page content...</p>
	</div>
</div>
<div id="sidebar">
	<!-- if your sidebar contains extra relevant information, then the same structure (starting with H2s and working your way down) would be appropriate; if it contains ads, I'd identify the sidebar as an ad block instead (change the ID to reflect this) and just slap the ads inside instead -->
</div>

If you're wondering why I use a DIV with a class of "wrapper" inside the content DIV, it's because I use negative margins and floats to position my columns so they can ride up alongside the main content, and somtimes even underneath other sidebars as necessary. The CSS is kinda sorta advanced, but it's far more powerful and flexible than using absolute positioning for the same job (which has LOTS of drawbacks).

Of course, if you want to wrap the various main section headings (H2s) and their associated content in DIV containers, feel free to. (In fact, I should have done that in the first place, but each design is different, and has unique requirements.)

[wyrd33]

In regards to H1:

One per page - and use it as the page title, not the site title/logo.

What about the front page of a blog? A typical blog front page is a list of recent posts, nothing more. In this case, what would you recommend using the H1 tag on?

We'll use the official WordPress blog as an example: http://wordpress.org/development/

Since SitePoint has similar structure to a lot of heavy content web sites, we can use it as an example as well. If not the logo, what would you wrap in an H1 tag on the front page:

http://www.sitepoint.com/

[Dan Schulz]

For a blog, I'd use the H1 for an introductory heading, and then use the H2s for the post titles. Though unlike most blogs, I'd actually ADD other content to the front page.

As for SitePoint, I'd probably just say "screw it" and leave it alone until the next redesign. Afterall, "if it ain't broke, don't fix it" is a mantra for a reason. Especially given that a lot of people probably search for "SitePoint" specifically in a search engine.