DEV Community

Cover image for The alt text mistake that's hurting your Next.js site's SEO
Elyvora US
Elyvora US

Posted on

The alt text mistake that's hurting your Next.js site's SEO

#webdev #nextjs #seo #img

Most developers write alt text like this:

<Image src={product.image} alt={product.name} />
Enter fullscreen mode Exit fullscreen mode

Or worse:

<Image src={product.image} alt="product image" />
Enter fullscreen mode Exit fullscreen mode

Both are technically valid. Both are SEO opportunities wasted.

Why alt text matters more than you think

Google Images drives real traffic. For product sites, it can be 15-20% of organic visits. But Google can't "see" your images—it reads the alt text to understand what's there.

Generic alt text like "product" or "headphones" tells Google nothing useful. You're competing with millions of images that say the same thing.

The pattern that works

Instead of just the product name, include context:

// Before
alt={product.name}
// "Wireless Headphones"

// After  
alt={`${product.name} - ${product.category} product with ${product.rating} star rating`}
// "Sony WH-1000XM5 - Audio product with 4.8 star rating"
Enter fullscreen mode Exit fullscreen mode

For blog posts:

// Before
alt={post.title}
// "Best Headphones 2025"

// After
alt={`${post.title} - ${post.category} guide featured image`}
// "Best Headphones 2025 - Buying Guide featured image"
Enter fullscreen mode Exit fullscreen mode

The difference? You're giving Google:

  • Brand/product name (searchable term)
  • Category context (topical relevance)
  • Content type (what kind of page this is)

Quick implementation

If you're using Next.js with a product catalog, you probably have a ProductCard component. Here's the fix:

// components/ProductCard.tsx
<Image
  src={product.image}
  alt={`${product.name}${product.brand ? ` by ${product.brand}` : ''} - shop now`}
  fill
  className="object-contain"
/>
Enter fullscreen mode Exit fullscreen mode

For blog cards:

// components/BlogCard.tsx
<Image
  src={post.featuredImage}
  alt={`${post.title} - ${post.category.name} article featured image`}
  fill
  className="object-cover"
/>
Enter fullscreen mode Exit fullscreen mode

Takes 5 minutes to update. Affects every image on your site.

One thing to avoid

Don't keyword-stuff:

// Don't do this
alt="Best wireless headphones 2025 top rated headphones buy headphones cheap headphones"
Enter fullscreen mode Exit fullscreen mode

Google knows. Keep it natural and descriptive.

Results

After updating alt text across a small product review site, Google Search Console showed image impressions increasing within a week. Nothing dramatic—SEO rarely is—but the effort-to-impact ratio is hard to beat.

Five minutes of work, permanent improvement.

What's your alt text strategy? Or are you still using "image" for everything?

Top comments (0)