When you’re browsing a website that uses images to direct and inform the viewer, you’re not getting the entire picture when it comes to content optimization. If you’ve at least dabbled in HTML coding, you’ve encountered the “alt” attribute attached to images. The “alt” attribute is designed to replace images with text that explains what’s in the image or what clicking on the image does.
An example image tag with an “alt” attribute looks like this:
<img alt=”picture of something” src=”image url”>
This is a great feature for when images fail to load, but it’s fairly uncommon for images to fail to load, which makes it easy for web designers and content writers to fall in the habit of omitting “alt” because it’s rarely seen in use. This field is essential for programs that are analyzing a webpage but can’t interpret image visual content. For example, if you use JPG images to display your site’s navigation area, a person who can see the images understands it, but something like Bing’s web crawler may not understand that the image says “home.” However, if the alt attribute has the value “home” on it, the crawler will be able to understand it.
The “alt” attribute is vital to Search Engine Optimization. Programs like web crawlers, which index websites for search engine reference, rely heavily in the “alt” attribute to interpret and rank content. For example, if two similar websites feature the same quality content, but one uses “alt” attributes on images that are related to the content while the other does not, search engines are likely going to favor the one that uses the “alt” attribute. It’s particularly important to include “alt” attribute text if you use image-based navigation because it helps search engines understand your site hierarchy and structure. Without the “alt” attribute, the program can only assume the link is random.
Every image doesn’t need to give “alt” a value. For example, if you have a decorative background JPG or are using a stylish-looking PNG file to break up text in an article, these images are merely decorative and do not add any content value to page. Utilizing the “alt” attribute on this content may actually confuse the programs and count against you. You can either leave the attribute out or put nothing between the quotation marks.
Text-only web browsers like Lynx are extremely useful tools for understanding how a program sees your website content. After your website is up and running, try navigating around it and reading content using Lynx. If you’re having a difficult time getting around or understanding what’s going on in articles it means that web crawlers are also having a difficult time interpreting your site. Take what you learned from Lynx and use “alt” attributes on images to optimize your content. If your site uses an image for its logo or title, make sure that it includes an alt tab. It’s also good to have your logo or title “alt” text appear as soon as possible on the page.
As an added bonus, “alt” attributes are great for screen reader devices, which help expand your audience to people with blindness because screen readers can’t make sense of images.
Dan S is a former news journalist turned web developer and freelance writer. He has a penchant for all things tech and believes the person using the machine is the most important element.
