To create engaging and link-worthy content for your website, you shouldn’t rely entirely on text. Research shows visitors stay longer on pages with both text and images.
Just a few relevant images can increase your website’s average session duration while lowering its bounce rate in the process.
If you’re going to include images in your website’s content, though, you should optimize them using the alt and title attributes.
But what exactly are the alt and title attributes, and what’s the difference?
What Is the Alt Attribute?
Also known as alt text, the alt attribute is an HTML- and XHTML-supported attribute that describes an image in plain text. It’s not displayed in or alongside images. Rather, most visitors will only see the alt attribute if the image with which it’s used fails to load.
Maybe the visitor is using an outdated web browser, or perhaps the image file was deleted from your website’s server. Regardless, if an image doesn’t render or otherwise load for a visitor, he or she will see its alt attribute.
<img src="image.jpg" alt="This is an alt attribute">
In the example above, if
image.jpg fails to load, users will see something like this:
The alt attribute was introduced as an optional feature in the second major version of HTML to improve the accessibility of website content, particularly for visually impaired users who rely on screen reading software to browse the web.
Around the turn of the 21st century, when the fourth major version was released, HTML included the alt attribute as a validity requirement. If an image doesn’t have an alt attribute, the page on which it’s located won’t pass the World Wide Web Consortium’s (W3C’s) validation checker.
With that said, WordPress and other content management systems will typically allow you to upload and embed an image into your website without using the alt attribute. When you add an image to your website, the CMS will automatically add a blank alt attribute to it.
Without any text, though, the alt attribute won’t benefit your website.
What Is the Title Attribute?
Also known as title text, the title attribute is another HTML- and XHTML-supported attribute used with images. It’s intended to provide visitors with additional information about an image via a hover-over tooltip.
When a visitor hovers his or her cursor over an image, a small pop-up box will appear featuring the image’s title attribute. When the visitor moves his or her cursor back off the image, the pop-up box will disappear.
<img src="image.jpg" title="This is a title attribute">
For example, if you hover your mouse over the image below, you should see our title tag, which reads “An adorable pug puppy stares into the camera.”
Neither HTML5 nor any earlier generations of HTML require images to have a title attribute. It’s an optional attribute that holds less weight than the alt attribute.
Some webmasters, in fact, only use the alt attribute while ignoring the title attribute altogether.
Alt Attribute Benefits
Each image on your website should have an alt attribute, for a variety of reasons.
Without this snippet of code, your website’s HTML will be invalid. And while invalid HTML may not cause any immediate concerns, it could restrict your website’s ability to grow.
To seamlessly scale your website, you must build it with valid HTML, which among other things, involves the use of alt attributes.
Giving images an alt attribute also makes your website more accessible to visitors.
According to the Centers for Disease Control and Prevention (CDC), approximately three out of 100 U.S. adults are either legally blind or visually impaired. Many people who suffer from visual impairment still use the Internet, typically with the assistance of text-to-speech software.
Whether it’s desktop or cloud based, most text-to-speech software is capable of reading alt attributes. The software converts all types of website text, including alt attributes, into speech. As a result, visitors who suffer from visual impairment can comprehend your website’s images if you give them relevant and descriptive alt attributes.
Even if a visitor has perfect 20/20 vision, he or she may not be able to see your website’s images. Some internet users prefer text-based web browsers over conventional browsers like Google Chrome and Mozilla Firefox.
Lynx, for instance, is a popular text-based web browser with origins dating back to the early 1990s. Developed by a team of software engineers at the University of Kansas (UK), it only displays text—no images or other rich media.
Therefore, visitors using the Lynx web browser—or any other text-based web browser—won’t be able to see your website’s images.
The good news is Lynx is capable of displaying alt attributes, assuming you add them.
Search Engine Optimization (SEO)
In addition to improved accessibility, using the alt attribute can increase your website’s performance in the search engine results pages (SERPs).
According to Moz, the use of alt attributes is an on-page ranking factor.
With the exception of visually impaired visitors who use text-to-speech software, most visitors will never see your images’ alt attributes. Search engines, on the other hand, will analyze alt attributes when crawling your website.
When Google and Bing crawl your website, they’ll look at the alt attributes to better understand your site’s content. Search engines don’t just analyze visible text; they analyze hidden text as well.
By creating SEO-friendly alt attributes, you’ll help search engines decipher your site’s images so that they can rank it appropriately in the search results.
Best Practices For Alt Attributes
Here are some best practices to follow when creating alt attributes:
- Give each unique image a unique alt attribute.
- Describe the people, animals, objects, landscapes or other visual elements conveyed in the image.
- Limit alt attributes to no more than 125 characters.
- Because alt attributes affect search rankings, try to include your target keywords in them.
- Use complete sentences with proper punctuation.
- Proofread alt attributes for spelling and grammar mistakes before publishing.
- Avoid using unnecessary words such as “graphic,” “picture” or “photo.” Since the alt attribute is exclusive to images, mentioning these words is redundant.
- Avoid stuffing irrelevant keywords into alt attributes.
Title Attribute Benefits
Unlike the alt attribute, the title attribute isn’t a direct ranking factor, nor is it a requirement for valid HTML. However, it still offers benefits when properly used.
You can use the title attribute as an alternative to captions.
Captions, of course, are typically displayed directly below images. But if you’re uploading an image to complement an article or blog post, you may not want the additional text of captions, in which case you can use title attributes.
Visitors will only see the title attribute text when hovering their cursor over the image, thereby promoting cleaner website content that’s not riddled with caption boxes.
Calls To Action
The title attribute can be also be used to display a call to action (CTA).
If you sell products on your website, you can give “shop now” or “add to cart” buttons a CTA title attribute, such as “click now to begin shopping” or “click here to add [PRODUCT] to your shopping cart,” respectively.
When visitors hover their cursor over the button, they’ll see the actionable alt attribute, which may compel them to click it.
Although it’s not a ranking factor, title attributes can contribute to higher search rankings when used correctly.
If you create engaging title attributes, visitors will likely spend more time on your website. As visitors linger, search engines will identify your website as being popular among its audience, which may trigger their algorithms to rank it higher in the search results.
Best Practices For Title Attributes
Here are some best practices to follow when creating title attributes:
- Keep title attributes short to improve their readability.
- Format title attributes as phrases rather than complete sentences.
- Split test different title attributes for images to determine which ones drive the most visitor engagement and which ones drive the least.
- Don’t force a title attribute into images that don’t need one. While all your website’s images should have an alt attribute, they don’t all need a title attribute.
Don’t Forget the Filename
Along with the alt and title attributes, you should consider optimizing the filenames of your website’s images.
Whether you take a photo yourself or download one from a stock photo website, it will probably feature a long and nondescript filename.
Search engines have drastically improved their ability to analyze website content over the years, but they still struggle to decipher visual content, including images. You can give Google and Bing a helping hand by renaming your images with relevant and descriptive filenames.
Before uploading an image to your website, change its filename to reflect what it’s about.
To change an image’s filename in Windows or macOS, simply right-click it and select the “rename” option. You can then enter a relevant filename that better describes the image. After renaming the image, upload it to your website as normal.
Keep in mind that while Windows and macOS allow you to create spaces in filenames, not all web browsers support them. Some web browsers automatically fill spaces in filenames with characters. Other web browsers truncate filenames once they encounter a space. To err on the side of caution, use either underscores or hyphens to separate words in image filenames.
The alt and title attributes are two commonly used HTML attributes for images. The former is intended to describe an image, whereas the latter offers additional information about an image in the form of a hover-over tooltip.
Search engines will read both attributes when crawling your website, but they’ll only use alt attributes in their ranking algorithms. Regardless, optimizing both the alt attributes and title attributes can help your website succeed.
If you have any questions about alt attributes or title attributes, please feel free to leave a comment below!