Update social media sharing to use dynamic URLs and images

Update client/index.html and client/src/pages/VideoPage.tsx to dynamically set social media meta tags (og:url, og:image, twitter:image) to the current domain and video-specific thumbnails, resolving issues with incorrect sharing previews.

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:51:32 +00:00
parent 3ade22e7a1
commit 78ff5e47f8
2 changed files with 20 additions and 6 deletions

View File

@ -12,8 +12,8 @@
<meta property="og:type" content="website" />
<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?v=2025" />
<meta property="og:url" id="og-url" content="" />
<meta property="og:image" id="og-image" content="" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
@ -24,11 +24,11 @@
<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?v=2025" />
<meta name="twitter:image" id="twitter-image" content="" />
<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 property="og:image:secure_url" id="og-image-secure" content="" />
<meta name="format-detection" content="telephone=no" />
<meta name="robots" content="index, follow" />
@ -115,6 +115,19 @@
<link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
<!-- Replit script removed - caused scrolling issues -->
<!-- Dynamic social meta tags update -->
<script>
// Set dynamic URLs based on current domain
const currentOrigin = window.location.origin;
const socialImageUrl = `${currentOrigin}/api/social-image?v=2025`;
// Update meta tags with correct URLs
document.getElementById('og-url').setAttribute('content', currentOrigin + '/');
document.getElementById('og-image').setAttribute('content', socialImageUrl);
document.getElementById('twitter-image').setAttribute('content', socialImageUrl);
document.getElementById('og-image-secure').setAttribute('content', socialImageUrl);
</script>
<!-- Debug script for deployment issues -->
<script>
console.log('🚀 go4.video loading...');

View File

@ -180,9 +180,10 @@ export default function VideoPage() {
: `Schauen Sie sich "${currentVideo.title}" auf go4.video an. Professionelle Video-Streaming-Plattform mit exklusivem Content von FOLX STADL, Geschichte des Liedes und weiteren Premium-Inhalten.`;
updateMetaTag('og:description', richDescription);
// Uporabljan cache-busting parameter za social media refresh
// Get the correct domain dynamically and add cache-busting
const timestamp = new Date().getTime();
const socialThumbnail = `${window.location.origin}/api/video-thumbnail/${currentVideo.id}?v=${timestamp}`;
const currentDomain = window.location.origin;
const socialThumbnail = `${currentDomain}/api/video-thumbnail/${currentVideo.id}?v=${timestamp}`;
updateMetaTag('og:image', socialThumbnail);
updateMetaTag('og:image:width', '1200');
updateMetaTag('og:image:height', '630');