When designing a website, many users get confused between the image alt text and image title attributes. To the casual observer, these attributes seem to do the same thing, but this is actually not the case. Below, we’ve outlined how image alt text can be used to boost SEO and accessibility, and why it’s a different information source than the image title.
What is Image Alt Text?
Short for “alternative text”, the image alt text attribute is used in HTML to describe an image’s content and function. Typically, visitors will not see this text unless the images are disabled or broken. If that happens, the alt text is shown inside the image boundaries. This attribute can also be used for embedded video, applets, and other media.
HTML requires every image to have an “alt” attribute, and it’s a good idea to create alt text that’s as accurate as possible, so that search engines can understand the image’s content. This is represented as alt=“ ”, with the alt text written inside the quotation marks.
Image alt text also improves the web experience for those using screen reader devices. The reader will recite the text on a page, and when it reaches an image, it will recite the alt text as well. Those with poor vision will still be able to understand why you’ve included an image, making the page more accessible.
What’s the Best Way to Write Alt Text?
- Be Concise: Generally, the image alt text should not be more than a brief sentence. If a few words will suffice, than be as succinct as possible. Your goal should be to describe the image accurately, so that any casual visitor can understand the image content without seeing it.
- Avoid Keyword Stuffing: Search engines do take alt text into account when determining rankings, but if you repeat keywords unnecessarily, sites like Google will mark it as spam. It’s fine to use keywords once in image alt text, but only if they actually describe the image.
- Avoid Using “Image” Words: When creating alt text, you never need to include the word “image” or “graphic” as part of the description. Users will know that they’re looking at an image, and even if they have poor eyesight, the screen reader will preface every image by saying Image: Title “X”. Just focus on the image content and function.
What is Image Title?
Unlike alt text, image title provides additional information about an image, but with the brevity of a title. This text appears when you hover your mouse on an image, and it’s entirely distinct from image alt text. It uses the attribute title=“ ”. Search engines do not analyze image titles when determining page rankings, so you don’t need to optimize them. Instead, just come up with a brief description of your image, so that you provide a bit more information for visitors.