Image Alt Text for SEO in Nuxt

Alt text describes images for screen readers and search engines. Google uses alt text with computer vision and page content to understand images. See its image guidance.

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

<img src="/dashboard-screenshot.webp" alt="Nuxt 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. Initial HTML: alt text is available in the image element without requiring JavaScript to add it.
3. Accessibility compliance: Missing alt text is the second most common accessibility failure in WebAIM's 2026 homepage sample. WCAG 2.1 requires text alternatives for informative images. The European Accessibility Act became enforceable for products and services in June 2025, and the US Department of Justice published its ADA Title II web accessibility rule in April 2024.
4. Core Web Vitals: Images are often the Largest Contentful Paint (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 2026 report examined one million homepages using automated accessibility checks. These checks cannot establish full accessibility compliance.

In WebAIM's February 2026 sample, 16.2% of home page images lacked alt text. Of images with alt text, 10.8% had questionable or repetitive text. These are separate denominators.

Choose alt text for the image's purpose:

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 the description concise. Use nearby text for detailed chart or diagram explanations
• 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="Nuxt 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">

<!-- Too vague -->
<img src="/hero.webp" alt="image">
<img src="/hero.webp" alt="screenshot">

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

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

Nuxt Implementation

Static Images with <NuxtImg>

The @nuxt/image module provides <NuxtImg> for optimized images. The alt prop works the same as native HTML:

<template>
  <NuxtImg
    src="/hero.webp"
    alt="Nuxt SEO module configuration panel with sitemap and robots settings"
    width="1200"
    height="600"
    loading="lazy"
  />
</template>

Use lazy loading for offscreen images. If this image appears above the fold, omit loading="lazy".

For standard <img> tags, you don't need anything special:

<template>
  <img
    src="/team-photo.webp"
    alt="Nuxt SEO team at Vue.js Amsterdam 2025"
    width="800"
    height="400"
  >
</template>

Dynamic Alt Text from API Data

When images come from a CMS or API, bind the alt text dynamically:

<script setup lang="ts">
const { slug } = useRoute().params
const { data: product } = await useFetch(`/api/products/${slug}`)
</script>

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

When using @nuxt/content, standard markdown image syntax applies:

![Comparison table of SSR vs SSG rendering times in Nuxt](/images/rendering-comparison.png)

The text inside the brackets becomes the alt attribute in the rendered HTML.

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 Nuxt 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() to set it:

<script setup lang="ts">
const { data: post } = await useFetch('/api/post')

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

The Nuxt OG Image module generates dynamic OG images automatically. You still need to set the ogImageAlt tag yourself for accessibility. 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'],
]

The default rule checks supported HTML elements, including <img>. Custom components such as <NuxtImg> need the rule's component mapping.

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

Forgetting alt on <NuxtImg>: The <NuxtImg> component accepts an alt prop like a native <img> tag. Image optimization doesn't replace the need for descriptive alt text.

Checklist