Beginners Guide To Image Alt Text

  • 1
Alt Tags Article Featured Image

Beginners Guide To Image Alt Text

Learn the alt text basics and find out how it can be used to improve your SEO

What is alt text and what does it look like?

Image alt text is an HTML attribute associated with a web-based image that offers alternative text information about the image in the event it cannot be displayed.
Image Tag With Alt Text

How does image alt text function and what does it do?

Search engines are designed to scan alt text to see what an image is representing. If an image is not able to be shown correctly on a webpage, most browsers will display a broken image icon.Broken Image Icons

But, if there is alt text included with an image, it will be displayed in it’s place.
Image vs. Alt Text Compare

Some of the common reasons an alt attribute would be displayed or used on a website include:

  1. Links to image files are broken, have been moved or no longer exist.
  2. An individual has disabled or turned off images in the browser they are using.
  3. People with visual impairments use software that reads alt text out loud.

Aside from the SEO benefits of including alt text on your site (which I will cover next), most browsers and/or websites display alt text when you hover over an image. If your image is linked to some sort of content, or goes to another page, it is important to keep that in mind when adding alt text. In these situations, you have the ability to increase or enhance the usability of your site by telling people where the linked image is sending them. This increases the likelihood that they will be able to navigate successfully through a site…ultimately increasing on-site averages and click through rates.
Alt Text Shown On Scroll Over




How to create SEO enhancing image alt text that will make your site better?

Alt text can and should be an accurate description of an image, and should thus correlate with the title of green treethe image. After downloading an image like this , the first thing I would do is change the title given to it by the stock photo company (ex: “image.098727.jpg”) into something that is accurate. Ex: “Green Tree”…bonus is that it also makes the image easier to find if you have a huge library and you need to use a search function to find it. Now, whenever I use this image on a page, I will set the alt to something similar to, or including the title. Ex: alt=”Growing Green Tree”, alt=”Green Tree In Spring”, alt=”Green Elm Tree”, etc.

Keep in mind that while you want your alt text and image title to correlate and explain what the image is, you also want these two elements to match your overall content or SEO strategy for the page. Using the example image, your title tag, URL, header tags, and content would all be about/contain “Green Tree”.

What not to do…
If the image doesn’t match the rest of your SEO elements, consider using a different image. It will be better for you in the long run to get a new image than to incorrectly tag an image or try to force it into matching the keywords you’re targeting. Ex: alt=”red tree in winter”. Similarly, don’t over stuff the alt attribute with a ton of keywords…related or not. Ex: alt=”Green Trees, Green Plants, Tree Growing Tips, How to Grow Trees”.

How to include or add alt text to an image?

This depends on how your website was built, or what type of content management system (CMS) is being used, but most site development tools tend to make it pretty easy. WordPress, for example, allows alt text to be added Adding Alt Text In WordPressto an image either in the Media Library or on the individual page the image is being used on. I usually set some rather basic alt text for the image in the library, and then change it slightly on the page level, in the event that I am using the same image on multiple pages. Whether you’re using WordPress or some other form of CMS, setting the alt text is usually as simple as clicking “Edit Image” and filling out the field.

If you feel comfortable enough opening up an html version of your site in either a text editor or design program like Dreamweaver, you can also add alt=”Your Alt Text Here” to any of your image tags.
Alt Text Example 2

What if you don’t want to include alt text?

No problem, it won’t be the end of your SEO. Although there are benefits to using alt text, sometimes people just don’t care or want to use them (although I recommend that you do). If that is the case, just leave the content field for it blank, or enter alt=”” (or leave out altogether) in the html for the same desired effect. Just keep in mind that if you are in a competitive market or fighting for placement in a saturated online category, alt text could give you the edge you need to get ranked higher than other sites.

Another time in which it is okay to pass over alt text, is if the site is in development and of substantial size. If this is the case, it can not only be good to give yourself some time to research keywords, but it will also give you some time to see the overall direction of a site. For example, if you end up with ten pages that are all about a related subject and have similar images, it may be best to wait so you can separate and target different keywords with different image alt text on each page.


Image alt text is a simple way to give your site a little extra SEO boost. With upload, insert or drag and drop tools that make it easy for people to add images to their site or blog, there’s no reason to not take the time to add the alt text…since it’s usually something you see when uploading the image anyways. If you’re not attempting to target keywords, at least use two or three words to describe exactly what the image is. Your site will be better for doing so…and you will always have the option to change it down the road.

1 Comment


August 2, 2016 at 5:20 pm

The best thing about your sharing and posting is that you always provide content that is helpful for both the newbie and experts. Looking for more stuff and tutorials.

Leave a Reply

Learn more about…