HTML Img Alt Tags For SEO Best Do – Search Engines Love Them

In HTML Attributes

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Acquire more

Attribute of
HTML Tags Guide To Adding Images To Your Spider web Documents
What does HTML Img Alt Tags For SEO Best Practice - Search Engines Honey Them do?
Defines alternating text, which may exist presented in place of the epitome.

Lawmaking Example 

                  <img src="/wp-content/uploads/flamingo.jpg" alt="Pink flamingo.">
Pink flamingo.

The alt text

The alt attribute will accept any text string, but in that location are certain best practices that will help.

  • No special characters. This includes UTF-8 characters such as unencoded curly quotes, as well as HTML Character Entities.
  • No HTML.
  • No more than 125 characters.
  • Just identify the picture show. No need to refer to it ("This is a film of…").
                    <!-- Bad alt descriptions. -->  <img src="/wp-content/uploads/flamingo.jpg" alt="A "pinkish" flamingo.">  <img src="/wp-content/uploads/flamingo.jpg" alt="A <em>pink</em> flamingo.">  <img src="/wp-content/uploads/flamingo.jpg" alt="Flamingo comes from Spanish flamenco, 'with the colour of flame', in plow coming from Provençal flamenc from flama 'flame' and Germanic-similar suffix -ing, with a possible influence of words like Fleming. A similar etymology has the Latinate Greek term Phoenicopterus (from Greek: ????????????? phoinikopteros), literally 'claret red-feathered'.">  <img src="/wp-content/uploads/flamingo.jpg" alt="This is a motion picture of a pink flamingo.">   <!-- Practiced alt clarification. --> <img src="/wp-content/uploads/flamingo.jpg" alt="Pinkish flamingo.">

The alt description — Users

The alt attribute provides an "alternative description" for the image. This clarification is ordinarily not presented to the user, just volition be nether sure circumstances:

  • Assistive technology — If the user is visually impaired, and is using a screen reader, the screen reader volition read the alt clarification to the user.
  • Images turned off — Some users prefer to surf the spider web with images turned off (to save bandwidth or to minimize lark). These users will normally see the alt description instead of the paradigm.
  • Paradigm failure — If an epitome fails to load for whatsoever reason (bad file name, connectedness problems), the user will usually run across the alt description in place of the image.

Here's an example of displaying the alt text in identify of a failed image (the image src points to nada).

                    <img src="not-a-real-file-proper name.jpg" alt="Depending on your browser, yous might see this message in identify of the failed image.">

Depending on your browser, you might see this message in place of the failed image.

The alt description — Search Engines

The alt clarification is also very helpful for search engines. Search engines have a hard time figuring out what the content of an prototype actually is. They are getting better at it, simply identifying the subject of a photo or picture is extremely difficult. And then search engines rely on the alt description to know what is actually in a motion picture (they also use the file name and other attributes). Additionally, in Google Epitome Search, the alt description is really shown to the user.

Flamingo image in Google Image Search.
"American flamingo" is the alt text of flamingo picture.

If you care about SEO, y'all should make sure that yous accept relevant alt descriptions for all of your images.

Learn more well-nigh alt

How much more is at that place to know about alt? A lot. We've put together this tutorial on the Rules of Alt to assistance you out.

Values of the alt Attribute

Value Name Notes
text Specifies alternative text to be displayed in detail contexts.

All Attributes of img Element

Attribute name Values Notes
height Identifies the intrinsic height of an image file, in CSS pixels.
srcset list of sources Defines multiple sizes of the same paradigm, allowing the browser to select the appropriate image source.
align correct
left		 Was previously used to specify the alignment and placement of an image relative to the surrounding text. It has been deprecated and should not be used.
alt text Defines alternating text, which may be presented in place of the epitome.
border pixels Previously used to ascertain a border on an epitome element. It has been deprecated and should no longer be used.
controls Toggled media histrion controls when used in conjunction with the <code>dynsrc</code> attribute. Both attributes are at present deprecated.
dynsrc
hspace Previously used to add horizontal space on both side of an paradigm. It is at present deprecated.
ismap Identifies an image as a server-side image map. When the containing anchor link is clicked, the coordinates of the mouse will exist included in the request.
longdesc Defines a URL at which tin can be found more data about the image. Information technology was written out of the HTML5 specification, but its status is not quite and then clear as other deprecated features.
loop Previously used to specify the number of times a video should play, when used in conjunction with the dynsource aspect. Both attributes have been deprecated.
lowsrc Specified a smaller or lower-quality version of an image.
name Identified the image or provided additional information well-nigh it. Deprecated in HTML 4.0 in favor of other attributes.
naturalsizeflag This aspect does aught. Information technology was once used past a proprietary software system.
nosave Was intended to foreclose users from downloading an image. Was never a office of the HTML specification, and not widely implemented.
offset fileopen
mouseover
suppress Used by the now-defunct Netscape browser to suppress the brandish of image prior to image download completion.
usemap Specifies a client-side prototype map to be used with the image.
width Indicates the intrinsic width of the image, in CSS pixels.
src Specifies the URL of an epitome to be displayed.

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for alt