Alt Text For Images: What Is It And How To Write It Correctly
What Is Alt Text?
Alt text is an additional attribute of images and some other multimedia elements of your website. It contains a short description of the image that gives an idea of its content and importance for the page functionality. It is also called an alternative attribute, an explanation, or an alt tag, although the latter term is technically incorrect.
Alt text is written in HTML code or in the settings of your content management system (CMS). It is usually invisible to the user. Most often, this element appears in the interface when the browser cannot load multimedia elements owing to a server failure or a slow Internet connection.
Moreover, alt text can be used as a tool for accessibility and inclusivity. It is what a text-to-speech tool reads to describe a picture for a visually impaired user. If you have some experience in SEO, you understand that it is a vital factor for search engines.
Why Is the Image Alternative Text Important?
One of the most common mistakes SEO beginners make is forgetting about alternative text altogether. It seems insignificant, but it can cause serious problems, especially if your site is built around multimedia content. Let’s look at the mechanisms of this element’s influence on SEO.
Accessibility
One of the priorities of modern versions of search engines is equal access to the Internet for everyone. Robots automatically increase the rankings of websites adapted for people with disabilities. Text-to-speech is one of the key tools for inclusivity for people with visual impairments. It allows you to get all the necessary info using text-to-speech tools. Therefore, we can draw the first conclusion: the alternative text should be short but as informative as possible.
User Experience (UX)
Although we live in an era of technological innovation, the occasional problem has not been canceled. A hacker attack, a server crash, a sudden Internet speed drop, and other unexpected events can block the image from being uploaded. Given the widespread use of multimedia elements on the modern Internet, this can put the user in an awkward position.
Imagine the situation: the login and registration buttons on your website’s homepage have disappeared. It’s unpleasant, yes, but you can still save a significant portion of your conversions. To do this, you will need to write the image alt text correctly. This will satisfy both visitors and the search engine, which gives you extra points for UX. Another conclusion: the alt text must be as useful and clear as possible.
Image Traffic
Think about how much time you have to spend to find a high-quality image that exactly matches the topic of your query. Moreover, you can remember not only your irritation but also your happiness of seeing some images appear literally in the first line of a Google search.
A lot depends on the alt text. For example, you have posted a very beautiful image of the sunset over the sea coast. You can describe it in different ways:
- Sunset over the beach – for a website with stock images.
- A picturesque sunset in Florida – for an info page.
- A view of the sea from a hotel – for a travel resource.
It all depends on what search query you want to display the image. So, another conclusion is that the alt text should match the user’s intent.
How Does It Affect SEO
The need to make the Internet accessible to everyone on the planet was written in the minutes of the 1999 W3C conference. The authors of the proposal recommended adding alt tags in HTML to convey the image essence for both people with disabilities and users with a slow Internet connection. This element has stood the test of time and is now considered mandatory for all web resources.
If you forget or ignore the alt text, you will send a signal to search engines that you are interested neither in inclusion nor UX. This will result in a penalty. You will lose a few points in the page ranking. If you have the same SEO characteristics as your competitor, you will get a lower rank in search results.
As a result, you will receive less traffic, lower conversion rates, and a wasted optimization budget. Consequently, you should carefully consider the recommendations of the World Wide Web Consortium (W3C). To get a better chance of success in any market niche, you should add alt text for all multimedia elements that require it.
How to Add Alt Text for Images
Although there are many automation tools available now, some developers and webmasters perform most of the work manually. This option has its advantages, especially in the context of training or professional development. Therefore, you should know how to add alt HTML tags.
According to W3C recommendations, you should use the following syntax:
<img alt=“text”>, where text is an alternative description of the image.
The “alt” tag is used together with a link to the image and its size limit. An example of a complete line of HTML code looks like this:
<img src=“your_image.jpg” alt=“Majestic sunset in California” width=“320” height=“240”>.
Important! If you want to create an instruction for an interactive element that appears when you hover over an image, you will need the “title” tag. The syntax for it looks like this:
<img title=“text”>. The “title” tag is not considered an alternative to the “alt” tag. Its presence does not affect SEO in any way. The only advantage it provides is a positive UX.
If you use CMS, there is a more convenient way to add alt text to code of your website. Let’s take a look at how it works in popular CMSs.
How to Add Alt Text in WordPress?
- Left-click the image – a control panel appears on the right side of the screen.
- Find the empty field labeled “Image Settings.”
- Enter the alt text.
- Click the “Update” button in the upper right corner of the screen.
How to Add Alt Text in HubSpot?
- Left-click the image.
- Click the “Edit image” button in the form of a pencil.
- Find the empty field labeled “Alt text.”
- Enter the alt text.
- Click the “Apply” button at the bottom of the pop-up menu.
How to Add Alt Text in Joomla?
- Right-click the image.
- Click the “Edit image” button.
- Find the empty field next to “Image Description” in the menu.
- Enter the alt text.
- Click the “Update” button located at the bottom right.
Image Alt Text Best Practices
The mere presence of this element gives your resource no advantages. To use alt text in SEO effectively, you need to know how to form it correctly. This is where the best practices of experienced SEO specialists come in handy.
Keep it Short
W3C engineers recommend limiting your caption to 125 characters with spaces. Longer captions may render incorrectly if there is no image. Moreover, search engines consider them spam and an attempt to violate the rules of fair competition. Therefore, by stretching the alternative description to the image, you risk worsening the UX and getting penalized when the page is indexed.
Avoid Using “Picture of…” or “Image of…”
Forget about the words “image of,” “picture of,” “shown here,” “drawing,” etc. They take up space, but both ordinary visitors and search crawlers ignore them. When writing alt tags, get to the main point right away. For example, instead of “a picture of a cat sleeping on a blanket,” use the phrase “a cat sleeping on a blanket.”
Use Keywords but Avoid Keyword Stuffing
The collected keywords will be useful not only for optimizing the main part of the text content but also for writing alternative descriptions. Remember to include keywords and phrases in them but do not spam. Moreover, use short phrases without such commercial elements as “price,” “buy,” and “order” because search crawlers may also perceive them negatively. For example, “hotel rooms in the tourist area of Ibiza.” Bad examples: “hotel rooms in a hotel in Ibiza” and “book a hotel room in Ibiza.”
Describe the Image as Specifically as Possible
Think about basic scenarios where alt text is used. There can either be problems with loading an image or text-to-speech tool. Imagine that you are explaining the image essence to another person without having any means of demonstration in front of you. Make a first version of the description, simplify it, read it again, and try to find potential for optimization.
If it’s an image of a static object, it’s enough to name it and give two or three characteristics. Here is a good alt text example: “red short dress with thin straps.” If there is a dynamic in the picture, first name the main object and then mention the action and place. For example: “a gray pigeon is flying between the houses in the city.”
Add Relevant Context
You can simply indicate that this is an image of a middle-aged man in a white shirt and jacket. But you’re unlikely to attract users’ attention that way. It’s better to be more specific: “Elon Musk during the SpaceX presentation.”
If the picture depicts famous people, popular tourist locations, events, etc., you should name them. Always be specific and provide context, especially when it comes to trending search queries that can significantly increase traffic to your resource.
Don’t Neglect Form Buttons
To ensure a positive UX and accessibility, alt text should accompany all interactive elements of the page, for example:
- Personal profile login.
- Registration.
- Saving personal data.
- Sending a request.
- Purchase.
- Adding a product to the cart.
- Ordering a consultation.
- Feedback.
Even if multimedia files do not load properly, the user must have access to all functions through text links with a detailed description.
Double Check for Spelling Errors
Knowing what alt text is, you understand its importance for SEO. It mustn’t contain any errors. If even one letter is in the wrong place, the text-to-speech tool will reproduce the description incorrectly. It will worsen the UX for many visitors.
Don’t Add Alt Text to Every Image
It may seem like a strange piece of advice, but not every image needs an alt text. And this follows from the definition of what alt tags are and why we need them.
Some images are added to a website just for the sake of beauty. They are not directly related to the content and are not used in the interface. Experts advise inserting them using CSS rather than HTML. This practice affects SEO positively.
However, sometimes (for example, owing to the technical limitations of a particular platform), you have to use traditional methods. In this case, W3C engineers recommend adding an empty description tag:
<img alt=” “>. This is not a mistake. Moreover, text-to-speech tools ignore such a note. Hence, it does not matter for users with disabilities.
Alt Text Examples: Good and Bad
Bad: the Eiffel tower.
Better: the Eiffel tower from below.
Ideally: the Eiffel tower and Champ de Mars from below on a cloudy day.
In this example of alt text, it is not enough to just mention the main object. There are millions of photos of the Eiffel Tower, so a few words are not enough. It will be good if you indicate the angle from which the photo was taken. Ideally, you should add context – the place, time of day, and weather conditions. The last phrase allows your imagination to work at its full capacity, doesn’t it?
Bad: Laptop.
Better: Microsoft Surface laptop.
Ideally: Opened blue Microsoft Surface laptop on a marble table.
Provide maximum info. Specify the brand and color of the laptop, its condition, and its position in space. In the alt text, you should include everything that will help users find the product they need in a catalog or search engine.
Bad: Keyword research.
Better: Serpstat keyword research.
Ideally: Traffic, competition, difficulty, and CPC report in Serpstat keyword research tool.
It is important to know what must be in the alt tag. It must contain everything useful to the visitor. If you’re presenting a commercial product like a set of SEO tools, try to describe its functionality in a short but detailed way. If it’s a physical product, describe all its external characteristics and features.
Alt Tags for Complex Image Types
The W3C consortium also offers recommendations on the accessibility of key elements of a web page. They are subject to special rules. Their descriptions should provide info about the function rather than the content.
Icons
Duplicate the text in the button or instruction image that appears when you hover over it. For example, “leave contacts,” “register,” “upload a photo,” etc. Imagine that you are using a website with your eyes closed, and another person sitting next to you is helping you. Each interactive element of the page should have a concise and clear description of its function.
Images as Links
Describe the page content that the user will be redirected to by clicking the image. For example, a picture with an exclamation mark in a triangle leads to a section with promotional products. Knowing what alt tags are, the obvious solution would be to write “a pic with an exclamation mark.” But instead, it’s better to insert the text “go to the description of the promotion for gasoline generators and select products in the catalog.”
Images with Complex Information
These are infographics, charts, tables, etc. W3C experts recommend using a combination of plain text and alt text for them. The alternative description will contain the title and the main idea of the material. It is better to include details and conclusions in a regular text paragraph on the same page.
Moreover, it is important to avoid using images with a large amount of text. They may be inaccessible to many visitors. If you want to get a stylish page design, use CMS plugins or modern markup tools.
Alt Text for Images Is Your Invisible Assistant
By moving toward Web3, the development community has been creating an Internet accessible to everyone on the planet regardless of their physiological, cultural, territorial, or other characteristics. Search engines help in this case greatly by prioritizing websites that adhere to inclusion standards. That is why the importance of alt text for SEO can hardly be overestimated.
The right alternative description for an image strengthens the SEO strategy, increases traffic, and improves UX. If you forget or ignore it, you risk losing your rank in search results. To avoid such a problem, you should use specialized tools for technical audit of your website offered by Moz, Serpstat, Ahrefs, Sitechecker, and other popular digital marketing platforms.
FAQ
What Is Alt Text?
It is a caption displayed on a page instead of an image if the browser cannot load multimedia elements. It is also used by text-to-speech tools.
Why Is the Image Alternative Text Important?
It ensures accessibility for people with disabilities, improves UX in non-standard scenarios, and increases traffic through easier image searches.
How Does Images Alt Text Affect SEO?
The absence of this element indicates a lack of attention to accessibility and UX. This leads to your page ranking drop in search results.
What a Good Alternative Text Should Be Like?
The alternative text should be short but meaningful. When creating it, provide context, avoid typos, and use keywords wisely. While describing form buttons and other interactive elements, don’t forget to mention their functions.
