Images missing alt
Moderate effortFound on 91% of audited stores.
Add descriptive alt text to every product and content image so search engines and screen readers can understand what the image shows.
What it is
Every `<img>` tag in HTML has an `alt` attribute — a short written description of what the image shows. When an image is missing its alt text (the `alt` attribute is absent or empty), search engines like Google cannot "see" what the image depicts, and screen-reader software used by visually impaired shoppers reads nothing aloud. Writing good alt text means filling in that attribute with a clear, specific description: for a product photo you might write `alt="Red leather crossbody bag with gold buckle clasp"`.
Why it matters
Google explicitly uses alt text to understand images and rank them in Google Images — a significant free-traffic channel for ecommerce stores. Missing alt text means your product photos are invisible to Google's crawler and cannot appear in image search results, cutting off a stream of high-intent shoppers. On the conversion side, assistive-technology users (screen readers) rely on alt text to understand your product imagery; missing it creates a poor shopping experience and in many jurisdictions exposes you to accessibility-law liability (ADA in the US, EN 301 549 in the EU, AODA in Canada). Even a handful of untagged images on key product or landing pages is enough to suppress rankings and fail an accessibility audit.
How to fix it
- Audit your site: identify every image that is missing an alt attribute or has an empty alt attribute (alt=""). Focus first on product images, hero banners, and category images.
- Write a descriptive alt text for each image. Include what the item is, key distinguishing features (colour, material, style), and — for product images — the product name. Keep it under ~125 characters. Do not stuff keywords; write naturally for a sighted person who cannot see the image.
- Decorative images (spacers, purely aesthetic backgrounds) should receive an empty alt attribute (alt="") intentionally — this tells screen readers to skip them. Only content-carrying images need descriptive text.
- Update the alt attribute in the image tag, your CMS image field, or your product media manager depending on your platform.
- After saving, verify by viewing the page source (Ctrl+U / Cmd+U) and searching for your image filename to confirm the alt attribute now contains your description.
- Re-run your SEO audit or use Google Search Console's URL Inspection tool to confirm the image is now readable by Google.
Fix it on your platform
Pick your platform for the exact steps.
How to fix images missing alt on Shopify
- Product images: Go to Admin → Products → [select product] → scroll to the Media section → click the image thumbnail → in the panel that slides in, type your description in the 'Alt text' field → click Save.
- Collection/banner images: Admin → Products → Collections → [select collection] → click the collection image → add alt text in the pop-up field → Save.
- Theme section images (hero banners, etc.): Admin → Online Store → Themes → Customize → click the section containing the image → look for an 'Image alt text' or 'Alt text' input field in the left panel → fill in the description → Save.
- Blog post / page images: In the rich-text editor, click the image → click the image icon or 'Edit image' → fill in the Alt text field.
- Bulk update for many products: Use the Shopify bulk editor (Admin → Products → select multiple → Edit) or export your product CSV, fill the 'Image Alt Text' column for every row, then re-import via Admin → Products → Import.
How to fix images missing alt on WooCommerce
- Product images: In WordPress Admin → Products → [select product] → click the main product image in the 'Product image' box → the Media Library opens → click the image → fill in the 'Alt Text' field in the right sidebar → click 'Update'.
- Product gallery images: Same product edit screen → scroll to 'Product gallery' → click each thumbnail → add Alt Text in the Media Library panel → Update.
- Media Library bulk edit: Admin → Media → Library → click any image → fill the Alt Text field. For bulk work, install the free 'Bulk Auto Image Alt Text' or 'SEO Friendly Images' plugin.
- Theme/page builder images: In Elementor, Gutenberg, or Divi, click the image block → look for the 'Alt Text' or 'Alternative Text' field in the block/widget settings panel → fill in and Save/Update.
How to fix images missing alt on BigCommerce
- Product images: Admin → Catalog → Products → [select product] → Images & Videos tab → hover over the image thumbnail and click the pencil (Edit) icon → fill in the 'Alt Text' field → Save.
- Banners and other content images: Admin → Storefront → Image Manager — locate the image → click the edit icon → update the alt text field.
- Page Builder widgets: Admin → Storefront → My Themes → Customize (Page Builder) → click an Image widget on the canvas → update the Alt Text field in the right sidebar → Publish.
How to fix images missing alt on Wix
- In the Wix Editor, click the image on the canvas → click the 'Settings' (gear) icon in the image toolbar → find the 'What's in the image? Tell Google' or 'Alt Text' field → type your description → click Done.
- For Wix Stores product images: Wix Dashboard → Store Products → [select product] → click the product image → in the pop-up, click 'Edit' (pencil icon) → add alt text in the provided field → Save.
- Wix Blog images: Open the blog post in the editor → click the image → Settings → fill in the Alt Text field.
How to fix images missing alt on Squarespace
- Page/block images: Open the page in the editor → hover over the image block → click the pencil (Edit) icon → select the 'Design' or 'Image' tab in the block settings → find the 'Alt Text' field → enter your description → Apply/Save.
- Product images: Commerce → [select product] → click the image thumbnail in the media area → in the image editor panel, find 'Alt Text' → enter description → Save.
- Gallery block images: Click the gallery block → Edit → click any individual image → fill in the Alt Text or Caption/Alt field → Save.
How to fix images missing alt on Webflow
- In the Webflow Designer, click any image element on the canvas → in the Element Settings panel on the right (the gear icon tab) → find the 'Alt Text' field → type your description. Toggle off 'Decorative' if it is on.
- CMS collection images: Designer → CMS → Collections → [select collection] → open any item → find the image field → click the image → add alt text in the settings pane.
- Asset panel images: If images are placed via the Assets panel, click the image element after placing it on the canvas and set alt text via Element Settings as above.
How to fix images missing alt on Adobe Commerce (Magento)
- Product images: Admin → Catalog → Products → [select product] → Images and Videos tab → hover over the image and click its row to expand → fill in the 'Alt Text' field → Save.
- CMS page / block images: Admin → Content → Pages (or Blocks) → [select item] → in the WYSIWYG editor, right-click the image → Image Properties → fill the 'Alt Text' / 'Image Description' field → OK → Save.
- For bulk updates, use a data import: Admin → System → Import → Entity Type 'Products' → download the sample CSV, populate the 'small_image_label', 'thumbnail_label', and 'base_image_label' columns, then import.
How to fix images missing alt on WordPress.org
- Media Library: Admin → Media → Library → click any image → fill in the 'Alt Text' field in the right sidebar → Update.
- Gutenberg block editor: Click an Image block in a post or page → in the Block settings sidebar (right panel) → find 'Alt text (alternative text)' → fill it in. Mark as decorative via the toggle if purely ornamental.
- Classic editor: Click an image in the editor → click the pencil (Edit) icon → fill the 'Alternative Text' field in the Image Details dialog → Update.
- For bulk alt text: Install the free 'SEO Optimized Images' or 'Bulk Auto Image Alt Text' plugin → configure auto-fill rules using product/post title or custom templates → run bulk update.
How to fix images missing alt on Wix Studio
- In Wix Studio editor, click the image element → open the Settings panel (gear icon) → find the 'Alt Text' field → enter your description → Done.
- For Wix Stores products inside Wix Studio: Dashboard → Store Products → [select product] → click the product image → edit alt text in the image settings → Save.
How to fix images missing alt on Shopify Plus
- All steps are identical to standard Shopify (see Shopify above).
- For large catalogs at Plus scale, use the Shopify Admin API (REST or GraphQL) to bulk-update image alt text programmatically — query all productImages, filter where altText is null or empty, then send a productImageUpdate mutation with the correct altText value.
- Alternatively, use a Shopify Plus-approved bulk-edit app such as Matrixify (Excelify) — export products to Excel/CSV, fill the 'Image Alt Text' column, re-import.
How to fix images missing alt on Magento Open Source
- FOR PRODUCT IMAGES: Admin > Catalog > Products > open product > Images and Videos section > hover over image > gear icon > fill 'Alt Text' field > Save.
- FOR CMS CONTENT: Admin > Content > Pages or Blocks > open item > WYSIWYG editor > click image > Insert Image icon > fill 'Image Description' (alt) field.
- FOR BULK IMPORT: System > Data Transfer > Import > select Products entity type > prepare CSV with additional_image_labels column populated > upload and import.
How to fix images missing alt on PrestaShop
- FOR PRODUCT IMAGES: Go to Catalog > Products, open a product, click the 'Images' tab, click on an image, and fill in the 'Caption' field for each language (this outputs as the alt attribute). Save.
- FOR CMS PAGE IMAGES: Go to Design > Pages, open a CMS page, click the image in the TinyMCE/rich-text editor, then click 'Edit image' and complete the 'Image description (alt text)' field.
How to fix images missing alt on OpenCart
- FOR PRODUCT IMAGES: Admin > Catalog > Products > open a product > Image tab. The main image alt text is pulled from the Product Name by default; for gallery images, there is no native alt field — install the 'Image Alt Tag' extension from the OpenCart marketplace to add per-image alt fields.
- FOR CMS/BANNER IMAGES: Admin > Design > Banners > edit banner > fill in the 'Title' field, which renders as the alt attribute.
How to fix images missing alt on Next.js
- Replace every bare <img> tag in your Next.js project with Next.js's built-in <Image> component (from 'next/image'). The `alt` prop is required by the component's TypeScript types, so the compiler will surface any missing values at build time.
- For product images, pull `alt` text from your commerce API response — prefer a dedicated `altText` field, then fall back to the product/variant `name`, then a generic but descriptive string (e.g. `'Photo of {productName}'`). Never leave `alt` as an empty string unless the image is purely decorative.
- For decorative images that carry no informational value (e.g. background flourishes), explicitly pass `alt=""` AND `role="presentation"` so screen readers skip them intentionally — do NOT omit the prop.
- Create a shared `<ProductImage>` wrapper component (e.g. `components/ui/ProductImage.tsx`) that encapsulates the `alt` derivation logic and the `<Image>` component so the pattern is consistent across PDP, PLP, cart, and search pages.
- Add an ESLint rule (`jsx-a11y/alt-text`) via `eslint-plugin-jsx-a11y` to enforce alt text at lint time and prevent regressions in CI.
- Run `next build` to catch TypeScript and lint errors, then audit with Lighthouse or axe DevTools to confirm zero missing-alt violations before deploying.
How to fix images missing alt on Nuxt.js
- Audit every `<img>` tag and `<NuxtImg>` / `<NuxtPicture>` component across your pages and components (e.g. `pages/products/[slug].vue`, `components/ProductCard.vue`, `components/HeroBanner.vue`) and ensure each one has a non-empty, descriptive `alt` prop.
- For product images, derive the `alt` string dynamically from your API/store data — prefer a dedicated `altText` field if the commerce API exposes one (e.g. Shopify Storefront API `image.altText`), otherwise fall back to the product title plus a context hint (e.g. `'${product.title} – front view'`).
- For decorative images that carry no semantic meaning (spacers, background textures), pass an explicit empty string `alt=""` so screen readers and crawlers correctly skip them — never omit the attribute entirely.
- Create a reusable `BaseImage.vue` component that enforces the `alt` prop as required (using Vue's `required: true` prop validation). Use this component everywhere instead of raw `<img>` tags so missing alt text causes a console warning during development.
- If you use `@nuxt/image`, replace all raw `<img>` tags with `<NuxtImg>` and wire the `alt` prop — the module passes it straight through to the rendered `<img>`, so no extra config is needed.
- Run `nuxi build` (or check the browser console in `nuxi dev`) to catch any prop-validation warnings for missing `alt` values before deploying.
How to fix images missing alt on Gatsby
- Audit every `<img>` tag and every `<GatsbyImage>` / `<StaticImage>` component in your `src/` directory (pages, templates, components) for a missing or empty `alt` attribute. Run: `grep -rn 'alt=""\|alt={""\| <img ' src/` to surface offenders quickly.
- For `<StaticImage>` (build-time images in `src/components` or `src/pages`): add a meaningful `alt` prop describing the image content, e.g. `alt="Navy blue running shoes on a white background"`. Never leave it blank unless the image is purely decorative — in that case use `alt=""` intentionally AND add `role="presentation"`.
- For `<GatsbyImage>` (runtime/CMS-sourced images): pass the alt text through your GraphQL query result. Add an `altText` (or equivalent) field to every GraphQL query that fetches image data (product images, blog hero images, etc.) and wire it to the `alt` prop.
- For plain `<img>` tags (third-party embeds, SVG sprites, etc.): ensure every tag has a non-empty `alt` prop. Add the `jsx-a11y/alt-text` ESLint rule (`eslint-plugin-jsx-a11y` is included with `gatsby-plugin-eslint`) to catch regressions automatically at dev/build time.
- Run `gatsby build` and inspect the build output for any ESLint `alt-text` warnings, then verify rendered HTML with browser DevTools or an accessibility checker (e.g. Lighthouse) to confirm every `<img>` in the final HTML has a descriptive `alt` attribute.
- For product image grids driven by a CMS or commerce API, ensure the data-fetching layer (GraphQL fragment or REST call) always requests and forwards `altText` / `alt` fields so alt text is never hardcoded and always reflects the actual image content.
How to fix images missing alt on Next.js (Headless)
- Replace every bare <img> tag with Next.js's next/image <Image> component, which enforces the `alt` prop at the TypeScript/ESLint level.
- For product images, derive alt text from your commerce API data — prefer a dedicated `altText` field, then fall back to the product `title` plus a variant descriptor (e.g. `${product.title} – ${variant.color}`). Never leave alt empty unless the image is purely decorative.
- For decorative/background images that convey no information (e.g. a spacer or icon that has adjacent visible text), pass `alt=""` explicitly so screen readers skip them — do NOT omit the prop entirely.
- Create a shared utility `getImageAlt(image, fallback)` (see snippet) so alt-text logic is centralised and consistent across PDP, PLP, Cart, and CMS content components.
- Enable the `@next/next/no-img-element` ESLint rule (it ships with `eslint-config-next`) to surface any remaining raw <img> usages across the codebase.
- Add an integration check in CI (or a Playwright/Cypress test) that queries `document.querySelectorAll('img:not([alt])')` and fails if the list is non-empty.
How to fix images missing alt on Klaviyo
- Open Klaviyo and navigate to Content > Templates (or Campaigns, if editing a live campaign's email). Open the email template that contains images.
- Click on any image block in the drag-and-drop editor to select it. The right-hand panel will display image settings.
- Locate the 'Alt text' field in the image block settings panel. Enter a concise, descriptive phrase that explains what the image shows (e.g., 'Woman wearing red wool winter coat, front view'). Avoid generic text like 'image1' or leaving the field blank.
- Repeat for every image block in the template — including hero banners, product images, logo images, and footer images. Each image must have its own unique, descriptive alt text.
- If you use Klaviyo's HTML email editor instead of the drag-and-drop editor, locate each <img> tag and ensure it has a populated alt attribute, e.g.: <img src="product.jpg" alt="Blue ceramic coffee mug, 12 oz">. An empty alt="" is acceptable only for purely decorative images that add no informational value.
- Save and/or publish the template. For any active flows (e.g., abandoned cart, welcome series), open each flow email individually and apply the same alt text updates, then save each message.
How to fix images missing alt on Elementor
- Open the Elementor editor for the page containing the image: in your WordPress dashboard go to Pages (or Posts / Products), hover over the entry, and click 'Edit with Elementor'.
- Click directly on the Image widget (or any widget that contains an image, such as Image Box, Image Carousel, or WooCommerce Product Images) that is missing alt text. The left-hand panel will show its settings.
- In the left panel, locate the 'Image' field and click the thumbnail to open the WordPress Media Library. If the image is already selected, click the pencil/edit icon on the thumbnail instead.
- In the Media Library modal, select the image. On the right-hand side, find the 'Alt Text' field (under 'Attachment Details') and type a concise, descriptive phrase that explains what the image shows — include a relevant keyword naturally, e.g. 'Red leather handbag with gold clasp – front view'.
- Click 'Select' (or 'Insert Media') to confirm, then verify the alt text is reflected in the widget settings panel. For Image Box or other composite widgets, also check whether a separate 'Alt' or 'Image Alt' field exists directly in the widget's Content tab and fill it in there.
- Click 'Update' (or 'Publish') in the Elementor top bar to save the page, then repeat for every other image widget on the page and across all pages flagged in the audit.
How to fix images missing alt on Remix
- Locate every `<img>` tag and Remix/React component that renders images across your routes and components (e.g. `app/routes/`, `app/components/`). Run a project-wide search for `<img` and for any image component (e.g. Shopify Hydrogen's `<Image>`) to build a complete inventory.
- For each `<img>` tag, add a meaningful `alt` attribute that describes the image content — e.g. `<img src={product.featuredImage.url} alt={product.featuredImage.altText || product.title} />`. Never leave `alt` undefined or empty unless the image is purely decorative (in which case use `alt=""`).
- For Shopify Hydrogen/Remix storefronts using the `<Image>` component from `@shopify/hydrogen`, pass the `alt` prop explicitly: `<Image data={image} alt={image.altText ?? product.title} />`. The `data` prop alone does not guarantee a non-empty alt if the Storefront API returns a null `altText`.
- Update your GraphQL fragments (e.g. in `app/lib/fragments.ts` or inline in loaders) to always request the `altText` field alongside `url` and `width`/`height` for every image connection — product images, collection images, metafield images, and content/blog images.
- Add a fallback guard in your loader or component so that if `altText` is null/empty, a descriptive string (product title, collection name, or article title) is used instead: `const resolvedAlt = image.altText?.trim() || product.title;`.
- Run `grep -r 'alt=""' app/` and `grep -r "alt={''" app/` to catch any remaining empty alt attributes that are not intentionally decorative, then review and populate them. Commit the changes and verify rendered HTML with browser DevTools to confirm every `<img>` in the DOM has a non-empty `alt` attribute.
Does your site have this issue?
Run a free SEOLZ scan to find images missing alt — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Images missing alt?
Every `<img>` tag in HTML has an `alt` attribute — a short written description of what the image shows. When an image is missing its alt text (the `alt` attribute is absent or empty), search engines like Google cannot "see" what the image depicts, and screen-reader software used by visually impaired shoppers reads nothing aloud. Writing good alt text means filling in that attribute with a clear, specific description: for a product photo you might write `alt="Red leather crossbody bag with gold buckle clasp"`.
Why does images missing alt matter?
Google explicitly uses alt text to understand images and rank them in Google Images — a significant free-traffic channel for ecommerce stores. Missing alt text means your product photos are invisible to Google's crawler and cannot appear in image search results, cutting off a stream of high-intent shoppers. On the conversion side, assistive-technology users (screen readers) rely on alt text to understand your product imagery; missing it creates a poor shopping experience and in many jurisdictions exposes you to accessibility-law liability (ADA in the US, EN 301 549 in the EU, AODA in Canada). Even a handful of untagged images on key product or landing pages is enough to suppress rankings and fail an accessibility audit.
How do I fix images missing alt?
Add descriptive alt text to every product and content image so search engines and screen readers can understand what the image shows.
Authoritative references
- SEO Starter Guide — Google Search Central
- Google Images & alt text best practices — Google Search Central