Rails - Mar 2009 - Images and Alt Tags Acheiving Better Search Engine Ranking

Many years ago, my sister asked me to look at the Google <a
href="http://images.google.com/">Images search</a>
. When I first saw the page, I thought Google was offering a place for
freebie photos before I realized that it was probably searching for and
finding the "alt tag" text written in the HTML for website images.
"Alt
tags" or "alt text" refers to a bit of descriptive data that web
developers often (and should) include with images on their websites for
various reasons explained below. Anyway, I found myself explaining the
image alt tag and thought the topic might be a worthwhile tutorial on
the subject.



Inside the Alt Tag

Virtually all web pages today are comprised of text and images. Browsers
display this information by following instructions written in a special
markup language called HTML. When an image is to be displayed, the HTML
code for that image must contain directions to the server on where that
image is located. The image is then retrieved from that location and
displayed in the web browser. The code might read: <img
src="http://www.thunderdata.com/uploads/TDSNew/google.gif" />

<img src="pix/mammamaria.jpg">

The <img> tag acts as an instruction to the server to go to the source
of the file, in this case, the "pix" directory, find the image called
"mammamaria.jpg", and send that image to your computer''s
browser. Proper
HTML code adds additional information:

<img src="pix/mammamaria.jpg" width="257"
height="329">

These attributes contain dimensional information which allow your
browser to hold a properly sized area open so the fast loading text is
formatted around the picture while the slower loading image downloads.
Missing dimension attributes are noticeable on slower loading websites
when text shifts in the browser window as the images begin to appear.
(Fast cable and DSL speeds have made this a problem of the past.) When
those dimensional attributes are missing, the browser has no way of
knowing in advance how much space to allocate for an image. On dial-up
connections, you will notice that the text shifts as the images begin to
appear, which can be annoying while reading. Therefore, proper code will
format the page in advance for a more professional appearance.

Now, for the alt attributes. They look like this:

<img src="pix/mammamaria.jpg" width="257"
height="329" alt="Snowing -
North End, Boston">
Notice the additional attribute--alt. What does the alt attribute or tag
do? Hover your mouse over the image to the left. Do you see the little
text box pop up? See what it reads? Does it look familiar? :)

Alt tags are good coding for several reasons:

    1. Alt tags let visitors know an image is being formatted before it
is displayed. Like the text visitors read as they wait, they can
anticipate the image before it appears.
    2. Alt tags aid visitors who can''t see the image whether they are
Lynx users--a text based browser on Unix or Linux systems that has no
image capability, or users who have images turned off in their browser
preferences, or visitors who are visually impaired. Aids for the blind
include readers that can tell them the image''s text description and
allow them to understand accompanying information about your images. One
warning: if our example above had the alt text, "pic1a.gif", it would
be
meaningless for our visually impaired visitors. No description of the
image provides no benefit about the image itself!
<img
src="http://www.thunderdata.com/pmwiki2/pub/skins/tds/pix/mammamaria.jpg"
/>



    3. Search engines can only read text. Images with alt tags allow
search engines to match the description to the site''s content possibly
aiding in search engine rankings. Hence, the Google <a
href="http://images.google.com/">Images search</a>


So, hover over the images in your website. Do they have the important
alt text included? At Thunder Data Systems, we adhere to proper coding
standards! If your web developer is not following fundamental and sound
web design practices, you should consider talking to our design team.


<a href="http://www.propertyind.blogspot.com/">My Blog</a>
-- 
Posted via http://www.ruby-forum.com/.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

<…>
> Inside the Alt Tag
There is no such thing. Once again: alt is the attribute.
There are elements, tags, and attributes. They mean different things.

> Notice the additional attribute--alt. What does the alt attribute or tag
> do? Hover your mouse over the image to the left. Do you see the little
> text box pop up? See what it reads? Does it look familiar? :)
No, I don''t see it. That''s because only Internet Explorer
shows alt attributes
as tooltips, and it has been fixed in IE8:

"The alt attribute is no longer displayed as the image tooltip when the
browser
is running in IE8 mode. Instead, the target of the longDesc attribute is used as
the tooltip if present; otherwise, the title is displayed."
Source: http://msdn.microsoft.com/en-us/library/cc288472.aspx#access

If you want to see tooltip, use title attribute (most browsers show
this attribute as tooltip)
for that: http://www.w3.org/TR/html4/struct/global.html#adef-title
> So, hover over the images in your website. Do they have the important
> alt text included? At Thunder Data Systems, we adhere to proper coding
> standards!
<…>

Good for you. Next step would be to stop calling attributes tags,
using validator
to check your code for adherence to standards (alt attribute is
required in HTML4,
so missing it will make code invalid. For purely decorative images alt
should be set
to empty string: alt="", better yet, these images belong to CSS, not
HTML), and
remembering other browsers out there in which hovering over does not work.


Regards,
Rimantas
--
http://rimantas.com/

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---