Even with new search engine optimization trends, the statement that a picture is worth a million words still holds. A single high-quality image can potentially breathe life into a website’s content. Further, a well-written HTML img title is a sure way to improve user experience.
But if you thought pictures are all about matching content and images, you are in for a surprise. You can use images to appeal not only to web visitors but also to search engines. But to unleash the full power an image presents, you must peek a little under the hood and understand the HTML code that displays images on your website.
Once you review an image tag’s components, you can move on to optimize those that will affect your search engine rankings. Usually, the items to target are the img src title and HTML img alt title. Do you know the part these two play on your website? The answer will be the subject of this article.
Understanding the Image Title and Image Alt Text
The easiest way to know the difference between a title and alternative text is by looking at an HTML image tag. Say your website is an online shop selling furniture, a sample tag about a rocking chair image may look like:
img src=”rocking-chair.jpg” alt=”brown rocking chair on sale” title=”brown rocking chair”
In web design, the items with an equal sign get the name attributes. Note that the example above is only an illustration. In real-world applications, the attributes are way more and may include a class, an id, height, width, et cetera.
From the tag, identifying the alt text and title is straight-forward. You might note that the alt attribute is more informative compared to the HTML title image tag. A glance at the uses of both attributes reveals why this is so.
What Is The Image Title Used For?
The title appears when a user hovers over an image on your website. Thus, it appears only after images load. By the time a user sees the title, they have already viewed the image. As such, it does not have to be very descriptive. For example:
However, titles are quite important when it comes to improving user experience. Believe it or not, visitors may have difficulty understanding why some pictures on your website appear in certain parts of your site. A title comes in handy to provide an answer.
Some browsers do not display the title after hovering over an image. But since you never know what your visitors will use to navigate your website, you are better off including a title attribute in your image tag.
What Is The Alt Text Used For?
The alt text serves more than one purpose. You can break it down as follows:
- The alt text displays every time an image fails to load. Almost all browsers allow alternative descriptions to represent empty images. It may be due to an incorrect image file name or a broken URL. Poor internet connections may also prevent the proper loading of pictures. In such a case, the img alt title shows up and explains to the visitor all about the image.
- The alt text also displays when users turn images off. As much as images beautify web pages, some users prefer text-only versions. Thus, they can know about pictures by reading the alt text.
- Blind users also benefit from well-written img alt titles. Screen readers use them to describe an image to visitors who cannot see it. Generally, alt texts help increase the accessibility of your site. The importance of maximum accessibility is so great that W3C advocates for alt texts. A line from their guidelines reads: “When using the img element, specify a short text alternative with the alt attribute.”
- Finally, search engines use alt texts to get a better understanding of what an image is about. Thus, alt texts are crawlable, just like other content on your website. The image below shows an example of alt text:
(Image Credit: MDN-Mozilla)
What Is More Important: Image Title Or Alt Text?
It is safe to label the alt attribute as more important after looking at the lists of uses of titles and alt texts. However, it would be a mistake to think that titles are useless. In truth, either item can be significant depending on your goals.
If your major concern is improving user experience, then titles would be your main area of focus. As mentioned, you can give additional details about a picture using titles. Once a user hovers over it, the description should pop up.
You will be interested
But why don’t search engines pay much attention to image titles?
Well, the answer has much to do with the development of search engines. Developers wrote most of Google’s code-base back in 1999. There were also significant additions the next year. However, they never considered unpopular and undiscovered HTML elements. As web designers did not use titles frequently, there was no reason to provide for them. Updates to the core code never made the HTML title image tag as important as other attributes.
If you are thinking about SEO, then your focus should be the alt text. Remember, Google treats the information within the alt attribute as regular web page content. Thus, it indexes it. Additionally, search engines may have a problem crawling an image. Alt texts present an excellent way for them to know what an image is all about.
Further, alt texts take website accessibility to a whole new level. Despite techniques such as lazy loading, it is almost impossible to ensure that all images on your site will load 100% of the time. A visitor may turn images off or have a connection so slow that pictures never load. Armed with an alt text, you can be sure that a user will know what a picture is about whether it loads or not.
Conclusively, the importance of alt text surpasses title attributes by far. Their uses are relatively numerous, and their impact on a website’s ranking is noteworthy. While it is important to optimize both the title and alt text, it is good to place more weight on the alt attribute’s information.
Optimizing the Alt Text for SEO
SEO remains to be one of the surest means to drive high-quality traffic organically. While there are numerous ways to optimize a website, perfecting the alt text is ideal for setting up your site images for greater traffic. Luckily, the process is straight-forward. Some of the practices to put into consideration are:
Test your site’s SEO and performance in 60 seconds!
Good website design is critical to visitor engagement and conversions, but a slow website or performance errors can make even the best designed website underperform. Diib is one of the best website performance and SEO monitoring tools in the world. Diib uses the power of big data to help you quickly and easily increase your traffic and rankings. As seen in Entrepreneur!
- Easy-to-use automated SEO tool
- Keyword and backlink monitoring + ideas
- Ensures speed, security, + Core Vitals tracking
- Intelligently suggests ideas to improve SEO
- Over 250,000k global members
- Built-in benchmarking and competitor analysis
Used by over 250k companies and organizations:
Write for Humans
When it comes to writing alt texts is, the rule of thumbs is: “write like you are writing for a blind person.” Considering the occasions when alt text displays, observing the rule at all times does no harm. As mentioned, the information contained in the img alt title shows up when images cannot display. Thus, you want it to tell everything about the hidden picture.
As such, write a statement that a human can read and understand. More importantly, compose a descriptive sentence. A blind person may be navigating your site, and what you typed would be the only thing to go by. The image below shows a good and a bad example of alt text for the same picture:
(Image Credit: Web Hosting Hub)
Write for Search Engines
An alt text does not only provide an image description to users but also to search engines. Thus, include a keyword in it. Like other content, be sure to note that it contains a keyword that rhymes with the general flow of the web page the image is in.
On the same note, keep off poor SEO practices such as keyword stuffing. Search engines will flag your content as spam, which keeps your ranking down. It is better to write an alt text poorly than to keyword-stuff it. As a check, ensure that you do not use the keyword in more than 70% of your images.
Keep It Short
The alt text describes an image, and it may be tempting to put a lot of words in the alt attribute quotes. But refrain from doing so. Search engines will not punish you for it, but their interest is in the first sixteen words of the alternative description. A 125-character alt text should adequately describe an image without compromising user experience.
However, if you feel that an image requires a long description, it is wise to use the “longdesc” attribute. HTML4 and its successors allow this attribute in the image tag.
Alt Text Examples
When you are just getting started with SEO, it may be a little difficult to understand the difference between a good and a poorly written alt text. Thus, looking at examples comes in handy. For illustration purposes, imagine an image of a red speeding car on your website.
Your image tag can look something like:
img src=”speeding-car.jpg” alt=”red car” title=”car”
In such a case, the alt text is not ideal. It provides very little information regarding the image. A better version may appear as:
img src=” speeding-car.jpg” alt=”red car speeding on a highway” title=”car”
If you happen to know the highway’s name, there is no harm in mentioning it on the alt text. At all costs, avoid compromising your keywords or keyword stuffing. For example, if the key phrase of your webpage is “red car,” keep off a description like:
img src=”speeding-car.jpg” alt=”This is a red car. The red car is moving very fast and is such a beautiful red car” title=”car”
While the description above focuses solely on the image, keyword stuffing taints it. Search engines will frown upon such spammy phrases. The second sentence fails to provide useful information about the image to the user. Accordingly, the astute thing to do is to exclude it.
How to Add an Alt Text
The procedure of including an alt text in the image tag depends on what you used to create a website. If you wrote the website’s hard code, it is better to add the alternative attribute manually. For example:
However, today’s web development hardly involves any hard coding. The chances are that you used a content management system (CMS) or a web site builder. Be sure to find out what process your web design tool uses when adding all texts. Usually, the methodology features two or three steps.
In the world’s most popular CMS, WordPress, adding an HTML img alt title is a walk in the park. Once you log in to your account, locate the image in question and click the “Edit” button. An input field appears ready to receive the alternative attribute’s data.
You may include alt texts in WordPress’s media library. After selecting an image, locate the alternative description input field displays below the image attachment details. For instance:
(Image Credit: WPBeginner)
When to Leave the Alt Attribute Empty
Given the significant part alt attributes play in SEO, you might find it hard to believe that it is sometimes a good idea to leave them empty. Picture an image placed on a website for positional purposes only. The image neither rhymes with the content nor adds value to it. A web designer may use such imagery with the sole purpose of decorating a page.
Such design-only images may have a null alternative attribute. Describing them would be imprudent as they do not add value to the available content. Screen readers will skip over the images, which is in order since they do not help the user understand the page better.
It is also a good practice to exclude the alt text for images that contain words. All the information is on the image. A description of the words would, therefore, be irrelevant.
Optimizing the Title
As the title does not affect the search ranking, there is not much to do about it. In most cases, it is shorter and less descriptive than the alt text. Rather than giving more information about a picture, a title gives it a name.
However, W3C openly advocates for a title’s inclusion in an image tag. Your HTML code may be W3C-invalid if you fail to title your pictures.
When writing the title, compose a text that is not only short but also catchy. That said, single-word titles are a no-no. A phrase that describes an image and consists of not more than ten words should suffice. For example:
Unlike the alt tag, which you may leave out at times, there are no special occurrences that warrant the exclusion of image titles. Untitled images only serve to compromise user experience. Consequently, it is in the best interest of any SEO specialist to not render a null HTML title image tag.
We hope that you found this article useful.
If you want to know more interesting about your site health, get personal recommendations and alerts, scan your website by Diib. It only takes 60 seconds.
Other Image Considerations
Indubitably, there is more to images than alt texts and titles. Optimizing the former and perfecting the latter is only part of the equation. To fully exploit the impact of images on SEO, consider the following web imagery best practices:
Keep Vital Text Data off Images
It is better to write words than paint them on an image. Remember, search engines do not crawl an image in-depth and cannot access words in an image. Unless HTML fails to output text data the way you want, for example, when writing complex chemical equations, avoid word-filled images.
However, there is no harm in using pictures to display graphs. HTML may provide the functionality, but images are a superior solution.
Mind the Context
The image you display should blend with the information a section provides. It would be a bad idea to include a car image on a page that discusses outdoor clothing. At the same time, let your images be as original as possible. Search engines value original pictures as they value authentic content.
Write a Good Image Filename
Filenames appear in the img src title attribute of the image tag. Search engines use it to know more about the images on your site.
By default, images have alphanumeric filenames, such as:
Be sure to change names so that they reflect the contents of the picture. While at it, remember to hyphenate filenames that exceed one word. A name like red-car-on-highyway.jpg would be difficult for search engines to read if the hyphens are missing. However, do not change the image format, that is, letters after the period. Browsers may get confused if a format is different from the one given by the file name.
Let Your Images Create the SEO Difference
When it comes to SEO, there is no argument that content is king. But images are as much a part of your website’s content as words are. By learning the art of perfecting the HTML img title and optimizing the HTML img alt title, you can start using images to increase your site’s ranking.
Diib®: Optimize Your Image Titles Today!
If you get stuck with using images for SEO, remember to check out the hundreds of tools dedicated to optimizing pictures. You may also engage an SEO specialist to help with your website as you focus on your business. But before you think that far, take the first and start using images to increase traffic on your own. Then, partner with Diib Digital to get the most out of your image titles. Our User Dashboard will give you alerts and objectives designed to optimize, among other things, your image titles.
Here are some of the features that set us apart from the crowd:
- Customized Objectives designed to enhance website performance
- Alerts that tell you about your Domain Authority other technical SEO issues
- Broken pages where you have backlinks (404 checker)
- Keyword, backlink, and indexing monitoring and tracking tools
- User experience and mobile speed optimization
- Image title optimization
- Platform specific post performance
Click here for your free scan or simply call 800-303-3510 to speak to one of our growth experts.
Image optimization is definitely a part of a good SEO strategy, however, it is often overlooked.
ALT text or ALT attribute is the important text associated with the image and is the part that tells Google what your picture is all about. The Title tag or text is what a user sees when they hover over the image.
First off all, make sure your target keywords are found in your image title. Make sure the images are saved in the right type of file so they are easily downloaded and viewed.
Hover over the image with your mouse, the right click and choose inspect from the quick menu. A new window will open with the HTML code highlighted for that specific image. Here you can view the alt text and other image attributes.
In the “Insert” menu and “Image” to add your image. Select the image. Then the “Image Option” dialogue box appears. Use the “change” link. You can either choose the page you want to link to or go to the web address tab and add the desired URL.