From 967aa3025ce8464753d028ed647df58c1a3fde18 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Wed, 3 Sep 2025 10:47:45 +0000
Subject: [PATCH] Improve social media sharing by updating image generation
Updates social media image generation to use a new, dynamically generated image with a cache-busting parameter, ensuring up-to-date previews on platforms like WhatsApp and Viber. This includes enhancements to the SVG generation process using Sharp for optimized PNG output.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/OdlP8Wj
---
client/index.html | 11 ++++--
client/src/pages/VideoPage.tsx | 11 +++---
server/routes.ts | 64 +++++++++++++++++++++++-----------
3 files changed, 60 insertions(+), 26 deletions(-)
diff --git a/client/index.html b/client/index.html
index 5a5b642..c1823a4 100644
--- a/client/index.html
+++ b/client/index.html
@@ -13,17 +13,24 @@
-
+
+
-
+
+
+
+
+
+
+
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 53cb86a..a7fa0d3 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -171,15 +171,18 @@ export default function VideoPage() {
updateMetaTag('og:title', currentVideo.title);
updateMetaTag('og:description', currentVideo.description || `Watch ${currentVideo.title} on go4.video`);
- // Uporabljamo nov javni thumbnail API za social media deljenje
- const socialThumbnail = `${window.location.origin}/api/video-thumbnail/${currentVideo.id}`;
+ // Uporabljan cache-busting parameter za social media refresh
+ const timestamp = new Date().getTime();
+ const socialThumbnail = `${window.location.origin}/api/video-thumbnail/${currentVideo.id}?v=${timestamp}`;
updateMetaTag('og:image', socialThumbnail);
updateMetaTag('og:image:width', '1200');
updateMetaTag('og:image:height', '630');
updateMetaTag('og:image:type', 'image/png');
+ updateMetaTag('og:image:alt', `${currentVideo.title} - go4.video`);
updateMetaTag('og:url', window.location.href);
updateMetaTag('og:type', 'video.other');
updateMetaTag('og:video:duration', currentVideo.duration.toString());
+ updateMetaTag('og:site_name', 'go4.video');
// Update Twitter Card tags
const updateTwitterTag = (name: string, content: string) => {
@@ -196,8 +199,8 @@ export default function VideoPage() {
updateTwitterTag('twitter:title', currentVideo.title);
updateTwitterTag('twitter:description', currentVideo.description || `Watch ${currentVideo.title} on go4.video`);
updateTwitterTag('twitter:image', socialThumbnail);
- updateTwitterTag('twitter:image:width', '1200');
- updateTwitterTag('twitter:image:height', '630');
+ updateTwitterTag('twitter:image:alt', `${currentVideo.title} - go4.video`);
+ updateTwitterTag('twitter:site', '@go4video');
}
}, [currentVideo]);
diff --git a/server/routes.ts b/server/routes.ts
index 2d1b091..71a489d 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -701,32 +701,56 @@ export async function registerRoutes(app: Express): Promise {
// Optimized social image endpoint
app.get('/api/social-image', async (req, res) => {
try {
- const fs = await import('fs');
- const path = await import('path');
+ // Generate a modern social image with Sharp
+ const width = 1200;
+ const height = 630;
- // Read the original social share image
- const imagePath = path.join(process.cwd(), 'client/public/go4-video-social-share.png');
-
- if (!fs.existsSync(imagePath)) {
- return res.status(404).send('Social image not found');
- }
-
- const originalImage = fs.readFileSync(imagePath);
-
- // Optimize with Sharp for WhatsApp/social media (under 300KB)
- const optimizedBuffer = await sharp(originalImage)
- .resize(1200, 630, { fit: 'cover' })
+ // Create a gradient background with text overlay
+ const svg = ``;
+
+ // Convert SVG to optimized PNG
+ const buffer = await sharp(Buffer.from(svg))
.png({
- quality: 80,
- compressionLevel: 9,
- progressive: true
+ quality: 85,
+ compressionLevel: 8,
+ progressive: true
})
.toBuffer();
res.setHeader('Content-Type', 'image/png');
- res.setHeader('Cache-Control', 'public, max-age=86400'); // Cache for 24 hours
- res.setHeader('Content-Length', optimizedBuffer.length);
- res.send(optimizedBuffer);
+ res.setHeader('Cache-Control', 'public, max-age=3600'); // Cache 1 hour for easier updates
+ res.setHeader('Content-Length', buffer.length);
+ res.send(buffer);
} catch (error) {
console.error('Error generating optimized social image:', error);