Seo images

Skill mvstepanek/nextjs-ecommerce-seo-skills/global-skills/seo-images

SEO skills for AI coding assistants (Claude Code + GitHub Copilot) targeting Next.js e-commerce sites

Install

npx -y skills add mvstepanek/nextjs-ecommerce-seo-skills --skill seo-images

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Image SEO and optimization rules for Next.js. Use when adding images, product photos, or working with next/image. Covers alt text, sizing, formats, lazy loading, and LCP optimization.

SKILL.md

2.6 KB, as published. Nobody here has run it

Image SEO & Optimization Guidelines

Follow these rules when adding or modifying images in a Next.js project.

Always Use next/image

Never use raw <img> tags — always use <Image> from next/image.

Benefits: automatic WebP/AVIF conversion, lazy loading, responsive sizing, blur placeholders.

import Image from 'next/image';

// GOOD
<Image src="/photo.jpg" alt="Descriptive alt text" width={800} height={600} />

// BAD
<img src="/photo.jpg" alt="photo" />

Alt Text Rules

Image Type	Alt Text	Example
Product	`{Name} - {Key Detail}`	"Widget Pro - 500W motor"
Category hero	Describe the content	"Collection of industrial widgets"
Decorative only	Empty string	`alt=""`
Logo	`{Company} logo`	"Acme Corp logo"
Icon with meaning	Describe the meaning	"Warning: out of stock"

Rules

Every meaningful image MUST have descriptive alt text
Never use generic text: "image", "photo", "banner", "placeholder"
Empty alt="" ONLY for purely decorative images
Include relevant keywords naturally (product name, category)

Sizing

Always specify width and height — or use fill with a sized container
Missing dimensions cause CLS (Cumulative Layout Shift) — hurts Core Web Vitals

// Explicit dimensions
<Image src={url} alt={alt} width={800} height={600} />

// Fill mode
<div className="relative aspect-[4/3] w-full">
  <Image src={url} alt={alt} fill className="object-cover" />
</div>

Priority (LCP)

Use priority on the main above-the-fold image (1-2 per page max)
This is the LCP (Largest Contentful Paint) element — preloading it improves the core metric

<Image src={heroImage} alt={alt} width={1200} height={600} priority />

Image Formats

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
};

Blur Placeholder

Reduces perceived loading time and CLS:

<Image src={url} alt={alt} width={800} height={600} placeholder="blur" blurDataURL={blurHash} />

Common Mistakes

Raw <img> tags — always use next/image
Generic alt text — describe what's in the image
Missing dimensions — causes layout shift
priority on every image — only 1-2 per page
Empty alt on meaningful images — only decorative images get alt=""