homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Marketing and Biz Dev / General Search Engine Marketing Issues
Forum Library, Charter, Moderators: mademetop

General Search Engine Marketing Issues Forum

This 72 message thread spans 3 pages: 72 ( [1] 2 3 > >     
The Ultimate SEO Guide for 2009

 4:02 pm on Dec 18, 2008 (gmt 0)

HTML and XHTML Techniques for WCAG 2.0

The above link provides "everything" you need to know about on page SEO. If you see anything that was missed, please do speak up!

It is like the Digital Encyclopedia of SEO. Be prepared to spend about 6-8 hours of "initial" reading, following links, using your back button, etc. After you have read the entire document and "all" linked references, I will Certify you as an SEO. Along with myself. :)



 7:39 pm on Dec 18, 2008 (gmt 0)

I think its time to "let the cat out of the bag" as they say. That release of the WCAG 2.0 Recommendation brought together quite a bit of information that is buried in the thousands upon thousands of W3 documents.

Web Content Accessibility Guidelines (WCAG) 2.0
W3C Recommendation 11 December 2008

Few are going to take the time to read and digest that. I figure we might as well start dissecting it piece by piece because they really bring focus to elements that are rarely discussed around here. I'm going to pick one of the many and open it up for discussion. For those who have read the documents above, if you found something of interest, please do opine here.

H54: Using the dfn element to identify the defining instance of a word

The objective of this technique is to use the dfn to mark the use of a word or phrase where it is defined. The dfn element is used to indicate the defining instance of the enclosed term. In other words, it marks the occurrence of the term where the term is defined. Note that it encloses the term, not the definition. This technique would be used in combination with G112: Using inline definitions to provide the definition.

<p><dfn>Search Engine Optimization</dfn> is the process of improving the volume and quality of traffic to a web site from search engines via "natural" ("organic" or "algorithmic") search results.</p>

^ Definition from the Wiki

You'll want to make sure that you follow the two (02) linked references for...

G55: Linking to definitions

G112: Using inline definitions

I've been using the link rel for years just because it is recommended in the W3 HTML Guidelines. I use it judiciously within Glossaries and multi page documents. I've never done any absolute testing in this area but I'll have to admit, our pages perform very well overall and we utilize the elements and attributes available to us. ALL OF THEM!

When was the last time we had a discussion on the <dfn> element? ;)

How does the <dfn> element come into play when a user performs define: search engine optimization queries?

[edited by: encyclo at 3:05 am (utc) on Dec. 19, 2008]
[edit reason] fixed typo [/edit]


 10:48 am on Dec 19, 2008 (gmt 0)

we might as well open up that whole can!

i've been waiting for "the semantic web" to become a reality since i read tb-l's book.
like p1r, i believe the time is ripe for G et al to reward those who use the full semantic power of existing html tags.
in that light i distilled a list of tags and attributes which i think should be used primarily for semantics and structure rather than style and presentation.

obvious but often forgotten:

  • <h1> to <h6> - header 1 to header 6
  • <img> - use the alt attribute, don't forget about longdesc attribute
  • <a> - rel and rev attributes

tags for tabular content:

  • <table> - table (use the summary attribute)
  • <caption> - table caption

  • <colgroup> - groups of table columns
  • <col> - attributes for table columns

  • <thead> - table header (group of rows)
  • <tbody> - table body (group of rows)
  • <tfoot> - table footer (group of rows)

  • <tr> - table row
  • <td> - table cell (check out abbr, axis, headers & scope attributes)
  • <th> - table header (a special type of cell)

tags for lists of things:

  • <ol> - ordered list
  • <ul> - unordered list
  • <li> - list item

  • <dl> - definition list (also can be used for dialogs)
  • <dt> - definition term (also can be used for speaker in dialogs)
  • <dd> - definition description (also can be used for speaker's words in dialogs)

tags for quotations:

  • <blockquote> - long quotation
  • <q> - short quotation ("cite" attribute looks interesting!)

tags for adding structure to phrases:

  • <em> - emphasis
  • <strong> - stronger emphasis
  • <dfn> - the defining instance of the enclosed term (as mentioned above)
  • <code> - fragment of computer code
  • <samp> - sample output from programs, scripts, etc.
  • <kbd> - text to be entered by the user
  • <var> - an instance of a variable or program argument
  • <cite> - citation or reference to other sources
  • <abbr> - abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.)
  • <acronym> - acronym (e.g., WAC, radar, etc.)
  • <address> - as mentioned here [webmasterworld.com]

tags for form-related semantics:

  • <fieldset> - fieldset (of form elements)
  • <legend> - caption in a fieldset

  • <label> - label for a form control (use "for" attribute to associate to form element)
  • <optgroup> - group <options> within a <select> element

a tag for another post:

  • <link> - link to related documents - see [w3.org...] for the possibilities


 2:11 pm on Dec 19, 2008 (gmt 0)

Woohoo, now we've got some action, thanks phranque! Now, let's talk about each one individually. All those elements look pretty sitting up there but I don't think many are even aware of some of them or how to best utilize them.

H40: Using definition lists

One of me all time favorites right there. I've built numerous glossaries in my time and each one used the <dl> element as suggested. And yes, those glossaries perform "extremely well". Woz knows the <dl> element well. ;)

I'm going to use part of their example...

<dl title="Nautical Terms">
<p>A <em>knot</em> is a unit of speed equaling 1 nautical mile per hour (1.15 miles per hour or 1.852 kilometers per hour).</p>

What da ya know? I've not used the title attribute for the <dl> yet, didn't even think of that one.

I like to take those <dt>s and assign Fragment IDs to them. The ID of course matches the <dt> in most instances, it keeps things very simple and allows easy use of dynamics.

<dl title="Nautical Terms">
<dt id="Knot">Knot</dt>
<p>A <em>knot</em> is a unit of speed equaling 1 nautical mile per hour (1.15 miles per hour or 1.852 kilometers per hour).</p>

In addition to the Fragment IDs, I'll provide links to other terms within context. The Fragment IDs allow me to put the visitor directly at the "Defined Term". I also use a Back to Previous function in all instances. You want to keep a one click option in front of that user at all times while perusing a glossary.

The above is just one of "many ways" that the <dl> element can be used. I've also used them in FAQs and other implementations where there is a direct relationship in context between one and another. ;)


 9:13 pm on Dec 19, 2008 (gmt 0)

Man thats a heavy post and the main reason ive becoming here for years... Thanks


 3:55 pm on Dec 22, 2008 (gmt 0)

H28: Providing definitions for abbreviations by using the abbr and acronym elements

This one can be a little confusing in that there are two elements to consider; the <abbr> and <acronym> elements. If you've been keeping up with the HTML 5 spec, the <acronym> element has been deprecated in favor of the less utilized <abbr> element. I don't know why they decided to do that because they are distinct enough elements that they should be kept separate.

Either way, support for both elements has been here since the dawn of the HTML spec and you may want to consider assisting your visitors with understanding the initialisms, abbreviations and acronyms they may run into on your site.

I might do something like this...

border-bottom:1px dashed #f00;

This provides a visual clue for the users that something is up. I know, not much of a clue but it is there and most visitors are "curious" about the dashed underlines and will typically hover their cursor over them at which time the title attribute comes into play.

<abbr title="Search Engine Optimization">SEO</abbr>

Why did I use the <abbr> element? Because SEO is an abbreviation or initialism for Search Engine Optimization. It is not an acronym that is pronounced like NATO. An acronym is when an abbreviation is used as a word. And yes, I do use the <acronym> element in this instance because I'm thinking HTML 5 is the next step and I'd prefer to eliminate any deprecated elements well in advance as long as there are logical replacements. Keep in mind that just because an element is deprecated doesn't mean you cannot use it. If you are a standards evangelist you'll most likely opt not to use those deprecated elements in favor of the recommended ones.

The spec states that you should only use one <abbr> and/or <acronym> element per instance, per page. This is for those using assistive technologies so you don't end up "stuttering" all over the place. It is usually the first instance in the source that has the <abbr> or <acronym> elements in use.

Do the Search Engines look at these elements? I don't know and I really don't care. My visitors are looking at them and that is all that matters at this point.

All of these specifications are in place for a reason. If you look at the people and organizations behind the specs, you can clearly see that all of this ties into one big equation. Just how many parts of that equation have you tapped into?

[edited by: coopster at 5:25 pm (utc) on Feb. 16, 2009]
[edit reason] edited upon member request [/edit]


 2:26 pm on Dec 23, 2008 (gmt 0)

H44: Using label elements to associate text labels with form controls

I know, what do <label> elements have to do with SEO? Probably not much from a documented standpoint. I come from the mindset that everything on the page is weighed to some extent and that there may be thresholds in place for the weighting of those elements.

Let's forget about SEO for a moment here and focus on the user. How many times have you used a form with checkboxes and/or radio buttons and it was a pain in the arse "targeting" those pesky little buggers with your cursor? It is one my biggest pet peeves and I'll crack down on a site review real quick if they are not being used both publicly and in admin.

<label for="CompanyName">Company Name:</label>
<input type="text" name="CompanyName" id="CompanyName">

<label for="FooServices"><input type="checkbox" id="FooServices" name="FooServices">
Foo Services</label>

In the above example, I've put the <label> element in front of the input. The spec shows it in front of the text. I don't like the gap between checkbox and text that occurs when you place the <label> element in front of text leaving the input element by itself. The function is disrupted by white space.

Go ahead, give it a try. Start using the <label> element judiciously and watch how "convenient" form usage becomes. Give the user a larger target and you've improved the browsing experience for them.

And who knows, maybe you've improved targeting for the bots too. With Google claiming over 400 factors that it looks at to determine page quality, I'm thinking many of those factors come from the HTML/XHMTL specifications. Ting, ting, ting... ;)

Previous WebmasterWorld discussions...

The LABEL element
2006-02-21 - [webmasterworld.com...]

Usability Feature - The Label Element
2004-01-25 - [webmasterworld.com...]

^ Heh! Ya, I started those too. ;)


 2:37 pm on Dec 26, 2008 (gmt 0)

H42: Using h1-h6 to identify headings

The objective of this technique is to use HTML and XHTML heading markup to convey the structure of the content.

Pretty simple one eh? Hardly. I've seen more and more mixed up implementations of h elements than anything else. Since there are six of them to work with, you have six times the chaos.

There SHOULD only be one <h1> per document. When viewing the source of your document, your <h> elements SHOULD be in order. But, this isn't going to be the case for many due to design structure. I don't know what impact this has from an indexing standpoint but it does create a bit of confusion for those using assistive technologies.

Importance of HTML headings for accessibility (8 mins and 41 seconds)

View the above video. It was made by a gentleman who is an accessibility consultant and is blind. He has been using JAWS since 1992. If you really want to see how your documents are interpreted, watch these types of accessibility videos, they are an eye opener!

Few sites will ever venture into the <h5> and <h6> levels or at least I don't see them frequently. That type of document would most likely be a Table of Contents for a very deep subject. :)

If I were viewing what "I" consider the perfect page, it might look something like this...

<h2 id=""></h2>
<h3 id=""></h3>
<h2 id=""></h2>
<h3 id=""></h3>

Okay, I don't want to load too much code in this post but hopefully you get the idea. The goal is to take that content and break it down into a logical order using headings, paragraphs, lists, etc. There is an element and attribute for everything you'll need to do. Choosing which elements and attributes to use is where the challenge comes in.

Many websites have left and/or right menu systems. These are prime candidates for the <h3> element along with the use of lists. Some might even venture into <h4> territory depending on how large the scope of their content is. <h1> thru <h3> may be reserved for content level headings. <h4> thru <h6> may be reserved for navigation level headings.

Headings SHOULD be short and concise. They should describe and/or categorize the content that follows immediately thereafter. I recommend the use of Fragment IDs for all content level <h> elements. This allows you to put visitors right where they need to be when linking. You'll find the use of Fragment IDs has many benefits. Trust me, I know. And, I believe tedster has recently seen Google using "Jump To" links in the SERPs that link to a Fragment ID on the destination page. Hmmm, one of those positive side effects that usually occurs when you use the elements and attributes available to you for document structure.


 4:28 pm on Dec 28, 2008 (gmt 0)

H33: Supplementing link text with the title attribute

I'm going to pull an important piece from the above so that we all understand there are some flaws when using the title attribute to provide "assistance" for the user.

Current graphical user agents do not provide mechanisms to control the presentation of title attribute content. The user cannot resize the tool tip text or control the foreground and background colors. The placement and location of the tool tip cannot be controlled by users, causing some screen magnifier users to be unable to access meaningful portions of the title attribute content because the tool tip cannot be fully displayed within the viewport.

Ya, I know, nothing new at the above. But, you have to keep in mind how the documents are organized. The first link above takes you to a summary type page. At the end of each summary, there are Related Techniques. Those are the links you'll want to follow and gain further insight.

In referencing the above title attribute, the Related takes you to this document...

H30: Providing link text that describes the purpose of a link for anchor elements

I thoroughly enjoy reading the WCAG. This new set of guidelines contains more brevity and quick reference which makes it a bit easier on the study portion of it. For example...

When the content of a link contains both text and one or more images, if the text is sufficient to describe the purpose of the link, the images may have an empty text alternative. When the images convey information beyond the purpose of the link, they must also have appropriate alt text.

There are five examples shown on how to best format the html for the various implementations you may be challenged with. The above paragraph along with the five examples are the foundation for all internal and external link development.

Ya'll are going to let me bleed out here huh? Is anyone reading? Care to join me? ;)


 8:27 am on Dec 29, 2008 (gmt 0)

H2: Combining adjacent image and text links for the same resource

This example demonstrates a failure to apply this technique. An icon and text link are side by side. The text alternative for the image is the same as the text link beside it, leading to a "stutter" effect as the link is read twice.

Does your website "stutter"? Is the structure of your pages producing a replication of links and producing a "stuttering" effect for those using assistive technologies? And remember, the bots behave very similar to "assistive technology". They are blind and, they are deaf. Not to mention a few other things. :)

I've come across sites that are a stuttering nightmare. Something like this...

<td><a href="/foo/123"><img src="/foo/images/123" width="120" height="60" alt="Foo 123" /></a></td>
<td rowspan="2"><a href="/foo/123">Product</a></td>
<td><a href="/foo/123">Product</a></td>

Th-Th-Th-That's all folks!

^ That's three hrefs for one product all within the same block of html. This is not good practice and I would think produces less than optimal results from an indexing standpoint.

The above could easily be achieved by doing this...

<td><a href="/foo/123"><img style="float:right;margin:0 0 .5em .5em;" src="/foo/images/123" width="120" height="60" alt="Foo 123" />Product</a><br />
Additional Product Information</td>

You can also "associate" additional text with that linked image. :)

P.S. I know, I'm using <table>s in my examples. From what I've seen, that is still the common practice with many ecommerce sites and where you see much of the poorly implemented html. I've even seen CSS versions that are just as bad. ;)

[edited by: encyclo at 11:12 am (utc) on Dec. 29, 2008]


 1:24 pm on Dec 29, 2008 (gmt 0)

The above is just one of "many ways" that the <dl> element can be used. I've also used them in FAQs and other implementations where there is a direct relationship in context between one and another

here's a fragment from my latest "semantically rich" FAQ template:

<h1><acronym title="Frequently Asked Questions">FAQ</acronym></h1>
<p>Everything you need to know about X:</p>

<li><a href="#what">What is X</a></li>
<li><a href="#who">Who does X</a></li>
<li><a href="#why">Why do X</a></li>
<li><a href="#how">How to X</a></li>
<li><a href="#where">Where to X</a></li>

<dl title="FAQ">
<dt id="what">What is X?</dt>
<p>X is yadda yadda.</p>
<dt id="who">Who does X?</dt>
<p>Yadda and yadda do X.</p>
<dt id="why">Why do X?</dt>
<p>Do X because yadda yadda.</p>
<dt id="how">How do you X?</dt>
<p>You do X by yadda yadda.</p>
<dt id="where">Where Do you X?</dt>
<p>You can X at yadda yadda.</p>

Does your website "stutter"?

i've tried to go all validated and accessible a couple of times and overdid it.
as always, a non-graphical browser such as lynx is your friend here for testing what makes sense and what is overkill.
the stutter will be obvious.
be sure to make the "useless" images disappear so there's no need to guess or wonder if information is missing.

You can also "associate" additional text with that linked image.

here's more on the alt attribute - "How to specify alternate text":
and don't forget the longdesc attribute!

Ya'll are going to let me bleed out here huh? Is anyone reading? Care to join me?

i'd join you if i could keep up!
aamof i haven't yet designated time for digesting your opening salvo.
but i am checking back often and have this flagged for posterity.
i did spend some research time to organize some threads and to give you props elsewhere [webmasterworld.com].


 2:31 pm on Dec 29, 2008 (gmt 0)

Classic thread! Absolutely ace!


 9:42 am on Dec 30, 2008 (gmt 0)

This is excellent material, well done!


 2:30 pm on Dec 31, 2008 (gmt 0)

Ah-ha, this one should raise some eyebrows...

H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested

The objective of this technique is to describe the purpose of a link in a nested list from the context provided by the list item under which the list is nested. This list item provides context for an otherwise unclear link. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link.

I use <h> elements and nested lists heavily. I even use a combination of both where the <h> element may be nested within the list. I like the example they provide as it would appeal to many here at WebmasterWorld, the topic matter that is. ;)

<li><a href="royal_palm_hotel.html">Royal Palm Hotel</a>
<ul class="horizontal">
<li><a href="royal_palm_hotel_map.html">Map</a></li>
<li><a href="royal_palm_hotel_photos.html">Photos</a></li>
<li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
<li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
<li><a href="royal_palm_hotel_book.html">Book now</a></li>
<li><a href="hotel_three_rivers.html">Hotel Three Rivers</a>
<ul class="horizontal">
<li><a href="hotel_three_rivers_map.html">Map</a></li>
<li><a href="hotel_three_rivers_photos.html">Photos</a></li>
<li><a href="hotel_three_rivers_directions.html">Directions</a></li>
<li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
<li><a href="hotel_three_rivers_book.html">Book now</a></li>

I see many who will repeat the Hotel name in hopes of increasing their keyword phrase counts and I don't think that is the best way to go about things. The above is a clear example of how it could be done without overdoing the anchor text. I believe repetitive anchor text such as this may cause the page to underperform to some degree.

And, after a recent lengthy discussion on rel="nofollow", I may take the above and refine the flow a little bit...

<li><a href="royal_palm_hotel.html">Royal Palm Hotel</a>
<ul class="horizontal">
<li><a rel="nofollow" href="royal_palm_hotel_map.html">Map</a></li>
<li><a rel="nofollow" href="royal_palm_hotel_photos.html">Photos</a></li>
<li><a rel="nofollow" href="hroyal_palm_hotel_directions.html">Directions</a></li>
<li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
<li><a rel="nofollow" href="royal_palm_hotel_book.html">Book now</a></li>
<li><a href="hotel_three_rivers.html">Hotel Three Rivers</a>
<ul class="horizontal">
<li><a rel="nofollow" href="hotel_three_rivers_map.html">Map</a></li>
<li><a rel="nofollow" href="hotel_three_rivers_photos.html">Photos</a></li>
<li><a rel="nofollow" href="hotel_three_rivers_directions.html">Directions</a></li>
<li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
<li><a rel="nofollow" href="hotel_three_rivers_book.html">Book now</a></li>

Are you using headings and lists to your advantage? What are your thoughts on "in context" implementations such as this? They are pretty much a given when working with navigation menus as you need to keep anchor text short and concise. Using the headings and nesting thereof provides additional semantics that some of us may not think about. Do the search engines take this into consideration? Does it even matter that they do? Based on the specification, this is how it should be done. ;)


 5:08 pm on Jan 2, 2009 (gmt 0)

H85: Using OPTGROUP to group OPTION elements inside a SELECT

The objective of this technique is to group items in a selection list. A selection list is a set of allowed values for a form control such as a multi-select list or a combo box. Often, selection lists have groups of related options. Those groups should be semantically identified, rather than simply delimiting the groups with "dummy" list entries. This allows user agents to collapse the options by group to support quicker skimming of the options, and to indicate in what group an option of interest is located. It also helps to visually break up long lists so that users can more easily locate the option(s) they are interested in.

Do you use the <optgroup label=""></optgroup> element?

Do you have long dropdowns? If so, you'll want to make use of the <optgroup> element to break those down into logical groups. You can also apply limited styling and provide a little more with the visual.

Do they matter in SEO? I don't know. What do you think? If Google claims to look at 400+ factors when determining document quality, I can only think of one place to look and get a large portion of that 400+ and that would be on page. I'm thinking if I structure my documents per the specifications using the elements and attributes available to me, I'm covering semantic factors that maybe some haven't considered before.

Do you think the search engines are intelligent enough to use semantic structure as a signal of quality? If so, to what level? Ever use JAWS? Would that type of processing ever be applied from an indexing standpoint to determine document quality?

Where's me Tin Hat at? Ting, ting, ting...


 5:29 pm on Jan 3, 2009 (gmt 0)

WOW! Amazing thread! Thank You!


 5:49 pm on Jan 3, 2009 (gmt 0)

Do you think the search engines are intelligent enough to use semantic structure as a signal of quality? If so, to what level? Ever use JAWS? Would that type of processing ever be applied from an indexing standpoint to determine document quality?

I always start from a stand-point of what I would use if I were a search engine. And yes, I would be using several of these elements as quality signals and for assistance in determining how to index a page.

They're all pretty easy to use, so I'm minded to include some of these elements into my CMS.

Excellent thread P1R - thank you for putting so much time into posting it all up. Great read.


 7:27 pm on Jan 4, 2009 (gmt 0)

This is very interesting reading for sure. A little much for me, perhaps, but something I'm learning from.


 2:00 pm on Jan 5, 2009 (gmt 0)

<q> - short quotation ("cite" attribute looks interesting!)

H49: Using semantic markup to mark emphasized or special text

JAWS contains support for blockquote and cite. WindowEyes contains support for blockquote, q and cite

9.2.1 Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM

CITE: Contains a citation or a reference to other sources

9.2.2 Quotations: The BLOCKQUOTE and Q elements

cite: The value of this attribute is a URI that designates a source document or message. This attribute is intended to give information about the source from which the quotation was borrowed.

The CITE comes in two flavors; The CITE Element and the cite Attribute. Here's an example of using the cite Attribute within a blockquote...

<blockquote cite="http://www.example.com/">
<p>Quote here.</p>

And here's an example using the cite Attribute with the CITE Element...

<cite cite="http://www.example.com/"></cite>

4.6.3 The cite element

The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. A person's name is not the title of a work - even if people call that person a piece of work - and the element must therefore not be used to mark up people's names.

Emphasis mine. The W3 use the CITE Element to markup names of people. According to the HTML 5 spec, this is not correct.

The CITE Element and the cite Attributes are rarely used from what I can tell. I've inspected thousands of pages in my tenure and can probably say I've only seen a handful of implementations.

Since the cite Attribute allows for an external http reference, how do you think the search engines treat something like that?


 6:18 pm on Jan 6, 2009 (gmt 0)

H88: Using HTML according to spec

3. Making sure the content can be parsed HTML and XHTML also define how content should be encoded in order to be correctly processed by user agents. Rules about the structure of start and end tags, attributes and values, nesting of elements, etc. ensure that user agents will parse the content in a way to achieve the intended document representation. Following the structural rules in these specifications is an important part of using these technologies according to specification.

Of course we cannot have an Ultimate SEO Guide without reference to the HTML Specifications themselves. They are the foundation of all things you will do as an SEO. Since SEO involves everything to do with the document itself, it is only natural that you have a basic understanding of what is under the house. It would be difficult for you to make proper structural recommendations if you had no idea how the foundation was constructed.

One thing I'd like to point out when reading the W3, any time you see that phrase User Agent utilized, pay close attention. There is "usually" a direct correlation with that phrase and the search engines to some degree. You'll find that phrase used extensively throughout the HTML specifications.

Have you noticed that the WCAG 2.0 Documents provide you with working examples of scripts and such? That is way cool. I like cutting, pasting, and having things work the way they should. :)

Note: I did NOT mention the words HTML/XHTML Validation above.


 5:38 pm on Jan 11, 2009 (gmt 0)

G88: Providing descriptive titles for Web pages

Users can more quickly identify the content they need when accurate, descriptive titles appear in site maps or lists of search results. When descriptive titles are used within link text, they help users navigate more precisely to the content they are interested in.

I know, the <title> Element gets a lot of fanfare around here. That's because it is one of the most important elements of the page structure. I don't think we could ever tire of these types discussions because you can always learn something new when it comes to <title> structuring. I have some neat little tidbits to share with you too. ;)

No Limits

There is no "official limit" to the number of words and/or characters for <title> Elements. There are only suggested limits that are not set in stone either. I use different strategies for different documents. I do not follow the same structure from page to page. Since the semantic markup on the page changes, my <title> elements usually reflect those elements and their order.

SERP Truncation ...

One of the things you'll want to think about are the truncation limits in the SERPs. Google truncates at 66/67 characters depending on what is in the last character position. You'll want to make sure that you've kept "full" words in those first 66/67 characters so nothing of importance is getting truncated in the SERPs. My understanding is that well crafted <title> elements that appeal to the searcher's visual are where it is at! How you "turn the lights on" may have a direct impact on CTR.

Turn The Lights On

One of the goals is to craft a <title> that when a user searches for 3 or more words, that entire <title> "lights up" in the SERPs. That is assuming that you are using a 5-7 word <title> element in most instances. In performing my test queries, I've found many sites holding prime positions using strategies of this nature. Some are doing it purposely, others have "stumbled" onto just the right mix in their <title>. And of course it is all dependent on the search query.

Shorter <title> Elements also perform well. But, I feel that usually only happens when the page is "very specific" and you're dealing with one "primary phrase". When I say shorter, I'm referring to 66/67 characters or less and that includes spaces. For me, long titles are anything that truncates and presents the ellipses (...) in the SERPs.

Forward/Reverse Thinking

Forward and Reverse <title> structure should be given careful consideration. If you follow the link above, they provide this example...

<title>WGBH Media Access Group Captioning FAQ</title>

Example 3: A Web page with a descriptive title in three parts
A Web page provides guidelines and suggestions for creating closed captions. The Web page is part of a "sub-site" within a larger site. The title is separated into three parts by dashes. The first part of the title identifies the organization. The second part identifies the sub-site to which the Web page belongs. The third part identifies the Web page itself.

I'm a big fan of using the above type structure by default. The hyphens are separators and allow you to duplicate primary phrases and/or parts thereof allowing increased exposure for keyword searches. You can easily write a <title> that uses the keyword twice and use that from both a Forward and Reverse perspective. Use the hyphen to your advantage.

They also provide an example from a Newspaper Web Page. That one is interesting in that they suggest the actual date in the <title>. I feel this is very good practice and with Google now displaying dates in the SERPs, it is definitely something to consider. You can also get the date to display in the SERPs if it appears right after the <body> element and/or in the first part of main content that Google can freely index. Works in the meta description too.

The <title> Element is mandatory.

Note that the (mandatory) title element, which only appears once in a document, is different from the title attribute, which may be applied to almost every HTML and XHTML element.


 8:31 pm on Jan 19, 2009 (gmt 0)

H50: Using structural elements to group links

The objective of this technique is to demonstrate how to group links into logical sets. When links are grouped into logical sets (for example, in a navigation bar or main menu that appears on every page in a site) they should be marked up as a unit.

Marked up as a Unit? Expect to see that term quite a bit moving forward as semantics become more mainstream. The term Section is also going to be seen quite a bit.

When it comes to a "group of links" there are three methods to use; <ul>, <ol>, <map>. You utilize CSS to present the visual and then HTML to present the semantics properly.

Are all of your navigational links surrounded by a list element? Even those in your footers? Do you have links that are just sitting in a <div></div> with no semantic meaning?

Disclaimer: The WCAG utilize examples that I don't agree with in some instances. If you see something over there that doesn't look right, it probably isn't! Although when it comes to Accessibility, they tend to lean towards old school markup when it can be achieved using new school markup. I guess they have some leeway if using a Transitional DOCTYPE.

P.S. You are welcome to ask questions. In fact, I'd like to ask one about these elements. When would you use <ol> instead of <ul> in navigational elements? Is there a hard rule to follow?


 1:22 am on Jan 20, 2009 (gmt 0)

When would you use <ol> instead of <ul> in navigational elements?

the first example that comes to mind would be chapter navigation for a book/article/etc.
maybe procedural steps or a timeline navigation could semantically benefit from an ordered list.


 8:29 am on Jan 20, 2009 (gmt 0)

Hello, people!
I want to join the conversation about the <ol> and <ul> elements. I am a coder, not SEO, but I have to become one. I hope a good one too :)

I have always presented my main navigation menus as <ul> but now that I think about it you could present it as an <ol>. This way you'll be sectioning the parts of your site e.g. 1.Main page; 2.About page; 3.FAQ page etc.

Still using unordered lists for navigational menus is good as you're presenting a list of links to the user agent. But which list is better?


 10:07 am on Jan 20, 2009 (gmt 0)

welcome to WebmasterWorld [webmasterworld.com], lordgore!

This way you'll be sectioning the parts of your site e.g. 1.Main page; 2.About page; 3.FAQ page etc.

"semantically speaking", why would the order of items be important in your example?


 10:32 am on Jan 20, 2009 (gmt 0)

When would you use <ol> instead of <ul> in navigational elements?

In a multipage form, Page 1 , Page 2 etc.

Great thread btw, lots to digest and take advantage of.


 10:49 am on Jan 20, 2009 (gmt 0)

Thank you, phranque.

Thinking about it the order of these items isn't important.
You could (even better should) use ordered lists for navigation for table of contents or a step-by-step guide.

I'm sure I will stick to <ul>'s for my main navigation and <ol>'s when I need something listed in order.

Nice thread, great forum!

Cheers :)


 11:01 am on Jan 20, 2009 (gmt 0)

there's a few you might have missed.

Best WebmasterWorld Threads of 2008:


 11:11 am on Jan 20, 2009 (gmt 0)

I'm sure I will stick to <ul>'s for my main navigation and <ol>'s when I need something listed in order.

That's the way I look at it. Welcome to WebmasterWorld lordgore!

Would an A-Z listing qualify for the <ol> element?

I like the Step by Step Guide example too. That surely qualifies. And, to make things even more interesting, I'll use the link rel element (start, next, prev, etc.) to group those documents together and make them whole. :)

Would you show numbers in a menu for the visitor? I really like to have "order" with everything I do. It is so much easier to direct someone to #3 on the list, isn't it?

Now, if you show the numbers, do you fiddle with the CSS to get the padding and everything just right or do you not display the numbers and make them part of the anchor text?

What happens if the numbered list needs to be ascending?

By the way, I have read and assimilated "all" of the documents that reside here...

Introduction to Techniques for WCAG 2.0 - Table of Contents

I "promise" if you read at least the section on General Techniques, you will be far more educated on the requirements for on page SEO than most. If you read all linked resources within the documents, you will be in a class above many. You'll have a "complete" understanding of what is required in all instances you may be challenged with. Heck, the WCAG even give you working code examples that validate.

Congratulations to the WCAG for a document that is leaps and bounds beyond anything I've read from anyone in regards to on page SEO. Ya, they let the cat out of the bag as they say. No, they never mention the term SEO in their documentation. Not that I could find anyway. But, they do reference UA just about everywhere. ;)


 11:46 am on Jan 20, 2009 (gmt 0)

Would an A-Z listing qualify for the <ol> element?

My first thought was yes, as there is a defined order to an alphabetical list.

However the W3C site says:

An ordered list, created using the OL element, should contain information where order should be emphasized

With this in mind, perhaps there is no need to emphasise the order of the letters in the alphabet as everybody should already know the order.

It is also likely a designer would use CSS to remove the numbering against the individual elements, this also suggests the order does not actually need to be emphasised.

So I would go for a <ul>.

This 72 message thread spans 3 pages: 72 ( [1] 2 3 > >
Global Options:
 top home search open messages active posts  

Home / Forums Index / Marketing and Biz Dev / General Search Engine Marketing Issues
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved