Skip to content

fix(seo): replace SVG data URI placeholders with proper fallback handling#218

Open
BuyWhere wants to merge 1 commit into
mainfrom
fix/buy-62196-product-image-placeholders
Open

fix(seo): replace SVG data URI placeholders with proper fallback handling#218
BuyWhere wants to merge 1 commit into
mainfrom
fix/buy-62196-product-image-placeholders

Conversation

@BuyWhere

Copy link
Copy Markdown
Owner

Summary

Fixes product card images rendering as generic SVG gradient placeholders (data:image/svg+xml) instead of real product photos or clean text fallbacks.

Ref: BUY-62196

Root Cause

Product card images on SEO landing pages (/air-purifier-singapore etc.) and search results were all displaying as SVG data URI placeholders due to:

  1. isUsableProductImage() treated SVG data URIs as valid images
  2. withFallbackImage() actively generated SVG placeholders via buildCategoryImage()
  3. ProductGridCard had a special rendering branch for SVG data URIs
  4. buildSeoLandingSchema() included SVG data URIs in JSON-LD
  5. Search page hasUsableProductImage() didn't reject data: protocol URLs

Changes (3 files, +5/-13 lines)

src/lib/seo-landing-pages.ts

  • isUsableProductImage(): reject SVG data URIs
  • withFallbackImage(): return null instead of generating SVG placeholder
  • buildSeoLandingSchema(): exclude SVG data URIs from JSON-LD image field

src/components/seo/SeoLandingPage.tsx

  • ProductGridCard: remove SVG-specific rendering branch

src/app/search/SearchResultsClient.tsx

  • hasUsableProductImage(): reject data: protocol URLs

Behavior After Fix

Scenario Before After
SEO card, no real image SVG gradient placeholder Brand text on gradient bg
SEO card, real image Real photo Real photo (unchanged)
JSON-LD image SVG data URI Omitted
Search result, no real image SVG overlay Clean text fallback

…ling

Product card images on SEO landing pages and search results were all
rendering as generic SVG gradient placeholders (data:image/svg+xml)
instead of real product photos or a clean text fallback.

Root causes:
- isUsableProductImage() returned true for SVG data URIs
- withFallbackImage() actively generated SVG placeholders via buildCategoryImage()
- ProductGridCard had a special branch rendering SVG data URIs as <Image>
- buildSeoLandingSchema() included SVG data URIs in JSON-LD image field
- search page hasUsableProductImage() didn't reject data: protocol URIs

Fixes:
- isUsableProductImage: return false for SVG data URIs
- withFallbackImage: return null instead of generating SVG placeholder
- ProductGridCard: remove SVG-specific rendering branch
- buildSeoLandingSchema: exclude SVG data URIs from structured data
- search hasUsableProductImage: reject data: protocol URLs

Ref: BUY-62196
@BuyWhere

Copy link
Copy Markdown
Owner Author

Fix complete — PR ready for merge

PR: #218
Status: Open, mergeable, clean CI state

What changed (3 files, +5/-13 lines)

  1. src/lib/seo-landing-pages.tsisUsableProductImage() now rejects SVG data URIs; withFallbackImage() returns null instead of generating SVG placeholders; buildSeoLandingSchema() excludes SVG data URIs from JSON-LD.

  2. src/components/seo/SeoLandingPage.tsx — Removed SVG-specific rendering branch from ProductGridCard.

  3. src/app/search/SearchResultsClient.tsxhasUsableProductImage() now rejects data: protocol URLs.

Expected behavior after merge

  • SEO pages with no real product image: brand/merchant text on gradient background (clean fallback)
  • SEO pages with real product image: unchanged
  • Search results with no real image: clean text fallback instead of SVG overlay
  • JSON-LD structured data: no more placeholder SVGs in image field

Next step

Merge PR #218 to deploy to Railway production.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant