What is the Image Alt Tag, Updated 25th August 2020 – In this article you will learn what is the image alt tag and how you can use it to get a better ranking for your images and a better level of search engine optimisation overall.
If you have a Shopify store, make sure you check my articles:
If you need help with your visibility and ranking on search engines, feel free to check our SEO agency services.
The Image Alt tag is an HTML attribute generally applied to images that specifies an alternative text when the image cannot be displayed or to inform search engines on what the image is about.
It is also known as alt text, alt attribute, alternative text or alternative attribute.
The alt tag was introduced with in 1995 with the release of HTML 2. At the time, internet connection were quite slow and the alt tag primary function was to display an alternative text while waiting for the images on the page to load.
Alt tags get read aloud by screen readers to visually-impaired users in place of images. For this reason, they are also important for accessibility (source: webaim.org):
Adding alternative text for images is the first principle of web accessibility.
Some of the main accessibility best practices for alt tags are:
Image alt tags are important for SEO because they allow search engines to ‘read’ your images. This way search engines like Google understand what your image is about and can index and rank it accordingly.
Ranking images is very important considering over 20% of searches in the US occurs on Google Images (source: sparktoro.com).
Some of the main SEO best practices for image alt tags are:
There are many ways to edit an image alt tag. Mostly it will depend on the content management system (CMS) used.
For the purpose of this tutorial, I am going to consider two of the most popular CMSs, WordPress and Shopify.
I am also giving you some details on how to edit the image alt tag directly from the HTML code.
To edit the alt tag in WordPress:
To edit the alt tag of your Shopify products:
To edit your image alt tag directly from the HTML code:
Your line is something like:
<img src=”img_girl.jpg” alt=”Girl in a jacket” width=”500″ height=”600″>