SEO Rules:

1. Describe the image as specifically as possible.
   Alt text is, first and foremost, designed to provide text explanations of images for users who are unable to see them. if an image truly doesn't convey any meaning/value and is just there for design purposes, it should live within the CSS, not HTML.


2. Keep it (relatively) short, fewer than 125 characters.
   The most popular screen readers cut off alt text at around 125 characters, so it's advisable to keep it to that character count or less.


3. Use your keywords.
   Alt text provides you another opportunity to include your target keyword on a page, and thus another opportunity to signal to search engines that your page is highly relevant to a particular search query. While your first priority should be describing and providing context to the image, if it makes sense to do so, include your keyword in the alt text of at least one image on the page.


4. Avoid keyword stuffing.
   Google won't dock you points for poorly written alt text, but you'll be in trouble if you use your alt text as an opportunity to stuff as many relevant keywords as you can think of into it. Focus on writing descriptive alt text that provides context to the image and if possible, includes your target keyword, and leave it at that.


5. Don't use images as text.
   This is less of an alt text-specific best practice and more of a general SEO-friendly web development tenet. Because search engines can't read text within your images, you should avoid using images in place of words. If you must do so, explain what your photo says within your alt text.


6. Don't start or include "image of," "picture of," etc. in your alt text.
   It's already assumed your alt text is referring to an image, so there's no need to specify it.


7. Does not be full sentence structure
   It is assumed this is a description of the image and since it is character limited, it is not required to be a full sentence. Though it should still be a concise and detailed description of the image.


8. Don’t neglect form buttons.
   If a form on your website uses an image as it’s "submit" button, give it an alt attribute. Image buttons should have an alt attribute that describes the function of the button like, "search", "apply now", "sign up," etc.

Examples & References:

Example 1

Okay alt text: alt="Rooster"
Better alt text: alt="Rooster crowing"
Best alt text: alt="Red-crested rooster crowing"

Example 2

Okay alt text: alt="man on escalator"
Better alt text: alt="man walking on escalator"
Best alt text: alt="man wearing backpack walking down escalator"

Keyword vs. Detail

Bad: alt="HubSpot office wall Singapore inbound marketing workplace murals orange walls ship it"
Good: alt="Orange mural that says 'ship it' on a wall at HubSpot's Singapore office"

Detail vs. Specificity

Bad: alt="Baseball player hitting a ball at a baseball field"
Good: alt="David Ortiz of the Boston Red Sox batting from home plate at Fenway Park"

Specificity vs. Context

Bad: alt="Woman pointing to a person's computer screen"
Good: alt="Business school professor pointing to a female student's computer screen"

CheckList:

• Run An Initial Page Scan
• Run an Initial Alt Check - Desktop
• Run an Initial Alt Check - Mobile
  *parts of the site may be copied from other sources and have their alt text filled in. Please double check that they coincide with the correct image.
• Fill in and/or fix all alt tags on Desktop
• Fill in and/or fix all alt tags on Mobile
• Make sure all Service buttons have a static alt tag (It doesn't change seasonally)
• Run An Additional Page Scan
• Run an Additional Alt Check - Desktop
• Run an Additional Alt Check - Mobile

PreMade Alt Tags: