What is a title attribute you ask?? The good folks at W3C state the following: “The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text.”
That sure is a mouthful! In simple terms it is an easy way to better define specific elements within your HTML coding. Some of the more common tags include: <img>, <p>, <div>, <a >, and <table> (if you are old school).
To me, these title attributes are SEO treasures. However, if used incorrectly, they can also be a SEO pitfall. Now there are also some folks out there that think using these tag attributes are flawed, but not from a search engine optimization standpoint. Rather they point out the problem that certain users with visual impairments and some browsers cannot display the descriptive text located within the attribute. There is a great article about this short coming by Steve Faulkner that discusses this in great lengths.
For me however, I think these are a great addition to our arsenal of ranking tools that we have at our disposal. The key to their success is to NOT use them in any spammy manner. Well I guess that goes without saying for any SEO endeavor.
Below are a few examples of how to use and how not to use them.
Incorrect:
<img src=”/images/nose.jpg” title=”New York based Rhinoplasty surgeon Dr. John Doe performed this Rhinoplasty procedure on this male patient. The Rhinoplasty before and after shows the rhinoplasty was a huge success.”>
Correct:
<img src=”/images/nose.jpg” title=”Before and after rhinoplasty photo” alt=”nose job photos”>
For images you should use these as a very short description. Notice the ALT tag was added as well. Make sure that the title and alt tag are not duplicates of each other.
Incorrect:
<p class=”somestyle” title=”This article discusses New York based Rhinoplasty surgeon Dr. John Doe and his approach to how he performs Rhinoplasty procedures in his New York City based plastic surgery center.”>Content goes here </p>
Correct:
<h1>Rhinoplasty Information</h1>
<p class=”somestyle” title=”Details about rhinoplasty procedures”>Content goes here </p>
For paragraphs and certainly not for every <p> you have, you should again use a short description which describes what the paragraph of text is talking about. It’s main idea if you will. Notice I added a <H> tag to the mix. I like to use the title attribute in the first paragraph of text following the heading tag and use it as reinforcement to the main idea of the content.
Incorrect:
<a href=”/rhinoplasty.html” title=” Rhinoplasty procedures are explained by New York based facial plastic surgeon Dr. John Doe. Follow this link to read more detailed information about his approach to nose job surgeries.”>Rhinoplasty</a>
Correct:
<a href=”/rhinoplasty.html” title=” Rhinoplasty info”>Rhinoplasty</a>
Again, we use a simple description approach to use within a link tag. For this I look at the page it is linking to and try to use the main <h1> or <title> tag of that page to reinforce that main idea.
So hopefully this gives you a better insight to how to use the tittle attribute for better overall optimization and ranking.