Skip to content
beluga

SEO and link previews

The storefront is client-rendered, so without help a crawler or a link unfurler fetching /product/anything would get the generic shell: no product name, no price, no image. Rather than migrating to server-side rendering, the production HTML handler rewrites the <head> for the path being requested: title, description, canonical, Open Graph and Twitter tags, and JSON-LD Product with an Offer on product pages. Only the head is touched; React still boots and renders the body exactly as before.

Overrides

Section titled “Overrides”

Search appearance in the product editor holds a title (70 characters) and a description (160), which is where Google truncates. Blank means the tag is generated from the name and description. A collection’s introduction becomes its search-result description.

Sitemap and robots

Section titled “Sitemap and robots”

/sitemap.xml lists live products and collections, and /robots.txt points at it. Both are built from PUBLIC_URL, so a wrong value there produces a sitemap of links to the wrong host. When the storefront is locked, robots disallows everything and the sitemap is 404.

It only runs in production

Section titled “It only runs in production”

Under npm run dev, Vite serves index.html untouched, so none of this is visible. To check it:

Terminal window
npm run build && npm start
curl -s localhost:4000/product/canvas-tote | grep '<title>'

That is also the quickest proof, after any deploy, that the production handler is what is serving.

Images in previews

Section titled “Images in previews”

og:image is built from the served /assets/ URL, not the stored path, so it resolves under both image drivers. Upload at least one image per product; a preview with no image is the most common reason a shared link looks broken.