Seo Images

Image SEO & Optimization Guidelines

Technical rules for image implementation in a Next.js e-commerce site.

Always Use next/image

• **Never use raw ` tags** — always use from next/image`
• next/image provides automatic: WebP/AVIF conversion, lazy loading, responsive sizing, blur placeholders
• Missing these optimizations directly hurts Core Web Vitals (LCP and CLS), which are ranking factors

// GOOD
import Image from 'next/image';

// BAD - never do this

Alt Text Technical Requirements

The alt prop is required on every `` component. Search engines use alt text for image indexing and accessibility tools depend on it.

Rules

• alt prop must always be present — never omit it
• Must not be empty on meaningful images — product photos, category heroes, and informational images must have descriptive alt text
• Only use alt="" on purely decorative images (background patterns, visual separators)
• Pass alt text from data — pull from CMS/PIM altText field when available, fall back to product name + context

Examples by Image Type

| Image Type | Alt Pattern | Example | |-----------|------------|---------| | Product main | {Name} - {Key Spec or View} | "Blue Widget Pro 3000 - front view" | | Product gallery | {Name} - {Angle/Detail} | "Blue Widget Pro 3000 - control panel detail" | | Category hero | {Description of content} | "Range of wireless headphones from 20Hz to 40kHz" | | Icon/decorative | "" (empty) | alt="" | | Logo | {Company} logo | "Acme Corp logo" |

// GOOD — descriptive, from data
alt={`${product.name} - ${image.viewLabel}`}

// BAD
alt="product image"
alt="image_0"
alt=""  // on a meaningful product image
alt={product.sku}  // Not human-readable

Sizing & Layout Stability

• Always specify width and height — or use fill with a sized container
• Missing dimensions cause CLS (Cumulative Layout Shift) — content jumps around as images load
• Use the image's intrinsic dimensions, not display dimensions

// GOOD - explicit dimensions

// GOOD - fill mode with container

  

// BAD - no dimensions, causes CLS

Priority & LCP Optimization

• Use priority on the LCP image — the largest above-the-fold image (usually the hero product photo)
• Only 1-2 images per page should have priority — it disables lazy loading and triggers preload
• On product pages, the main product image is almost always the LCP element

// Product page hero image — this is the LCP element

// Gallery thumbnails — NOT priority, they're below fold or secondary

Image Formats

Configure next.config.js for optimal format delivery:

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    // If using an external image CDN:
    remotePatterns: [
      { protocol: 'https', hostname: '*.your-cdn.com' },
    ],
  },
};

• AVIF can be up to ~50% smaller than JPEG, WebP typically ~30% smaller (varies by image content and quality settings)
• next/image automatically serves the best format the browser supports
• If the image source is external, add the domain to remotePatterns

Lazy Loading

• Default behavior is lazy loading — do not add loading="lazy" manually (it's redundant)
• Only override with priority for above-the-fold images
• Lazy loading prevents offscreen images from blocking initial page load

Blur Placeholder

Use blur placeholders for product images to reduce perceived loading time and CLS:

Generate blurDataURL at build time or from the CMS/PIM system.

Common Technical Anti-Patterns

1. Raw `` tags — always use next/image
2. Missing alt prop — every ` must have alt`; use empty string only for decorative images
3. Empty alt on product images — only use alt="" for purely decorative images
4. Missing dimensions — causes CLS, hurts Core Web Vitals
5. Priority on every image — only the LCP image (1-2 per page) should have priority
6. Enormous source images — if displaying at 800px wide, don't serve a 4000px source; use sizes prop
7. Missing remote patterns — external images fail silently without remotePatterns config

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: mvstepanek
• Source: mvstepanek/nextjs-ecommerce-seo-skills
• License: MIT

Install and usage instructions live in the source repository linked above.