How to Set Image Alt Text to be Descriptive or Decorative on Webflow

Alt text is the text attribute on an image element that describes what the image contains. It serves two purposes: it's read by screen readers for users with visual impairments, and it's read by Google's image crawler because Google can't actually see images the way humans do.

The SEO case is straightforward: images with no alt text are invisible to Google from a content standpoint. The image might be the most visually prominent element on the page, but if there's no alt text, Google has no textual signal about what it depicts. Images with descriptive alt text contribute to page relevance for the target keyword and can rank independently in Google Images.

How to write good alt text: describe what's in the image accurately and concisely. For a screenshot of the Webflow Designer showing the CMS panel, the alt text might be "Webflow Designer CMS panel with collection fields visible." That's descriptive. Including the target keyword when it accurately describes the image is appropriate — keyword-stuffing alt text with phrases unrelated to what the image shows is a spam signal.

The decorative image exception: purely decorative images (background textures, divider lines, abstract patterns) should have empty alt text (alt equals empty string), not missing alt text. Empty alt text tells screen readers to skip the image. Missing alt text forces screen readers to read the file name instead, which is usually meaningless noise for the user.

In Webflow, adding alt text to static images is done in the image settings panel in the Designer — select the image, and fill in the Alt Text field. For CMS images, create an alt text field in your collection (Plain Text type) and bind it to the image's alt text property in the Designer. This lets content editors add alt text per image without going into the Designer themselves.

Run the Webflow Designer audit monthly. Missing alt text on images is one of the most consistently flagged issues, and it's one of the fastest to fix. It's also one of the few SEO improvements that directly improves accessibility for real users at the same time.

How to do it on Webflow

  • Descriptive Alt Text: For meaningful images, describe the image content and its relevance.
  • Decorative images: For decorative images like mood pictures.
Webflow AI for Alt text

This is where the AI shines. In just three clicks, you can generate alt text for all your assets. Switching from to Sitewide (2) and you can do it for all your website

  • Assets: Asset panel > Asset alt text
  • Audit (1) -> Sitewide or Current page (2) -> List of missing SEO items (3)

Do's

✅ alt="Webflow SEO Checklist displayed on a laptop screen."

This ensures that images contribute to accessibility and SEO without adding unnecessary noise.

Don'ts

❌ Bad Example: alt="image123" or alt="Webflow seo checklist"

This vague and non-descriptive alt text fails to convey the image’s content, making it unhelpful for accessibility and SEO.

Tools
Don't have the Checklist yet?