Improve social media sharing image quality and compatibility

Update video thumbnail generation to use regex for robust parameter replacement, ensuring optimal dimensions (1200x630) and JPG format for Facebook sharing, and add `og:image:secure_url` metadata.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 401e2ec0-e00d-4f10-9d0e-60f3d479f9a5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 2c2fdea5-83d6-40a8-8465-f0fdf2e8e76a
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/401e2ec0-e00d-4f10-9d0e-60f3d479f9a5/pRGdxi8
This commit is contained in:
sebastjanartic 2026-01-11 13:26:57 +00:00
parent 1bb17e1b3c
commit 44f15d166b

View File

@ -138,9 +138,13 @@ export async function registerRoutes(app: Express): Promise<Server> {
const videoUrl = `${baseUrl}/video/${video.id}`; const videoUrl = `${baseUrl}/video/${video.id}`;
// Get high-quality thumbnail for sharing (1200x630 is ideal for Facebook) // Get high-quality thumbnail for sharing (1200x630 is ideal for Facebook)
const thumbnailUrl = video.thumbnailUrl let thumbnailUrl = `${baseUrl}/api/social-image`;
? video.thumbnailUrl.replace('width=400&height=225', 'width=1200&height=630').replace('format=webp', 'format=jpg') if (video.thumbnailUrl) {
: `${baseUrl}/api/social-image`; thumbnailUrl = video.thumbnailUrl
.replace(/width=\d+/gi, 'width=1200')
.replace(/height=\d+/gi, 'height=630')
.replace(/format=webp/gi, 'format=jpg');
}
// Clean description for meta tags // Clean description for meta tags
const description = video.description const description = video.description
@ -162,6 +166,7 @@ export async function registerRoutes(app: Express): Promise<Server> {
<meta property="og:title" content="${title}"> <meta property="og:title" content="${title}">
<meta property="og:description" content="${description}"> <meta property="og:description" content="${description}">
<meta property="og:image" content="${thumbnailUrl}"> <meta property="og:image" content="${thumbnailUrl}">
<meta property="og:image:secure_url" content="${thumbnailUrl}">
<meta property="og:image:width" content="1200"> <meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630"> <meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg"> <meta property="og:image:type" content="image/jpeg">
@ -1415,9 +1420,13 @@ export async function registerRoutes(app: Express): Promise<Server> {
const videoUrl = `${baseUrl}/video/${video.id}`; const videoUrl = `${baseUrl}/video/${video.id}`;
// Get high-quality thumbnail for sharing (1200x630 is ideal for Facebook) // Get high-quality thumbnail for sharing (1200x630 is ideal for Facebook)
const thumbnailUrl = video.thumbnailUrl let thumbnailUrl = `${baseUrl}/api/social-image`;
? video.thumbnailUrl.replace('width=400&height=225', 'width=1200&height=630').replace('format=webp', 'format=jpg') if (video.thumbnailUrl) {
: `${baseUrl}/api/social-image`; thumbnailUrl = video.thumbnailUrl
.replace(/width=\d+/gi, 'width=1200')
.replace(/height=\d+/gi, 'height=630')
.replace(/format=webp/gi, 'format=jpg');
}
// Clean description for meta tags // Clean description for meta tags
const description = video.description const description = video.description
@ -1439,6 +1448,7 @@ export async function registerRoutes(app: Express): Promise<Server> {
<meta property="og:title" content="${title}"> <meta property="og:title" content="${title}">
<meta property="og:description" content="${description}"> <meta property="og:description" content="${description}">
<meta property="og:image" content="${thumbnailUrl}"> <meta property="og:image" content="${thumbnailUrl}">
<meta property="og:image:secure_url" content="${thumbnailUrl}">
<meta property="og:image:width" content="1200"> <meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630"> <meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg"> <meta property="og:image:type" content="image/jpeg">