fix(og): brandable static title + wider crawler UA coverage (#521)

@Rekoo-PS reported that gallery URLs sent via the WhatsApp Business
API render an unbranded "PicPeak - Photo Sharing Platform" preview
even though manual link sends from the WhatsApp app pick up the
per-event rich preview correctly. Two root causes, two fixes:

1. WhatsApp Business and 3rd-party preview services (Twilio,
   LinkPreview.net, etc.) don't always crawl with the recognisable
   "WhatsApp/X.Y.Z" UA we matched in nginx + galleryOgService.
   Extend the regex (both copies) to also catch WhatsAppBot, wa-bot,
   LinkPreview, and Slack-ImgProxy.

2. Even with broader UA coverage, some senders cache metadata with
   no UA at all and fetch the static SPA shell. That shell's
   <title> was hard-coded to "PicPeak - Photo Sharing Platform" —
   embarrassingly generic for any self-hosted brand. Switch to
   Vite's %VITE_DEFAULT_TITLE% / %VITE_DEFAULT_DESCRIPTION% HTML
   substitution so self-hosters can bake their brand into the
   fallback at build time. Defaults stay "PicPeak" so the upstream
   image doesn't change behaviour for anyone.

The per-event rich preview path (handleGalleryOgRequest, fired on
matched crawler UAs) is unchanged — this only improves the fallback
for unrecognised UAs and for the SPA-shell title that humans see in
their browser tab.

Adds a vite.config plugin to provide the defaults when env vars
aren't set, so unsubstituted "%VITE_..." literals never reach the
built HTML. Adds .env.example entries explaining the override.

Tests: extend galleryOgService.shareImage.test.js with an
isSocialCrawler suite that pins every documented UA (incl. the new
ones) plus three browser UAs (negative) and null/empty edge cases.
Verified locally: `vite build` with VITE_DEFAULT_TITLE="MyBrand"
produces <title>MyBrand</title> + og:title="MyBrand"; without the
env var falls back to "PicPeak".

Refs: #521
This commit is contained in:
Paul Nothaft
2026-05-18 22:45:00 +02:00
parent 3465b55abc
commit b960639035
7 changed files with 138 additions and 5 deletions
+27 -1
View File
@@ -4,7 +4,33 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>PicPeak - Photo Sharing Platform</title>
<!--
Static fallback title + Open Graph defaults (#521).
The runtime SPA updates these once React loads, and social-crawler
User-Agents hitting /gallery/<slug> get a per-event rich preview
served by backend's galleryOgService instead of this static shell.
But the third path — link previews fetched by WhatsApp Business
API, Twilio, LinkPreview, or any service that caches metadata
with a non-crawler UA — gets *this* HTML as-is. Defaulting the
title to "PicPeak - Photo Sharing Platform" left every such
preview looking unbranded for self-hosted installs.
Self-hosters set VITE_DEFAULT_TITLE / VITE_DEFAULT_DESCRIPTION
at build time (see .env.example) to bake their brand into this
fallback. Default values keep the upstream-image behaviour for
anyone who doesn't override them.
-->
<title>%VITE_DEFAULT_TITLE%</title>
<meta name="description" content="%VITE_DEFAULT_DESCRIPTION%" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="%VITE_DEFAULT_TITLE%" />
<meta property="og:title" content="%VITE_DEFAULT_TITLE%" />
<meta property="og:description" content="%VITE_DEFAULT_DESCRIPTION%" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="%VITE_DEFAULT_TITLE%" />
<meta name="twitter:description" content="%VITE_DEFAULT_DESCRIPTION%" />
<!-- Pre-React theme bootstrap (#358).
The browser may paint the very first frame before our inline