A little background: The alt tag (or alt attribute — the proper name) replaces web site images for someone not able to view them. Such as blind people or dumb search engines.
Alt tags are found in the html code that controls display of graphics. The tags were designed as an aid for people with text-only browsers or those with crappy dial-up connections who turned off the slow-loading graphics. (Ah, the bad old days.)
The alt-whatever also serves people with disabilities. The computer’s audio text application reads them the image description. Say (in a weird electronic voice), “Bill Clinton swears on a Bible.” Upstanding netizens do a public service by writing accurate descriptions. Those who don’t flirt with severe karma.
The Internet standards gurus say the text content “must be an appropriate replacement for the image,” as in an alternate (alt) way of conveying the visual content.
So an alt tag that says “sales pie chart” is useless, while “vinyl sales up 41% in 2014” conveys the info. You don’t have to, but in this case I like minimal descriptive wording as well: “chart shows vinyl sales up 41% in 2014.”
SEOs love the alt attribute because it provides keyword information to the search engines — the words we old-timers used to cram into the meta-keyword space. The trick is to use a targeted keyword or two while still describing/replacing the image.
While similar, alt tags are not the same as captions, which are displayed to the reader and may enhance or explain the visual content (Bill Clinton, left, swears on a Bible as wind swirls.) For various reasons, I tend to avoid captions on the Web.
The alt tag’s frequent companion is the title attribute, which is automatically assigned the file name in WordPress and other content management systems. (Sometimes the alt area gets this info automatically as well.) In WordPress, the media loader has a separate field for “Alt Text.”
Google has this to say about titles and alt text:
We generally concentrate on the information provided in the “alt” attribute. Feel free to supplement the “alt” attribute with “title” and other attributes if they provide value to your users!
Translation: Forget the “title.”
Here’s how to manipulate the alt attribute in html, assuming the code been generated for you:
Upload the photo and place it. Dig into the code string that results. Look for this: alt=””. The micro space between the quote marks is yours for keyword-friendly descriptions. Four-12 words please. (Make sure the quote marks remain on both sides.)
About image names: If your jpg file is named “headshot-29” or “archive-photo,” no one benefits. Be descriptive (but minimalist) here as well.
So the savvy and righteous path looks something like this:
- Give images destined for the Internet a descriptive file name such as “shecky-greene.jpg”
- Write an alt tag that could substitute for the photo: “Shecky Greene eats cake in Las Vegas”
It takes discipline to consistently write good alt lines, especially when the post has other time-consuming elements. Wish I could say I was 100%, but please don’t report me to this guy:
Very nicely explained about the alt tag of image tag and its purpose. Thank you for sharing this post.