TRAC-238: Update PDP metadata images to use correct image url - #3174
TRAC-238: Update PDP metadata images to use correct image url#3174jordanarldt wants to merge 1 commit into
Conversation
🦋 Changeset detectedLatest commit: b12c5ff The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Bundle Size ReportComparing against baseline from No bundle size changes detected. |
Unlighthouse Performance Comparison — VercelComparing PR preview deployment Unlighthouse scores vs production Unlighthouse scores. Summary ScoreAggregate score across all categories as reported by Unlighthouse.
Category Scores
Core Web Vitals
|
| defaultImage { | ||
| altText | ||
| url: urlTemplate(lossy: true) | ||
| url(width: 1200, lossy: true) |
There was a problem hiding this comment.
Is 1200 a little too big? Can we request it at a smaller url?
Also, won't this affect the page query as well? I can't remember if the product image carousel utilizes this image?
2 participants
What/Why?
ProductPageMetadataQueryrequestedurlTemplate, which returns a URL containing a literal{:size}placeholder.<Image>expands that through the CDN loader at render time, butgenerateMetadatauses the value verbatim — soog:imagepointed at an unfetchable URL.url(width: 1200)returns a concrete URL instead. Height is omitted deliberately: the stencil resizer fits the image inside the given box rather than cropping, so asking for a social aspect ratio like1200x630would just return a smaller square image for a square product photo.Testing
View source on a PDP and confirm
og:imagecontains/stencil/1200w/rather than/stencil/{:size}/, and that the URL loads.Migration
In
core/app/[locale]/(default)/product/[slug]/page-data.ts, update thedefaultImageselection inProductPageMetadataQuery:defaultImage { altText - url: urlTemplate(lossy: true) + url(width: 1200, lossy: true) }Also included as a
## Migrationsection in the changeset.