"The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader)."
Read more: Source: W3 Schools HTML alt Attribute
Use of HTML alt Attributes (also known as Alt Tags or Alt Text) with most images in your website will improve accessibility for others, and maybe help search engine meta crawlers interpret website content.
Note that not every image needs an ALT attribute.
Example, decorative images or 'design elements'.
The HTML alt Attribute, when used, should convey more information about the image to help users of screen readers interact with your website content.
Result: improved website accessibility.
Impact on SEO of HTML alt Attributes
An HTML alt Attribute may add some value for SEO purposes.
The Image File Name reputedly adds more value for SEO purposes.
Use of Image Captions also reputedly helps reduce bounce rates.
Read more: How to reduce Bounce Rates.
Contents include:
How to add an HTML alt Attribute to an image
The image below shows the Image Manager pop up window when you select the Image Editor button in the JCE Content Editor.
Enter a short unique description, using key words if possible.
Example: a picture of a big red London bus would have the HTML alt Attribute: "big red London bus".
For SEO, ALT tags are second order (not very important) but you may wish to include one or two keywords.
Avoid stuffing long ALT tags with keywords; instead keep them short.
This will be of benefit to visually impaired site visitors and (less so) to search engine meta crawlers.
Read more: Working with Images.
Image File Names vs HTML alt Attributes
Image file names are reported to be much more important than HTML alt Attributes for SEO.
Add keywords to the image file name justg in case this is so.
Repeat your chosen keywords in the HTML alt Attribute.
But remember that the primary purpose of the HTML alt Attribute is to improve website accessibility.
HTML alt Attributes and images used as design elements
Example: an image used as a screen background or bullet point.
Add an empty HTML alt Attribute to such images.
Benefit: improved accessibility, especially for users of screen reader technology.
Useful Tips for when working with Images
Take care over naming of Image Files
Image file names should also communicate what the image contains.
Example: big-red-london-bus.webp is better for SEO than say, image3.webp.
Still second order for SEO but good practice as it also helps you manage your content.
Some Google Tips for where to store your website's images
In their Starter Guide, Google recommend that images should be stored in one easy to find directory:
Example: images.
The images in a Joomla! CMS website are by default stored in a directory called 'images'.
You may also wish to organise uploaded images using sub-directories of the 'images' directory.
This is easy to do when using either the Media screen or the JCE Content Editor (when installed).
Make SEO your #1 priority after Joomla! CMS Security
We help and support managers responsible for Joomla! CMS websites in UK business, academy school and third sector organisations across Cheshire, Greater Manchester, Merseyside and North West England.
Disclaimer
We do not guarantee that your website's performance in search engines will improve as a result of making any one change to your website's structure, navigation or content.
No-one can provide such a guarantee.
