H Tag Usage & Retail SEO

[Tonearm]

What is the proper use of the H tags in the context of SEO? It seems like they should be used when I want to give a keyword or keyphrase emphasis, but I think there's more to it than that. For example, on a product page I have links to the product's main category and sub-category. Would it be a good idea to set up text tags like this:

H1: Product Title
H2: Main Category
H3: Sub-Category
P: Product Description

Also, on a category page I've got a listing of 9 different products with their thumbnails. Would it be a good idea to do something like this:

H1: Category Name
H2: Product #1 Name
H2: Product #2 Name
H2: Product #3 Name
etc.

I think I remember reading that H tags don't do much emphasizing unless there is a body of text immediately after it.

Retail sites do seem to be layed out in a pretty similar fashion (category page, product page). Is there a specific SEO strategy that works well for retail sites?

[mipapage]

Retail sites do seem to be layed out in a pretty similar fashion

And many more pages likely are too because they'd be following the what the specs suggest [w3.org].

An important excerpt from the specs may be "A heading element briefly describes the topic of the section it introduces."

Going with that, either of what you propose could make sense depending on the page. Building your site this way is useful because it helps users (including search engines) to understand your document [webmasterworld.com].

This tool [w3.org] proided by the W3C may help you to get a better view of how documents look to some user agents...

In terms of keyword placement, unless things have changed, the idea is that h1>h2>h3 etc. and best not to stuff too many words in there because it dilutes the effect.

[percentages]

<What is the proper use of the H tags in the context of SEO?

Right now....none of SE's care much for them. Google has got wise to misuse of H tags, Inktomi/Slurp never made much of them anyways when compared to anchor text.

My advise is use H tags when it makes sense for your cosmetics and users. Other than that don't bother with them!

H tags can be the extra ounce in the 500lb Gorilla war...but very few sites have that problem!

[mipapage]

My advise is use H tags when it makes sense for your cosmetics and users. Other than that don't bother with them!

Cosmetics? Users?

Header tags have to do with your content, not with users or cosmetics.

If your page has a subject or topic, use them.

Note: Though you may not get bonus points for using heading tags specifically, using proper semantic markup has kept our sites raked at #1 for over 1.5 years now on Google and now on Yahoo!

Googleguy was getting at something with that quote I linked to in the second message; they're going beyond words on a page and shooting for understanding the meaning of a document or website.

Proper markup leads to a better understanding...

[Tonearm]

Ok, I like the idea of building a site that makes as much semantic sense as possible, keeping it that way as technology changes, and knowing that the SEs are "looking" for sites that make that kind of sense instead of always optimizing around this attribute or that attribute.

I understand that the W3C specs are the most thorough way to learn how to code properly, but does anyone know of a guide online to get me going in the right direction without having to absorb all the information in the specs? I definitely want to get very familiar with the actual specs eventually, but I just don't have time right now.

[mipapage]

Hey tonearm,

You'll find that the basics of building a 'semantically meaningful' website is fairly simple, but at some points you may need to refer to the specs or your peers to get some opinions on things.

You're already familiar with the heading tags, but here's a quick review:

Heading Tags
"A heading element briefly describes the topic of the section it introduces"

That really sums it up. Use headings to lay out the hierarchy of your content on a page.

The Paragraph Tag
The paragraph tag is used for marking up paragraphs, plain and simple. This will be found between your heading tags.

Lists

• Unordered, ordered, and definition lists. Three classes of lists, but also quite simple to use.

• Unordered lists are for lists whose list items have no real order or hierarchy.

• Ordered lists can be used for list items that should be listed in an oreder.

• Definition lists are a bit more complicated, and can be very powerful. Check this Google search [google.com] for more on definition lists.
  

Oft Forgotten
After this there are the oft forgotten tags, such as 'code', 'blockquote', 'q' (quote), 'pre', 'address and others that add value to your data/content.

Seems simple, no?
Well, it can be, however there are times when your content can get pretty complicated and you really need to think things thru.

If you want a more comprehensive review of the tags but dont want to digest the specs, hit w3schools for example, and do a quick tutorial on html.

The next level
If you aren't already using CSS for structure, that, IMO, is the next level. Removing useless font-tags and all of that table markup not only makes your pages lighter, but it does increase your content/markup ratio. Whether that is important or not, I'm not sure.

What I do know is our sites do well, and as far as the web design aspect of on page factors is concerned, what you see on this page is what we do -> good semantic markup for structure and css for style.

[Tonearm]

mipapage-

Thanks a lot for all the info. So would things like the logo (on the top), category links (on the left), and promo items (on the right and bottom) be displayed with DIVs and no semantic markup at all while the main page content (in the center) is displayed with markup like H# and P tags?

[mipapage]

A few things...

---

Here's a sample of what I would do:

<body> 
<div id="access"> 
"Skip to" Accessibility links here 
</div> 
<div id="header"> 
"Logo to home page here*" 
<h1>Main Heading of Page here or...</h1> 
</div> 
<div id="navigation"> 
"Navigation Links here" 
</div> 
<div id="content"> 
<h1>You can put the main Heading of Page here</h1> 
Main content of page here, paragraphs, heading tags etc. 
</div> 
<div id="footer"> 
"footer content here" 
</div> 
</body>

Accessibility
I usually place two links here, skip to content and skip to navigation. I leave these between the <div> with an id equal to access, for accessibility. It may be important to note here that <div>'s are meant to be used for grouping common elements together.

Header
A few things can be done for the header.

You can include a logo image directly if you'd like. I usually stick a link to the home page in the header and put the logo along with a header image in the css.

I may put the Heading 1 tag here and hide it with css.

Navigation
I markup my navigation as a list, and style it with CSS. I would commonly put the navigation below the content in the source, putting it visually where it needs to be with css.

Content
Marked up as required.

Footer
Marked up as required.

---

be displayed with DIVs and no semantic markup at all

Definitely not the case. I would use div's to group major sections of the website, and mark them up semantically as necessary. For example, I believe that navigation is simply a list of links, and mark it up as such.

I would do the same with a list of links in the footer. If I had some text in the footer, I would mark it up with paragraph tags.

I think maybe you are a bit confused between marking up your 'content' semantically and marking up your page semantically.

Ideally I suppose you would have some form of 'heading' for sections such as navigation, footer, header etc. and then others for your content.

I've never really thought of this before, but I suppose that there are two ways to look at this:

1. This is a shortcoming of html and needs to be dealt with.
   
2. This can be done using heading tags and I just haven't bothered/realized it!