feat(links): branded social-preview cards with auto OG metadata

When a Umami short link is shared on Twitter/X, Facebook, LinkedIn,
Slack, Discord, WhatsApp, Telegram, or iMessage, the platform's crawler
now receives an Open Graph card from Umami's own domain instead of being
307'd straight through to the destination. The card content is
auto-derived from the destination URL's OG tags at create/update time,
so existing-link UX stays set-and-forget. Humans keep the existing
307 redirect path with UTMs merged.

- 6 new Link columns: ogTitle / ogDescription / ogImage plus per-field
  *Manual booleans tracking whether each value was user-set (preserved
  across URL changes) or auto-detected (re-fetched on URL change).
- src/lib/og.ts: SSRF-hardened OG fetcher built on undici with a custom
  connect.lookup (closes the DNS-rebinding TOCTOU), an IP-literal
  pre-check that allows only `unicast` ranges (rejects loopback,
  private, link-local, NAT64 / 6to4 / teredo transition prefixes, and
  IPv4-mapped IPv6), manual redirect loop with per-hop revalidation,
  body/timeout/content-type caps, and entity-decoded regex meta
  extraction with surrogate guards.
- src/lib/og-html.ts: single-line HTML renderer with strict per-response
  headers (CSP, X-Frame-Options DENY, Referrer-Policy, private/no-store
  + Vary: User-Agent). Conditional meta tag emission so empty fields
  produce no broken-image cards.
- /q/[slug] route: isbot() branch returns OG HTML; human branch
  unchanged.
- GET /api/links/og-preview: authed live-preview endpoint powering the
  form's debounced auto-detection.
- API schemas (create + update) gain the three OG fields with the
  '' → null Zod transform plus a public-http(s)-only refinement on
  ogImage that reuses the same SSRF guard at the API edge. Update
  route preserves the undefined-vs-null PATCH distinction.
- Form: collapsible "Customize preview" section with image preview,
  AbortController-cancellable live-preview fetch as you type, dirty-
  field-based submit normalization to avoid spurious clear-to-auto.
- LinksTable: minmax(0, 1fr) on flex columns so long destinations no
  longer blow out row width.
- 5 new i18n keys added to en-US and translated into all 51 other
  locales at correct alphabetical positions (each locale diff is
  exactly +5 lines).
- New direct dep: undici@^8.2.0 for the Agent + connect.lookup APIs.

Existing links are non-destructively migrated; old rows fall back to a
basic preview card (name as title, "Redirects to <host>" as description,
og:image omitted → twitter:card downgrades to summary). Future edits
organically backfill via the URL-change re-parse path.

Author: anvme

package.json

@@ -114,6 +114,7 @@
     "serialize-error": "^13.0.1",
     "thenby": "^1.4.0",
     "ua-parser-js": "^2.0.9",
+    "undici": "^8.2.0",
     "uuid": "^14.0.0",
     "zod": "^4.3.6",
     "zustand": "^5.0.12"

pnpm-lock.yaml

@@ -0,0 +1,8 @@
+-- AlterTable
+ALTER TABLE "link"
+ADD COLUMN     "og_title" VARCHAR(255),
+ADD COLUMN     "og_description" VARCHAR(500),
+ADD COLUMN     "og_image" VARCHAR(2047),
+ADD COLUMN     "og_title_manual" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "og_description_manual" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "og_image_manual" BOOLEAN NOT NULL DEFAULT false;

prisma/migrations/22_add_link_og_metadata/migration.sql

@@ -287,20 +287,26 @@ model Revenue {
 }
 
 model Link {
-  id          String    @id() @map("link_id") @db.Uuid
-  name        String    @db.VarChar(100)
-  url         String    @db.VarChar(500)
-  slug        String    @unique() @db.VarChar(100)
-  utmSource   String?   @map("utm_source") @db.VarChar(255)
-  utmMedium   String?   @map("utm_medium") @db.VarChar(255)
-  utmCampaign String?   @map("utm_campaign") @db.VarChar(255)
-  utmTerm     String?   @map("utm_term") @db.VarChar(255)
-  utmContent  String?   @map("utm_content") @db.VarChar(255)
-  userId      String?   @map("user_id") @db.Uuid
-  teamId      String?   @map("team_id") @db.Uuid
-  createdAt   DateTime? @default(now()) @map("created_at") @db.Timestamptz(6)
-  updatedAt   DateTime? @updatedAt @map("updated_at") @db.Timestamptz(6)
-  deletedAt   DateTime? @map("deleted_at") @db.Timestamptz(6)
+  id                  String    @id() @map("link_id") @db.Uuid
+  name                String    @db.VarChar(100)
+  url                 String    @db.VarChar(500)
+  slug                String    @unique() @db.VarChar(100)
+  utmSource           String?   @map("utm_source") @db.VarChar(255)
+  utmMedium           String?   @map("utm_medium") @db.VarChar(255)
+  utmCampaign         String?   @map("utm_campaign") @db.VarChar(255)
+  utmTerm             String?   @map("utm_term") @db.VarChar(255)
+  utmContent          String?   @map("utm_content") @db.VarChar(255)
+  ogTitle             String?   @map("og_title") @db.VarChar(255)
+  ogDescription       String?   @map("og_description") @db.VarChar(500)
+  ogImage             String?   @map("og_image") @db.VarChar(2047)
+  ogTitleManual       Boolean   @default(false) @map("og_title_manual")
+  ogDescriptionManual Boolean   @default(false) @map("og_description_manual")
+  ogImageManual       Boolean   @default(false) @map("og_image_manual")
+  userId              String?   @map("user_id") @db.Uuid
+  teamId              String?   @map("team_id") @db.Uuid
+  createdAt           DateTime? @default(now()) @map("created_at") @db.Timestamptz(6)
+  updatedAt           DateTime? @updatedAt @map("updated_at") @db.Timestamptz(6)
+  deletedAt           DateTime? @map("deleted_at") @db.Timestamptz(6)
 
   user User? @relation("user", fields: [userId], references: [id])
   team Team? @relation(fields: [teamId], references: [id])

prisma/schema.prisma

@@ -27,6 +27,7 @@
     "attribution": "الإسناد",
     "attribution-description": "شاهد كيف يتفاعل المستخدمون مع حملاتك التسويقية وما الذي يحفز التحويلات.",
     "audience": "جمهور",
+    "auto-detected-from-destination": "تم اكتشافه تلقائيًا من الوجهة",
     "average": "المتوسط",
     "back": "للخلف",
     "before": "قبل",
@@ -74,6 +75,8 @@
     "current": "الحالي",
     "current-password": "كلمة المرور الحالية",
     "custom-range": "فترة مخصّصة",
+    "customize-preview": "تخصيص المعاينة",
+    "customize-preview-description": "تجاوز العنوان والوصف والصورة المستخدمة عند مشاركة هذا الرابط القصير على وسائل التواصل الاجتماعي. يتم اكتشاف الحقول الفارغة تلقائيًا من عنوان URL الوجهة.",
     "dashboard": "لوحة التحكم",
     "data": "البيانات",
     "date": "التاريخ",
@@ -140,6 +143,7 @@
     "growth": "نمو",
     "hostname": "اسم المضيف",
     "hour": "ساعة",
+    "image-url": "رابط الصورة",
     "includes": "يتضمن",
     "inp": "INP",
     "insight": "رؤية معمقة",
@@ -230,6 +234,7 @@
     "poor": "ضعيف",
     "powered-by": "مشغل بواسطة {name}",
     "preferences": "التفضيلات",
+    "preview": "معاينة",
     "previous": "السابق",
     "previous-period": "الفترة السابقة",
     "previous-year": "العام السابق",

public/intl/messages/ar-SA.json

@@ -27,6 +27,7 @@
     "attribution": "Атрыбуцыя",
     "attribution-description": "Глядзіце, як карыстальнікі ўзаемадзейнічаюць з вашым маркетынгам і што прыводзіць да канверсій.",
     "audience": "Аўдыторыя",
+    "auto-detected-from-destination": "Аўтаматычна вызначана з прызначэння",
     "average": "Сярэдняе",
     "back": "Назад",
     "before": "Да",
@@ -74,6 +75,8 @@
     "current": "Цяперашні",
     "current-password": "Цяперашні пароль",
     "custom-range": "Іншы дыяпазон",
+    "customize-preview": "Наладзіць папярэдні прагляд",
+    "customize-preview-description": "Перавызначыць загаловак, апісанне і відарыс, якія выкарыстоўваюцца пры абагульванні гэтай кароткай спасылкі ў сацыяльных сетках. Пустыя палі вызначаюцца аўтаматычна з URL прызначэння.",
     "dashboard": "Інфармацыйная панэль",
     "data": "Дадзеныя",
     "date": "Дата",
@@ -140,6 +143,7 @@
     "growth": "Рост",
     "hostname": "Імя хаста",
     "hour": "Гадзіна",
+    "image-url": "URL відарыса",
     "includes": "Уключае",
     "inp": "INP",
     "insight": "Інсайт",
@@ -230,6 +234,7 @@
     "poor": "Дрэнна",
     "powered-by": "Зроблена {name}",
     "preferences": "Налады",
+    "preview": "Папярэдні прагляд",
     "previous": "Папярэдні",
     "previous-period": "Папярэдні перыяд",
     "previous-year": "Папярэдні год",

public/intl/messages/be-BY.json

@@ -27,6 +27,7 @@
     "attribution": "Атрибуция",
     "attribution-description": "Вижте как потребителите взаимодействат с вашия маркетинг и какво води до конверсии.",
     "audience": "Аудитория",
+    "auto-detected-from-destination": "Автоматично открито от местоназначението",
     "average": "Средно",
     "back": "Назад",
     "before": "Преди",
@@ -74,6 +75,8 @@
     "current": "Текущ",
     "current-password": "Текуща парола",
     "custom-range": "Обхват",
+    "customize-preview": "Персонализирай прегледа",
+    "customize-preview-description": "Замени заглавието, описанието и изображението, използвани при споделяне на тази кратка връзка в социалните мрежи. Празните полета се откриват автоматично от URL на местоназначението.",
     "dashboard": "Табло",
     "data": "Данни",
     "date": "Дата",
@@ -140,6 +143,7 @@
     "growth": "Растеж",
     "hostname": "Име на хост",
     "hour": "Час",
+    "image-url": "URL на изображението",
     "includes": "Включва",
     "inp": "INP",
     "insight": "Прозрение",
@@ -230,6 +234,7 @@
     "poor": "Слабо",
     "powered-by": "Поддържано от {name}",
     "preferences": "Предпочитания",
+    "preview": "Преглед",
     "previous": "Предишен",
     "previous-period": "Предишен период",
     "previous-year": "Предишна година",

public/intl/messages/bg-BG.json

@@ -27,6 +27,7 @@
     "attribution": "অ্যাট্রিবিউশন",
     "attribution-description": "দেখুন ব্যবহারকারীরা কীভাবে আপনার মার্কেটিংয়ের সাথে যুক্ত হয় এবং কীভাবে রূপান্তর ঘটে।",
     "audience": "দর্শক",
+    "auto-detected-from-destination": "গন্তব্য থেকে স্বয়ংক্রিয়ভাবে শনাক্ত",
     "average": "গড়",
     "back": "পেছনে",
     "before": "পূর্বে",
@@ -74,6 +75,8 @@
     "current": "বর্তমান",
     "current-password": "বর্তমান পাসওয়ার্ড",
     "custom-range": "কাস্টম রেঞ্জ",
+    "customize-preview": "প্রিভিউ কাস্টমাইজ করুন",
+    "customize-preview-description": "এই সংক্ষিপ্ত লিঙ্কটি সোশ্যাল মিডিয়ায় শেয়ার করার সময় ব্যবহৃত শিরোনাম, বিবরণ এবং চিত্র ওভাররাইড করুন। খালি ক্ষেত্রগুলি গন্তব্য URL থেকে স্বয়ংক্রিয়ভাবে শনাক্ত করা হয়।",
     "dashboard": "ড্যাশবোর্ড",
     "data": "ডেটা",
     "date": "তারিখ",
@@ -140,6 +143,7 @@
     "growth": "বৃদ্ধি",
     "hostname": "হোস্টনেম",
     "hour": "ঘণ্টা",
+    "image-url": "চিত্রের URL",
     "includes": "অন্তর্ভুক্ত",
     "inp": "INP",
     "insight": "অন্তর্দৃষ্টি",
@@ -230,6 +234,7 @@
     "poor": "খারাপ",
     "powered-by": "{name} দ্বারা চালিত",
     "preferences": "পছন্দসমূহ",
+    "preview": "প্রিভিউ",
     "previous": "পূর্ববর্তী",
     "previous-period": "পূর্ববর্তী সময়কাল",
     "previous-year": "গত বছর",

public/intl/messages/bn-BD.json

@@ -25,6 +25,7 @@
     "attribution": "Atribucija",
     "attribution-description": "Pogledajte kako korisnici komuniciraju s vašim marketingom i šta dovodi do konverzija.",
     "audience": "Publika",
+    "auto-detected-from-destination": "Automatski otkriveno iz odredišta",
     "average": "Prosjek",
     "back": "Nazad",
     "before": "Prije",
@@ -54,6 +55,10 @@
     "confirm": "Potvrdi",
     "confirm-password": "Potvrdi šifru",
     "contains": "Sadrži",
+    "customize-preview": "Prilagodi pregled",
+    "customize-preview-description": "Zamijenite naslov, opis i sliku koji se koriste kada se ovaj kratki link dijeli na društvenim mrežama. Prazna polja se automatski otkrivaju iz odredišnog URL-a.",
+    "image-url": "URL slike",
+    "preview": "Pregled",
     "regex-match": "Odgovara regularnom izrazu",
     "regex-not-match": "Ne odgovara regularnom izrazu",
     "content": "Sadržaj",

public/intl/messages/bs-BA.json

@@ -25,6 +25,7 @@
     "attribution": "Atribució",
     "attribution-description": "Vegeu com els usuaris interactuen amb el vostre màrqueting i què impulsa les conversions.",
     "audience": "Audiència",
+    "auto-detected-from-destination": "Detectat automàticament des de la destinació",
     "average": "Mitjana",
     "back": "Enrere",
     "before": "Abans",
@@ -54,6 +55,10 @@
     "confirm": "Confirmar",
     "confirm-password": "Confirma la contrasenya",
     "contains": "Conté",
+    "customize-preview": "Personalitza la visualització prèvia",
+    "customize-preview-description": "Substitueix el títol, la descripció i la imatge que s'utilitzen quan es comparteix aquest enllaç curt a les xarxes socials. Els camps buits es detecten automàticament des de l'URL de destinació.",
+    "image-url": "URL de la imatge",
+    "preview": "Visualització prèvia",
     "regex-match": "Coincideix amb l'expressió regular",
     "regex-not-match": "No coincideix amb l'expressió regular",
     "content": "Contingut",