feat(/designs): dynamic OG image when filtered — sharing /designs?hue=rose on Twitter/LinkedIn/Slack now previews an actual rose design instead of generic og-default.png; unfiltered grid still uses default

f0fe84b66a8f5047b384e9fe779bc6a94c7cba63 · 2026-05-14 16:07:21 -0700 · SteveStudio2

Files touched

M server.js

Diff

commit f0fe84b66a8f5047b384e9fe779bc6a94c7cba63
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Thu May 14 16:07:21 2026 -0700

    feat(/designs): dynamic OG image when filtered — sharing /designs?hue=rose on Twitter/LinkedIn/Slack now previews an actual rose design instead of generic og-default.png; unfiltered grid still uses default
---
 server.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/server.js b/server.js
index a182167..b4a2e18 100644
--- a/server.js
+++ b/server.js
@@ -3418,10 +3418,20 @@ app.get('/designs', (req, res) => {
   const _titleHead = _titleCrumbs.length
     ? `${_titleCrumbs[0]} · ${total} design${total===1?'':'s'} — wallco.ai`
     : `All Designs — wallco.ai | AI-Original Wallpaper & Murals`;
+  // When the user lands on a filtered grid (?hue=rose, ?motif=floral, ?cat=…),
+  // share-link previews on Twitter/LinkedIn/Slack should show a REAL design
+  // from that filter, not the generic og-default.png. Picks the first design
+  // in the filtered slice; unfiltered /designs keeps og-default.
+  const _isFiltered = !!(cat || motifQ || hueQ || roomQ || q);
+  const _ogImage = (_isFiltered && slice[0]?.image_url)
+    ? `https://wallco.ai${slice[0].image_url}`
+    : '';
   res.type('html').send(`${htmlHead({
     title: _titleHead,
     description: `Browse ${total} wallco.ai original wallpaper designs. Every pattern unique, hand-curated, never repeated. Free samples available.`,
     canonical: `https://wallco.ai/designs`,
+    ogImage: _ogImage,
+    ogImageAlt: _isFiltered && slice[0] ? `${slice[0].title} — sample of ${_titleCrumbs[0] || 'wallco.ai'} designs` : '',
     preloadImages: slice.slice(0, 6).map(d => d.image_url).filter(Boolean)
   })}
 <body>

← effa221 perf(/design/:id): add fetchpriority=high + decoding=async t · back to Wallco Ai · fix(/provenance): 301 redirect to /about (content merged); a 6ae4fd4 →