---
title: "Image Alt Text for SEO in Vue"
description: "Write alt text that passes accessibility audits, ranks in Google Images, and helps AI crawlers understand your Vue app's images."
canonical_url: "https://nuxtseo.com/learn-seo/vue/mastering-meta/alt-text"
last_updated: "2026-07-16"
---

<key-takeaways>

- Missing alt text is the [second most common accessibility failure](https://webaim.org/projects/million/) on the web: 16.2% of home page images lack it entirely
- Google uses alt text, computer vision, and page content together to understand what an image shows and to rank it in [Google Images](https://developers.google.com/search/docs/appearance/google-images)
- Standard `<img>` tags in Vue give you full control over alt text. Write it for every informative image
- Google's [John Mueller has said](https://www.searchenginejournal.com/google-alt-text-only-a-factor-for-image-search/442865/) he'd "focus more on the accessibility aspect there rather than the pure SEO aspect" when writing alt text

</key-takeaways>

Alt text describes images for screen readers and search engines. Google cannot see your images the way humans do. It reads the `alt` attribute to understand what an image depicts, how it relates to the page, and whether it should appear in [image search results](https://developers.google.com/search/docs/appearance/google-images).

Missing alt text means missing ranking signals and accessibility failures. Every informative image on your site needs a descriptive `alt` attribute.

```html
<img src="/dashboard-screenshot.webp" alt="Vue dashboard showing Core Web Vitals scores for mobile and desktop">
```

## Why Alt Text Matters

Alt text does two jobs at once: it's how screen readers describe an image to a blind or low-vision user, and it's how Google decides whether that image should show up in search results.

1. **Image search rankings**: Google's [image SEO guidance](https://developers.google.com/search/docs/appearance/google-images) calls alt text the most important attribute for image metadata, using it together with computer vision and page content to understand and rank an image.
2. **AI crawlers**: GPTBot, ClaudeBot, and PerplexityBot [fetch your HTML but don't execute JavaScript or render images](https://vercel.com/blog/the-rise-of-the-ai-crawler). The `alt` attribute ships in the raw HTML, so for these crawlers it's often the only description of an image they ever get.
3. **Accessibility compliance**: Missing alt text is the [second most common accessibility failure](https://webaim.org/projects/million/) on the web. WCAG 2.1 [requires text alternatives](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) for informative images. The [European Accessibility Act](https://eur-lex.europa.eu/eli/dir/2019/882/oj) became enforceable for products and services in June 2025, and the US Department of Justice published its [ADA Title II web accessibility rule](https://www.ada.gov/resources/2024-03-08-web-rule/) in April 2024.
4. **Core Web Vitals**: Images are often the [Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) element. Alt text gives users something meaningful while the image loads, and screen readers announce it immediately.

## The State of Alt Text on the Web

The [WebAIM Million report](https://webaim.org/projects/million/) audits the top 1,000,000 homepages annually. The results are not encouraging.

<charts-alt-text-quality>



</charts-alt-text-quality>

16.2% of all home page images are missing alt text entirely. Another 10.8% of images that do have alt text use generic, unhelpful strings like "image", "photo", or a raw filename. The difference between good and bad alt text shows up across three areas at once:

<table>
<thead>
  <tr>
    <th>
      Scenario
    </th>
    
    <th>
      Search Result
    </th>
    
    <th>
      Accessibility
    </th>
    
    <th>
      AI Understanding
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Good alt text
      </strong>
      
      : <code>
        alt="Bar chart comparing Vue vs React build times"
      </code>
    </td>
    
    <td>
      Image ranks for relevant queries
    </td>
    
    <td>
      Screen reader conveys meaning
    </td>
    
    <td>
      AI understands the data being presented
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Missing alt text
      </strong>
      
      : <code>
        alt=""
      </code>
      
       or no attribute
    </td>
    
    <td>
      Image ignored in search
    </td>
    
    <td>
      Screen reader skips image
    </td>
    
    <td>
      AI has no image context
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Keyword-stuffed
      </strong>
      
      : <code>
        alt="vue seo best vue framework vue optimize"
      </code>
    </td>
    
    <td>
      Potential spam penalty
    </td>
    
    <td>
      Confusing, unhelpful for users
    </td>
    
    <td>
      AI may flag content as low quality
    </td>
  </tr>
</tbody>
</table>

## Writing Effective Alt Text

Good alt text is specific, concise, and describes what the image shows. The W3C provides an [alt text decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) for determining the right approach per image type.

**Guidelines:**

- Be specific about what the image depicts, not what you want to rank for
- Include relevant keywords naturally where they fit the description
- Keep under 125 characters. Screen readers may truncate longer text
- Skip "image of" or "photo of" prefixes. Screen readers already announce the element as an image

For deeper technical guidance, see the [WebAIM Alternative Text guide](https://webaim.org/techniques/alttext/).

<code-group>

```html [✅ Correct]
<img src="/hero.webp" alt="Vue dashboard showing Core Web Vitals scores">

<img src="/team.webp" alt="Three developers collaborating at a whiteboard with system architecture diagrams">

<img src="/chart.webp" alt="Line graph showing 40% increase in organic traffic after implementing structured data">
```

```html [❌ Wrong]
<!-- Too vague -->
<img src="/hero.webp" alt="image">
<img src="/hero.webp" alt="screenshot">

<!-- Keyword stuffed -->
<img src="/hero.webp" alt="vue seo best vue seo tool vue optimization vue framework">

<!-- Empty alt on informative image -->
<img src="/chart.webp" alt="">
```

</code-group>

## Vue Implementation

### Static Images

In Vue, standard `<img>` tags work exactly as in HTML. You don't need a special component:

```vue [pages/index.vue]
<template>
  <img
    src="/hero.webp"
    alt="Vue SEO configuration panel with sitemap and robots settings"
    width="1200"
    height="600"
    loading="lazy"
  >
</template>
```

If you're using a library like [vite-imagetools](https://github.com/JonasKruckenberg/imagetools) or [unplugin-imagemin](https://github.com/unplugin/unplugin-imagemin) for image optimization, the `alt` attribute is still written on the same `<img>` element.

### Dynamic Alt Text from API Data

When images come from a CMS or API, bind the alt text dynamically using Vue's `:alt` binding:

```vue [src/pages/products/[slug].vue]
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const product = ref(null)

onMounted(() => {
  fetch(`/api/products/${route.params.slug}`).then(r => r.json()).then(d => product.value = d)
})
</script>

<template>
  <img
    v-if="product"
    :src="product.image"
    :alt="product.imageAlt"
    width="600"
    height="400"
  >
</template>
```

Always store alt text alongside the image URL in your CMS. Generating alt text after the fact is error prone and usually produces vague descriptions.

### Content Images in Markdown

If your Vue app renders markdown content (via [markdown-it](https://github.com/markdown-it/markdown-it), [remark](https://github.com/remarkjs/remark), [mdream](https://mdream.dev), or similar), standard markdown image syntax maps to the `alt` attribute:

```md [content/blog/my-post.md]
![Comparison table of SSR vs CSR rendering times in Vue](/images/rendering-comparison.png)
```

The text inside the brackets becomes the `alt` attribute in the rendered HTML. Make sure your markdown renderer doesn't strip or ignore it.

## Decorative vs Informative Images

Not every image needs alt text. The rule: if removing the image would lose information, it needs descriptive alt text. If the image is purely visual decoration, use an empty `alt=""` attribute. The W3C [decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) walks through this logic step by step.

### When to Use Empty `alt=""`

<code-group>

```vue [✅ Correct]
<!-- Decorative background pattern -->
<img src="/bg-pattern.svg" alt="">

<!-- Icon next to a text label (label provides context) -->
<span>
  <img src="/icons/check.svg" alt="">
  Task complete
</span>

<!-- Spacer or decorative divider -->
<img src="/divider.svg" alt="">
```

```vue [❌ Wrong]
<!-- Product photo with no alt -->
<img src="/product-shot.webp" alt="">

<!-- Chart that conveys data -->
<img src="/revenue-chart.png" alt="">

<!-- Screenshot showing a specific UI state -->
<img src="/error-modal.png" alt="">
```

</code-group>

### CSS Background Images

Images applied through CSS don't have alt attributes and aren't indexed by Google Images. Use CSS backgrounds for purely decorative visuals:

```vue [components/HeroBanner.vue]
<template>
  <div class="bg-cover bg-center h-96" style="background-image: url('/hero-bg.webp')">
    <h1>Welcome to Vue SEO</h1>
  </div>
</template>
```

If a CSS background image conveys information, consider switching to an `<img>` tag with proper alt text instead.

## OG Image Alt Text

When sharing links on social platforms, the `og:image:alt` meta tag describes the preview image for screen readers and assistive technology. Use `useSeoMeta()` from `@unhead/vue` to set it:

```vue [src/pages/blog/[slug].vue]
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const post = ref(null)

onMounted(() => {
  fetch(`/api/posts/${route.params.slug}`).then(r => r.json()).then(d => post.value = d)
})

useSeoMeta({
  ogImage: () => post.value?.ogImage,
  ogImageAlt: () => post.value?.title,
  twitterImage: () => post.value?.ogImage,
  twitterImageAlt: () => post.value?.title,
})
</script>
```

Note that social crawlers (Slack, Twitter, Facebook) fetch OG tags server-side. For social sharing meta tags to work correctly, your Vue app needs SSR via a framework like [Nuxt](https://nuxt.com), [Quasar](https://quasar.dev), or a custom [Vite SSR](https://vite.dev/guide/ssr) setup. Client-rendered SPAs will not surface OG tags to social crawlers. For more on social sharing meta tags, see the [Social Sharing](/learn-seo/vue/mastering-meta/social-sharing) guide.

## Automated Auditing

Manually checking every image for alt text doesn't scale. Automate it with linting and testing tools, plus Chrome DevTools' Lighthouse accessibility audit, which catches issues linting misses (dynamic images, CMS content, third party embeds) when run against every page.

### ESLint for Vue Templates

The `eslint-plugin-vuejs-accessibility` plugin catches missing alt attributes at development time:

```bash
pnpm add -D eslint-plugin-vuejs-accessibility
```

```ts [eslint.config.ts]
import pluginVueA11y from 'eslint-plugin-vuejs-accessibility'

export default [
  ...pluginVueA11y.configs['flat/recommended'],
]
```

This reports errors when `<img>` elements are missing alt attributes in your Vue templates.

### Runtime Testing with axe-core

For complete accessibility testing in CI, `axe-core` scans rendered pages:

```ts [tests/a11y.test.ts]
import AxeBuilder from '@axe-core/playwright'
import { expect, test } from '@playwright/test'

test('homepage has no accessibility violations', async ({ page }) => {
  await page.goto('/')
  const results = await new AxeBuilder({ page }).analyze()
  expect(results.violations).toEqual([])
})
```

This catches missing alt text on dynamically rendered images that static linting cannot detect.

## Common Mistakes

**Prefixing with "image of" or "photo of"**: Screen readers already announce "image" before reading the alt text. Writing `alt="Image of a sunset"` results in "image, Image of a sunset" being read aloud. Write `alt="Sunset over the Pacific Ocean"`.

**Keyword stuffing**: Cramming keywords into alt text can trigger Google's spam filters and provides a terrible screen reader experience. Write for humans first; Google's [John Mueller has said](https://www.searchenginejournal.com/google-alt-text-only-a-factor-for-image-search/442865/) he'd prioritize the accessibility side of alt text over the SEO side.

**Empty alt on informative images**: An image that conveys meaning (charts, product photos, screenshots) should never have `alt=""`. Empty alt tells screen readers to skip the image entirely.

**Same alt text on every image**: Using identical alt text across a product gallery (e.g., `alt="Product photo"` on 10 images) provides no useful information. Describe what makes each image unique: the angle, the color variant, the specific feature shown.

**Skipping alt on dynamic images**: When you render images from API data, it's easy to bind `:src` and forget `:alt`. Always pair them. A missing `alt` attribute (not the same as `alt=""`) causes screen readers to read the image filename aloud instead.

## Checklist

<checklist id="vue-alt-text">

- Every informative image has a descriptive `alt` attribute
- Decorative images use an empty `alt=""`, not a missing attribute
- Alt text stays under 125 characters and skips "image of" or "photo of" prefixes
- No keyword stuffing; alt text describes the image, not your target keywords
- `og:image:alt` is set for social share images via `ogImageAlt`
- `eslint-plugin-vuejs-accessibility` or an axe-core test catches missing alt in CI

</checklist>