Though they are sometimes neglected, images can be an important part of search engine optimization efforts. Images can be anything from a submission form button to a panoramic picture of a vacation destination. Each image on a website has several ways in which it can be optimized to help contribute to the search engine optimization process.
Image File Name
The filename of the image can be used to identify what the image is about. For example, if the image is of a blue widget, then the image file could be named ‘blue-widget.jpg’. Of course, you have to keep in mind that though this practice can be useful, it can also be detrimental to SEO if it is overdone having a file named ‘blue-widget.jpg’ if perfectly fine, but naming it ‘blue-widget-is-great-for-doing-what-widgets-are-made-for.jpg’ is not. As a rule of thumb, use the minimum number of words in a filename necessary to describe what the image contains.
Image Alt Attribute
<img src=”blue-widget.jpg” alt=”Blue Widget” />
The image Alt Attribute was designed to allow web developers to including a description of the image within the code in case an image is not available to load, or if the browser being used to view the page is not capable of displaying images (i.e., text-based browsers, and screen readers).
Here we can see that the alt attribute added to the blue widget image describes the image in a succinct yet useful way. Some variations the alt attribute that are better left unused:
- alt=”Best prices on blue widgets” (this does not describe the image)
- alt=”This is the picture of a blue widget” (it has extraneous and redundant information)
Don’t stuff your alt tags with keywords, but instead, try to make them as useful as possible. Another way of trying to decide which alt attribute is good and which is bad is to realize that screen readers (tools for making web pages accessible to the visually impaired) utilize the alt tag to provide a description of the image to the user. So make your alt attributes are short and descriptive, so that if you could not see the image and the alt attribute was reading to you outloud, the description would be useful.
Image Title Attribute
<img src=”contact-button.jpg” title=”Request an SEO Quote”>
The Title Attribute is a combination of HTML and wording added to HTML tag (e.g., images, links, block level elements) and provides supplementary information (in the form of a small pop-up) when the user’s cursor hovers over the subject element. For example, if you have a ‘Contact Us’ button on your page, you can use a Title attribute to briefly explain what type of contact form the user will see when they click on the button.
Images can be used to create navigational links within a website, and can contribute to the optimization of the internal linking structure. Since images have no textual information that the search engines can ‘read,’ the search engine spiders use the Alt (and to a lesser degree the Title) attribute to determine what the image link is about.