HTML Img Alt Tags For SEO Best Practice - Search Engines Love ...

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn moreAttribute ofHTML Tags Guide To Adding Images To Your Web DocumentsWhat does HTML Img Alt Tags For SEO Best Practice - Search Engines Love Them do?Defines alternate text, which may be presented in place of the image.

Contents

  • 1 Code Example
  • 2 The alt text
  • 3 The alt description — Users
  • 4 The alt description — Search Engines
  • 5 Learn more about alt
  • 6 Values of the alt Attribute
  • 7 All Attributes of img Element
  • 8 Browser Support for alt

Code 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 there 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. No need to refer to it (“This is a picture of…”).
<!-- Bad alt descriptions. --> <img src="/wp-content/uploads/flamingo.jpg" alt="A “pink” 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 turn coming from Provençal flamenc from flama 'flame' and Germanic-like suffix -ing, with a possible influence of words like Fleming. A similar etymology has the Latinate Greek term Phoenicopterus (from Greek: ????????????? phoinikopteros), literally 'blood red-feathered'."> <img src="/wp-content/uploads/flamingo.jpg" alt="This is a picture of a pink flamingo."> <!-- Good alt description. --> <img src="/wp-content/uploads/flamingo.jpg" alt="Pink flamingo.">

The alt description — Users

The alt attribute provides an “alternative description” for the image. This description is normally not presented to the user, but will be under certain circumstances:

  • Assistive technology — If the user is visually impaired, and is using a screen reader, the screen reader will read the alt description to the user.
  • Images turned off — Some users prefer to surf the web with images turned off (to save bandwidth or to minimize distraction). These users will normally see the alt description instead of the image.
  • Image failure — If an image fails to load for any reason (bad file name, connection problems), the user will usually see the alt description in place of the image.

Here’s an example of displaying the alt text in place of a failed image (the image src points to nothing).

<img src="not-a-real-file-name.jpg" alt="Depending on your browser, you might see this message in place 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 description is also very helpful for search engines. Search engines have a hard time figuring out what the content of an image actually is. They are getting better at it, but identifying the subject of a photo or picture is extremely difficult. So search engines rely on the alt description to know what is actually in a picture (they also use the file name and other attributes). Additionally, in Google Image Search, the alt description is actually shown to the user.

Flamingo image in Google Image Search.
“American flamingo” is the alt text of flamingo picture.
If you care about SEO, you should make sure that you have relevant alt descriptions for all of your images.

Learn more about alt

How much more is there to know about alt? A lot. We’ve put together this tutorial on the Rules of Alt to help you out.

Values of the alt Attribute

Value NameNotes
textSpecifies alternative text to be displayed in particular contexts.

All Attributes of img Element

Attribute nameValuesNotes
heightIdentifies the intrinsic height of an image file, in CSS pixels.
srcsetlist of sourcesDefines multiple sizes of the same image, allowing the browser to select the appropriate image source.
alignright leftWas 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.
alttextDefines alternate text, which may be presented in place of the image.
borderpixelsPreviously used to define a border on an image element. It has been deprecated and should no longer be used.
controlsToggled media player controls when used in conjunction with the <code>dynsrc</code> attribute. Both attributes are now deprecated.
dynsrc
hspacePreviously used to add horizontal space on both side of an image. It is now deprecated.
ismapIdentifies an image as a server-side image map. When the containing anchor link is clicked, the coordinates of the mouse will be included in the request.
longdescDefines a URL at which can be found more information about the image. It was written out of the HTML5 specification, but its status is not quite so clear as other deprecated features.
loopPreviously used to specify the number of times a video should play, when used in conjunction with the dynsource attribute. Both attributes have been deprecated.
lowsrcSpecified a smaller or lower-quality version of an image.
nameIdentified the image or provided additional information about it. Deprecated in HTML 4.0 in favor of other attributes.
naturalsizeflagThis attribute does nothing. It was once used by a proprietary software system.
nosaveWas intended to prevent users from downloading an image. Was never a part of the HTML specification, and not widely implemented.
startfileopen mouseover
suppressUsed by the now-defunct Netscape browser to suppress the display of image prior to image download completion.
usemapSpecifies a client-side image map to be used with the image.
widthIndicates the intrinsic width of the image, in CSS pixels.
srcSpecifies the URL of an image to be displayed.
Adam WoodAdam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for alt

iefirefoxchromeedgesafariopera
AllAllAllAllAllAll

Từ khóa » Html Button Alt Text