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
This commit is contained in:
sebastjanartic
2025-09-03 10:47:45 +00:00
parent 3e2c11cf3a
commit 967aa3025c
3 changed files with 60 additions and 26 deletions
+9 -2
View File
@@ -13,17 +13,24 @@
<meta property="og:site_name" content="go4.video" />
<meta property="og:locale" content="de_DE" />
<meta property="og:url" content="https://go4video.replit.app/" />
<meta property="og:image" content="https://go4video.replit.app/api/social-image" />
<meta property="og:image" content="https://go4video.replit.app/api/social-image?v=2025" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="go4.video - Professional Video Streaming Platform" />
<!-- Twitter Card meta podatki -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@go4video" />
<meta name="twitter:title" content="go4.video – Video-Welt von Folx TV" />
<meta name="twitter:description" content="Video-Welt von Folx TV – immer bei dir" />
<meta name="twitter:image" content="https://go4video.replit.app/api/social-image" />
<meta name="twitter:image" content="https://go4video.replit.app/api/social-image?v=2025" />
<meta name="twitter:image:alt" content="go4.video - Professional Video Streaming Platform" />
<!-- WhatsApp/Viber specifične oznake -->
<meta property="og:image:secure_url" content="https://go4video.replit.app/api/social-image?v=2025" />
<meta name="format-detection" content="telephone=no" />
<meta name="robots" content="index, follow" />
<!-- Dodatni meta podatki za mobilne naprave -->
<meta name="application-name" content="go4.video" />
+7 -4
View File
@@ -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]);