How to fix seo product no images on Next.js (Headless)

Add at least one high-quality image to every product page so shoppers can see what they're buying and Google can surface your products in Image Search.

Steps for Next.js (Headless)

  1. In your product page component (e.g. `app/products/[slug]/page.tsx` or `pages/products/[slug].tsx`), fetch the product's images array from your headless commerce API (Shopify Storefront API, BigCommerce, etc.) and guard against empty arrays — fall back to a placeholder only as a last resort, but always prefer a real image.
  2. Replace any raw `<img>` tags with Next.js `<Image>` from `next/image`. Set a descriptive, keyword-rich `alt` prop (e.g. product name + key attribute) so Google Image Search can index it correctly.
  3. Add the image host domain to `images.remotePatterns` (or `images.domains`) in `next.config.js` so Next.js is allowed to optimise the remote URL.
  4. Expose the primary product image inside the page-level `generateMetadata` (App Router) or `<Head>` (Pages Router) as an Open Graph `og:image` tag — this lets Google surface the image in rich results and social cards.
  5. Add an `ImageObject` node inside the existing Product JSON-LD structured data block so Google can associate the image with the product in its Knowledge Graph and Shopping surfaces.
  6. Verify with Next.js `<Image>` props: set explicit `width` / `height` (or `fill` + a sized wrapper), `priority` on the hero/first image to avoid LCP regressions, and `sizes` for responsive delivery.
Official Next.js (Headless) documentation ↗

What is seo product no images?

A product gallery is the collection of photos shown on a product page — front-facing shots, detail views, lifestyle images, and so on. When a product page has no images at all, shoppers arrive to find nothing visual to look at, and Google's crawlers see a page with no media to index or display. Every major ecommerce platform makes it straightforward to upload and attach images directly to each product listing in the admin.

Products without images are effectively invisible in Google Image Search, which drives a significant share of discovery traffic for physical goods — Google's own guidelines confirm images are required for Image Search eligibility. Conversion rates on imageless product pages are dramatically lower because shoppers cannot evaluate what they're purchasing; studies consistently show product images are the single most influential factor in purchase decisions. Search engines also use image presence as a quality signal — a page with no images looks thin and untrustworthy, which can depress its ranking in standard web search as well. Finally, if you sell on a marketplace or run Google Shopping ads, missing images will prevent your listings from being approved entirely.

See the complete Seo product no images guide for every platform and the full background.

Not sure if your Next.js (Headless) store has this?

Run a free SEOLZ scan — we’ll find seo product no images and every other issue across your whole site.

Scan my site free

Fix seo product no images on another platform