Image Alt Text for SEO in Vue

Alt text describes images for screen readers and search engines. Google uses alt text, computer vision, and page content to understand images. Its image guidance recommends useful alt text without keyword stuffing.

Missing alt text can hide information from screen reader users. Every informative image on your site needs a descriptive alt attribute.

<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 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. Machine-readable descriptions: Alt text exposes an image description in HTML. It does not guarantee an AI model will use or cite it.
3. Accessibility: The W3C image decision tree distinguishes informative, functional, complex, and decorative images. Choose text based on the image's purpose.
4. Complex images: Charts need a short alt description and nearby text containing their essential data. Follow the W3C complex-image guidance. Alt text does not replace image-size or loading optimizations.

The State of Alt Text on the Web

The February 2026 WebAIM Million report tested one million homepages with automated checks. The results are not encouraging.

In that February 2026 sample, 16.2% of images lacked alt text. Of the images with alt text, 10.8% had questionable text, such as generic strings or filenames. Alt text affects each of these uses:

Writing Effective Alt Text

Good alt text is specific, concise, and describes what the image shows. The W3C provides an alt text 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 text concise. Use nearby text for detailed chart descriptions
• 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.

<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="Illustrative line graph comparing organic traffic across two periods">

<!-- 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="">

Vue Implementation

Static Images

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

<template>
  <img
    src="/hero.webp"
    alt="Vue SEO configuration panel with sitemap and robots settings"
    width="1200"
    height="600"
  >
</template>

If you're using a library like vite-imagetools or unplugin-imagemin for image optimization, the alt attribute is still written on the same <img> element.

Dynamic Alt Text from API Data

Load and parse your CMS data before rendering this component. Pass the image URL and description together as a typed product prop:

<script setup lang="ts">
defineProps<{ product: { image: string, imageAlt: string } }>()
</script>

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

The parent owns data fetching. Validate untrusted API fields there. If the route changes, pass the new product rather than retaining the previous route's data. This binding works in initial SSR HTML and browser rendering.

Store alt text alongside the image URL in your CMS. Adding it later is error prone and usually produces vague descriptions.

Content Images in Markdown

If your Vue app renders markdown content (via markdown-it, remark, mdream, or similar), standard markdown image syntax maps to the alt attribute:

![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 walks through this logic step by step.

When to Use Empty alt=""

<!-- 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="">

<!-- 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="">

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:

<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:

Provide parsed post data before rendering. This component uses a descriptive imageAlt field, rather than assuming the article title describes the image:

<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

const { post } = defineProps<{ post: { ogImage: string, imageAlt: string } }>()

useSeoMeta({
  ogImage: () => post.ogImage,
  ogImageAlt: () => post.imageAlt,
  twitterImage: () => post.ogImage,
  twitterImageAlt: () => post.imageAlt,
})
</script>

Install Unhead before rendering the component. Use public absolute image URLs. Static generation, prerendering, or SSR can put these tags in the response social platforms fetch.

For more on social sharing meta tags, see the 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:

pnpm add -D eslint-plugin-vuejs-accessibility

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 automated accessibility checks in CI, axe-core scans rendered pages:

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 can catch missing alt text in the rendered page. Automated checks cannot determine whether every description is useful. Review informative and complex images manually.

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 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="") may cause a screen reader to announce the filename. Behavior depends on the image context and assistive technology.

Checklist