Previous Nugget on <b> vs. <strong>: http://bit.ly/??????
Previous Nugget on <i> vs. <em>: http://bit.ly/??????
The product detail page on every jewelry e-commerce website has some sort of table presentation of information. Usually it shows the metal type, carat total weight, diamond shape, etc.
Here a full example of typical information found on a jewelry product detail page:
14k White Gold 0.85ct Diamond Engagement Ring (this is the item title)
The center diamond is included with this sophisticated three-stone cathedral engagement ring that features two side stones along with pave-set diamonds down the shank, accentuating the exquisite 0.60 carat center diamond with a clarity grade of VS2 and H color. (this is the basic description)
(this is the table of technical information)
Stock Number: 1235
Metal Type: 14k White Gold
Total ct. Weight: .85 ctw
Shape: Round
Clarity: VS2
Color: H
Now let's apply the HTML 5 proposed usage of B, STRONG, I and EM to the example. Here's how it would look...
<strong>14k White Gold 0.85ct Diamond Engagement Ring</strong>
<b>The center diamond is included with this sophisticated three-stone cathedral engagement ring</b> that features two side stones along with pave-set diamonds down the shank, accentuating the exquisite 0.60 carat <em>center diamond with a clarity grade of VS2 and H color</em>.
Stock Number: 1235
<i>Metal Type</i>: <em14k White Gold</em>
<i>Total ct. Weight</i>: .85 ctw
<i>Shape</i>: Round
<i>Clarity</i>: VS2
<i>Color</i>: H
Let's explain what we've done here...
The item title is the most important SEO component in this section, so we're tagging that with <strong></strong>.
We then want to apply a little funnel/user interface technique and entice the visitor to read the first few words of the description so we've applied the <b></b> to that.
At the end of the description you see the phrase "center diamond with a clarity grade of VS2 and H color." We know from our own research that a phrase like this will have some SEO value. People actually search for long string phrases like this, so that's why we tag that entire thing with <em></em>.
In the table of details we're tagging each technical term (Clarity, Color, Shape, etc.) with <i></i> and then tagging only the most important technical details with the <em></em>. Important technical details should be selected according to if someone would understand the words out of context. You see we EM tagged "14k White Gold" but didn't EM tag the letter "H."
This is a proposed layout that takes advantage of the upcoming HTML 5 specifications on correct tag usage. You should show this to your web programmer and ask them to implement it now. We haven't mentioned it at all, but if he suggested bold and italic style usage of the tags doesn't make sense on your website design, you can always use advanced style sheets to make <strong> words not appear bold and make <em> words not appear italic while still getting the SEO value.
This is the actual layout example:
| 14k White Gold 0.85ct Diamond Engagement Ring | |
| The center diamond is included with this sophisticated three-stone cathedral engagement ring that features two side stones along with pave-set diamonds down the shank, accentuating the exquisite 0.60 carat center diamond with a clarity grade of VS2 and H color. | |
| Stock Number: | 1235 |
| Metal Type: | 14k White Gold |
| Total ct. Weight: | 0.85 ctw |
| Shape: | Round |
| Clarity: | VS2 |
| Color: | H |
