Image Alt Text for SEO in Nuxt · Nuxt SEO

[NuxtSEO](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

Learn SEO

Master search optimization

Nuxt

 Vue

[SEO Checklist](https://nuxtseo.com/learn-seo/checklist) [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup) [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

[Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)

- [Titles](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/titles)
- [Meta Description](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/descriptions)
- [Image Alt Text](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/alt-text)
- [Social Sharing](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph)
- [Rich Results](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/rich-results)
- [Schema.org](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/schema-org)
- [Twitter Cards](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/twitter-cards)

[ Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)

- [Robots Txt](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/robots-txt)
- [Sitemaps](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/sitemaps)
- [Robot Meta Tag](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/meta-tags)
- [Canonical Link Tag](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/canonical-urls)
- [HTTP Redirects](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/redirects)
- [Duplicate Content](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/duplicate-content)
- [llms.txt](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers/llms-txt)

[ Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)

- [URL Structure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/url-structure)
- [Pagination](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/pagination)
- [Trailing Slashes](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/trailing-slashes)
- [Query Parameters](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/query-parameters)
- [Hreflang & i18n](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/i18n)
- [404 Pages](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/404-pages)
- [Dynamic Routes](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/dynamic-routes)
- [Internal Linking](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/internal-linking)
- [Programmatic SEO](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/programmatic-seo)
- [Rendering Modes](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/rendering)
- [Security](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

[ Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)

- [Getting Indexed](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/going-live)
- [Google Search Console](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/search-console)
- [Core Web Vitals](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/core-web-vitals)
- [Indexing Issues](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/indexing-issues)
- [SEO Monitoring](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/seo-monitoring)
- [Site Migration](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/site-migration)
- [IndexNow](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/indexnow)
- [Debugging](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/debugging)
- [AI Search Optimization](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen/ai-optimized-content)

1. [Learn SEO for Nuxt](https://nuxtseo.com/learn-seo)
2.
3. [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
4.
5. [Alt Text](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/alt-text)

# Image Alt Text for SEO in Nuxt

How to write effective image alt text in Nuxt for accessibility, Google Images ranking, and AI model understanding.

[![Harlan Wilton](https://avatars.githubusercontent.com/u/5326365?v=4)Harlan Wilton](https://x.com/harlan-zw)8 mins read Published Mar 23, 2026

What you'll learn

- Alt text is the [#1 accessibility failure](https://webaim.org/projects/million/) on the web, with 55.1% of homepage images missing it entirely
- Google Images accounts for [22.6% of all internet searches](https://sparktoro.com/blog/google-marketing-live-2019-recap/). Alt text is the primary ranking signal for image results
- `@nuxt/image` handles optimization (resizing, formats, lazy loading) but you still write the alt text
- Google's John Mueller has stated alt text is [not primarily an SEO decision](https://www.searchenginejournal.com/john-mueller-alt-text-is-not-primarily-an-seo-decision/537035/), it is an accessibility one that also helps search

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.

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

## [Why Alt Text Matters](#why-alt-text-matters)

Google Images handles [22.6% of all internet searches](https://sparktoro.com/blog/google-marketing-live-2019-recap/). Of every 1,000 Google searches, only [374 clicks go to the open web](https://sparktoro.com/blog/for-every-1000-google-searches-only-374-clicks-go-to-the-open-web/). Image search is one of the few channels where visual content can still drive organic traffic directly.

1. **Image search rankings**: Google's [image SEO documentation](https://developers.google.com/search/docs/appearance/google-images) explicitly lists alt text as a key ranking factor for image results.
2. **AI Overviews and citations**: SEMrush's [AI Overview study](https://www.semrush.com/blog/google-sge-study/) found that visual content with proper metadata is more likely to be cited in AI-generated snippets. Descriptive alt text helps AI crawlers understand what your images depict.
3. **Accessibility compliance**: Missing alt text is the [#1 accessibility error](https://webaim.org/projects/million/) across the web. WCAG 2.1 [requires text alternatives](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) for all informative images. The [European Accessibility Act](https://ec.europa.eu/social/main.jsp?catId=1202) became enforceable in June 2025, and the [ADA's web accessibility guidance](https://www.ada.gov/resources/web-guidance/) received updates in 2024. Legal risk is real.
4. **Core Web Vitals**: Images are often the [Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) element. Alt text provides meaningful content to users while the image loads, and screen readers announce it immediately.

## [The State of Alt Text on the Web](#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.

_Alt text quality across the top 1,000,000 homepages. Source: [WebAIM Million 2025](https://webaim.org/projects/million/)_

Over half of all homepage images have no alt text at all. Another 15% use generic strings like "image", "photo", or a raw filename. Fewer than 1 in 4 images have properly descriptive alt text.

### [Impact Comparison](#impact-comparison)

| Scenario | Search Result | Accessibility | AI Understanding |
| --- | --- | --- | --- |
| **Good alt text**: `alt="Bar chart comparing Nuxt vs Next.js build times"` | Image ranks for relevant queries | Screen reader conveys meaning | AI understands the data being presented |
| **Missing alt text**: `alt=""` or no attribute | Image ignored in search | Screen reader skips image | AI has no image context |
| **Keyword-stuffed**: `alt="nuxt seo best nuxt framework nuxt optimize"` | Potential spam penalty | Confusing, unhelpful for users | AI may flag content as low quality |

## [Writing Effective Alt Text](#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/).

✅ Correct

❌ Wrong

```
<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](#nuxt-implementation)

### [Static Images with `<NuxtImg>`](#static-images-with-nuxtimg)

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

pages/index.vue

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

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

pages/about.vue

```
<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](#dynamic-alt-text-from-api-data)

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

pages/products/[slug].vue

```
<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](#content-images-in-markdown)

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

content/blog/my-post.md

```
![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](#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=""`](#when-to-use-empty-alt)

✅ Correct

❌ Wrong

```
<!-- 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](#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:

components/HeroBanner.vue

```
<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](#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:

pages/blog/[slug].vue

```
<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](https://nuxtseo.com/docs/og-image/getting-started/introduction) 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](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph) guide.

## [Automated Auditing](#automated-auditing)

Manually checking every image for alt text doesn't scale. Automate it with linting and testing tools.

### [ESLint for Vue Templates](#eslint-for-vue-templates)

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

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

eslint.config.ts

```
import pluginVueA11y from 'eslint-plugin-vuejs-accessibility'

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

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

### [Lighthouse Accessibility Audit](#lighthouse-accessibility-audit)

Chrome DevTools Lighthouse checks for missing alt text as part of its accessibility score. Run it against every page to catch issues that linting might miss (dynamic images, CMS content, third party embeds).

### [Runtime Testing with axe-core](#runtime-testing-with-axe-core)

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

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](#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 [explicitly stated](https://www.searchenginejournal.com/john-mueller-alt-text-is-not-primarily-an-seo-decision/537035/) that alt text is primarily an accessibility decision, not an SEO one.

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

[The 2026 SEO Checklist for Nuxt & Vue Pre-launch setup, post-launch verification, and ongoing monitoring. Interactive checklist with links to every guide.](https://nuxtseo.com/learn-seo/checklist) [Haven't launched yet? Start with the Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)

---

[Meta Description Meta descriptions get rewritten by Google 70% of the time anyway. Here's how to implement them properly in Nuxt using composables and let your content do the heavy lifting.](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/descriptions) [Social Sharing Configure Open Graph and Twitter Card meta tags for rich link previews on Facebook, X/Twitter, LinkedIn, Slack, and Discord.](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph)

On this page

- [Why Alt Text Matters](#why-alt-text-matters)
- [The State of Alt Text on the Web](#the-state-of-alt-text-on-the-web)
- [Writing Effective Alt Text](#writing-effective-alt-text)
- [Nuxt Implementation](#nuxt-implementation)
- [Decorative vs Informative Images](#decorative-vs-informative-images)
- [OG Image Alt Text](#og-image-alt-text)
- [Automated Auditing](#automated-auditing)
- [Common Mistakes](#common-mistakes)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

- [Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

### [NuxtSEO Pro](https://nuxtseo.com/pro "Nuxt SEO Pro")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/pro/docs/getting-started/mcp-setup)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Idea Generator](https://nuxtseo.com/tools/keyword-generator)
- [Keyword Research](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings](https://nuxtseo.com/tools/domain-rankings)

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)