Your web home for how to's for web beginners. A jargon-free zone dedicated to helping your web knowledge grow.

Help For Web Beginners

Three of the Most Overlooked SEO Tricks

There are many ways to help get your site higher in the search engine results, but perhaps 3 of the most overlooked are 3 of the easiest.

The Alt Attribute

There's really nothing special about the Alt attribute other than it gives you a great opportunity to place another reference to those targeted keywords on your page.

The Alt attribute does not function on it's own; it is contained within the HTML <IMG> tag. The idea behind the Alt attribute is that when the image does not display, the information in the Alt attribute will be displayed in it's place. With most web browsers, the Alt text (as the actual text within the Alt attribute is called) is displayed when the image is hovered over with the mouse. Visually impaired web surfers will also be served the Alt text in their readers.

Acceptable Usage of the Alt Attribute for SEO

The Alt attribute can help your website to gain rank in the search engines, but it can also hurt your site if you abuse it. The following examples are some unacceptable Alt text implementations:

<img src="searching.jpg" alt="SEO, web programming, search engine optimization, address bar, surfing the web">

<img src="code.jpg" alt="programming, web programming, HTML, CSS, Java, websites">

Besides risking a penalty for keyword stuffing, using alt text like the examples above just plain look bad and can detract from your online reputation.

The following does not work if you are using FireFox as FireFox does not show Alt text or images that fail to load.

Hover over the picture below to see how bad this looks to site visitors.

Hover over the image and if you are not using FireFox you would see the alt text laundry list of keywords.

SEO, web programming, search engine optimization, address bar, surfing the web

It looks even worse when the picture fails to load.

You should see either the alt text alone, or the symbol for a broken picture along with the alt text.

SEO, web programming, search engine optimization, address bar, surfing the web

Acceptable Alt Text

Keeping alt text both useful and simple is the best way to maximize the benefits without running the risk of getting a keyword stuffing penalty. While many simply describe what is in the picture, this may not always be the most effective use of this SEO opportunity.

Sticking with our earlier picture, here's a few alternatives for the Alt text that would help with SEO without straying into keyword stuffing.

<img src="searching.jpg" alt="typing information into the address bar">

<img src="searching.jpg" alt="address bar">

<Object> Tag

The alt attribute is also used with the OBJECT tag which is used to embed a software object (ActiveX, QuickTime movie, etc) into a document.

The Title Attribute

The title attribute is used exactly like the alt attribute in that it is used to further identify an element. Some title attributes are shown on the screen to site visitors and others are not - this depends on the HTML tag and the browser being used to view the page.

In an effort to make web pages more accessible for the visually impaired the HTML 4 standard has added the title attribute to many of the tags that one would not normally associate with needing a title. In one of my HTML programming books, the examples of the title attributes for those tags that are presentational (controls how the element appears on the page) included a description of what the tag was doing. For example title="emphasis" for bolded text, title="captioned text" with the caption tag, and title="table heading" with the thead tag.

Along with each tag that allows the usage of the title attribute, I have included whether the tag is deprecated (should not be used anymore), the tag itself is new and part of the HTML 4 standard (latest version and may not work with older browser versions), or if the title attribute was added to an existing tag as part of the HTML 4 standard. Those tags without any information are those tags that are not deprecated and have had the title attibute before the HTML 4 standard was issued.

The title attribute is used with the following tags:

<ADDRESS> (attribute - HTML 4)
<AREA> (attribute - HTML 4)
<B> (attribute - HTML 4)
<BIG> (attribute - HTML 4)
<BLOCKQUOTE> (attribute - HTML 4)
<BODY> (attribute - HTML 4)
<BR> (attribute - HTML 4)
<CAPTION> (attribute - HTML 4)
<CITE> (attribute - HTML 4)
<CODE> (attribute - HTML 4)
<COL> (attribute - HTML 4)
<COLGROUP> (attribute - HTML 4)
<DD> (attribute - HTML 4)
<DEL> (HTML 4)
<DFN> (attribute - HTML 4)
<DIV> (attribute - HTML 4)
<DL> (attribute - HTML 4)
<DT> (attribute - HTML 4)
<EM> (attribute - HTML 4)
<EMBED> (not widely supported, use OBJECT instead)
<FIELDSET> (attribute - HTML 4)
<FORM> (attribute - HTML 4)
<H1> - <H6> (attribute - HTML 4)
<HR> (HTML 4)
<I> (attribute - HTML 4)
<IMG> (attribute - HTML 4)
<INPUT> (attribute - HTML 4)
<INS> (HTML 4)
<KBD> (attribute - HTML 4)
<LI> (HTML 4)
<LINK> (attribute - HTML 4)
<MAP> (attribute - HTML 4)
<OL> (attribute - HTML 4)
<OPTION> (attribute - HTML 4)
<P> (attribute - HTML 4)
<PRE> (attribute - HTML 4)
<Q> (HTML 4)
<SAMP> (attribute - HTML 4)
<SELECT> (attribute - HTML 4)
<SMALL> (attribute - HTML 4)
<STRONG> (attribute - HTML 4)
<STYLE>(attribute - HTML 4)
<SUB> (attribute - HTML 4)
<SUP> (attribute - HTML 4)
<TABLE> (attribute - HTML 4)
<TD> (attribute - HTML 4)
<TEXTAREA> (attribute - HTML 4)
<TH> (attribute - HTML 4)
<TR> (attribute - HTML 4)
<TT> (attribute - HTML 4)
<UL> (attribute - HTML 4)
<VAR> (attribute - HTML 4)

The Catch

There is however a downside to using the Title attribute, many browsers display the text contained as a "tool tip" - the text that appears when you hover the mouse over an element.

It would be perfectly acceptable code to place a title attribute in the table, th, tr, td, and tfoot tags; but there's a real risk of the tool tips becoming overwhelming and overlaying the content the table contains. The title attribute should be used with some discretion.

The Summary Attribute

The summary attribute is used with the <TABLE> tag. It uses the same format as alt and title.

<table summary="chart of HTML tags that use the title attribute">

I would recommend using the summary attribute as some HTML validators treat this attribute as required and will give warnings if it is not included. I would further recommend that when using the summary attribute, you do not also use the title attribute as it would only be redundent.

The SEO Benefits

The Alt and Title attributes, when used carefully can positively impact your website's position in the search engine results. They both provide the web page programmer with the opportunity to further target particular keywords and phrases. While putting a title attribute in all of the tags listed above is within the guidelines of the HTML programming specification, I can't imagine were you to do so that Google and the other search engines would not see it as keyword stuffing - not to mention how bad all those tool tips would make the page look to the site visitor.

Scatter some alt and title attributes throughout your webpages to take advantage of the SEO boost they can bring; just don't get over-zealous and put them everywhere. I would strongly recommend that every with every image you should use either the alt or title attribute - both is overkill.

Be sure to check out Help For Web Beginners other HTML & CSS Tutorials.

About the Author is a website dedicated to providing free, easy to understand, online How To's for true web beginners. While the materials are not free or available for reprints, they are offered freely for individual use. Please use the contact page to let Michele know if this tutorial has been helpful or if there are any other beginner web programming related tutorials you would like to see.