Using Alt Image Tags

When adding images to the content of your website, it is important to include Alt Text (Alternative Text) along with each of your images. The Alt tag is an HTML standard which can be used to indentify the content or function of an image. Alt Image Tags serve two very important purposes: Providing accessibility to the visually impaired (who are using a screen-reader), and enabling Search Engines to identify the purpose or content of the image.

Since Search Engines cannot "see" what is in an image on your site, the Alt tag becomes essential in identifying your image content. When used properly they can increase your Search Engine Optimization. Note that improper use of Alt Text can sometimes hurt your SEO, as Alt tags have been abused in the past in an attempt to artificially boost site ranking. An HTML Alt Image Tag looks similar to the below:

<img alt="Example Alt Text for an Image" src="/campus/images/imagename.jpg">

Below are the guidelines to consider when creating Alt Text:

  • Write text that sufficiently describes the image so that it could theoretically "replace" the image on your page. Use full sentences, not short phrases separated by commas.
  • If the image is purely decorative and does not convey any message relevant to the page content, include an empty Alt tag: alt="".
  • If your image contains large amounts of text (such as an image of a scanned letter), include the actual text of the image as the Alt Text. In addition, if the image consists purely of text, consider replacing the image altogther with just text.
  • If the image is also a hyperlink to another page, include a short description of the content of the page, or the Page Title, to which it links.
  • Include keywords in your text that reflect the content of the image and the content of the page.
  • Do not "stuff" your Alt text with keywords. This tactic has been abused in the past and could reduce your Search Engine Ranking. For example, if including Alt text for an image of a puppy playing with a ball, using alt="puppy dog ball black dachshund dogfood fetch catch german shepherd retriever collie mutt dogcollar" is not recommended. Instead, use a descriptive sentence that includes the most important keywords, such as alt="A puppy playing fetch with a ball".
  • Make sure the Alt text is relevant to the written content directly surrounding the image. It is also good practice to insert the image in a location close to the relevant text - as it helps Search Engines place the image in context. For instance, don't insert an image of a puppy at bottom of your page when the text about the puppy is at the top of the page. 

Adding an Alt Tag to an Image

  1. When editing a page, in the Content Editor, click the Image Manager icon image-manager-icon.

    Tip: If you wish to add or edit the Alt text of an image already added to your content, first click the image in the Content Editor, then click the Image Manager icon.

  2. In the Image Manager Window, select the image you would like to add to the page.
  3. In the image preview box, enter the desired Alt text into the Image Alt Text field.

    Image of the Image Manager Window showing where you can add Alt tags to your images.

  4. Click Insert to insert the image including the Alt text.

Adding Alt Text using HTML

If you prefer to add Alt text to an existing image using the HTML edit mode, click the HTML icon HTML edit mode icon at the bottom left of the Content Editor. Locate the HTML for the existing image, which will look similar to the below:

<img src="/campus/images/imagename.jpg"> 

Add the alt text to the image code in the form alt="Example Alt Text for an Image" (placing your own text between the quotes), so the end result will look similar to the below:

<img alt="Example Alt Text for an Image" src="/campus/images/imagename.jpg">

 

Top Producer Campus is the official support and training website for Top Producer Products. Receive support and training on Top Producer CRM, Market Snapshot, Websites, IDX, and real estate best-practices. As an extension to Top Producer Technical Support, real estate agents and REALTORS® will find real estate self help topics, video tutorials, training resources, and contact information for local real estate trainers. On Top Producer Campus, agents with Top Producer real estate solutions have access to quality real estate coaching, real estate training, real estate videos, and information about Top Producer's real estate technology.

© 2014 Top Producer Systems Company ULC. All Rights Reserved.