From eb7051843c540a3a5bd40e4c3d1ea411f8244fbb Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 4 Aug 2025 18:51:24 +0000
Subject: [PATCH] Improve video sharing on social media with rich previews and
descriptions
Adds meta tags and server-side rendering for enhanced social sharing of videos.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 50814a1e-92e4-4968-856f-7bc7eedf5e8f
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/50814a1e-92e4-4968-856f-7bc7eedf5e8f/hUgv2Vz
---
client/index.html | 21 ++++++++++++++
client/src/pages/video.tsx | 30 +++++++++++++++-----
server/routes.ts | 57 ++++++++++++++++++++++++++++++++++++++
3 files changed, 101 insertions(+), 7 deletions(-)
diff --git a/client/index.html b/client/index.html
index 4b4d09e..c928c52 100644
--- a/client/index.html
+++ b/client/index.html
@@ -3,6 +3,27 @@
+ VideoStream - Video Streaming Platform
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/client/src/pages/video.tsx b/client/src/pages/video.tsx
index 250a48a..fb0aec8 100644
--- a/client/src/pages/video.tsx
+++ b/client/src/pages/video.tsx
@@ -76,26 +76,42 @@ export default function VideoPage() {
document.title = `${video.title} - VideoStream`;
// Update meta tags for social sharing
- const updateMeta = (name: string, content: string) => {
- let meta = document.querySelector(`meta[property="${name}"]`) as HTMLMetaElement;
+ const updateMeta = (name: string, content: string, property = true) => {
+ const selector = property ? `meta[property="${name}"]` : `meta[name="${name}"]`;
+ let meta = document.querySelector(selector) as HTMLMetaElement;
if (!meta) {
meta = document.createElement('meta');
- meta.setAttribute('property', name);
+ if (property) {
+ meta.setAttribute('property', name);
+ } else {
+ meta.setAttribute('name', name);
+ }
document.head.appendChild(meta);
}
meta.content = content;
};
const shareUrl = `${window.location.origin}/video/${video.id}`;
+
+ // Open Graph tags for Facebook
updateMeta('og:title', video.title);
updateMeta('og:description', video.description || `Oglej si ta video na VideoStream`);
updateMeta('og:image', video.thumbnailUrl);
+ updateMeta('og:image:width', '1200');
+ updateMeta('og:image:height', '630');
+ updateMeta('og:image:type', 'image/jpeg');
updateMeta('og:url', shareUrl);
updateMeta('og:type', 'video.other');
- updateMeta('twitter:card', 'summary_large_image');
- updateMeta('twitter:title', video.title);
- updateMeta('twitter:description', video.description || `Oglej si ta video na VideoStream`);
- updateMeta('twitter:image', video.thumbnailUrl);
+ updateMeta('og:site_name', 'VideoStream');
+
+ // Standard meta tags
+ updateMeta('description', video.description || `Oglej si ta video na VideoStream`, false);
+
+ // Twitter Card tags
+ updateMeta('twitter:card', 'summary_large_image', false);
+ updateMeta('twitter:title', video.title, false);
+ updateMeta('twitter:description', video.description || `Oglej si ta video na VideoStream`, false);
+ updateMeta('twitter:image', video.thumbnailUrl, false);
}
}, [video]);
diff --git a/server/routes.ts b/server/routes.ts
index 2c7a230..123767e 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -60,6 +60,63 @@ export async function registerRoutes(app: Express): Promise {
}
});
+ // Serve video page with meta tags for social sharing
+ app.get("/video/:id", async (req, res) => {
+ try {
+ const video = await storage.getVideo(req.params.id);
+ if (!video) {
+ return res.redirect("/");
+ }
+
+ const shareUrl = `${req.protocol}://${req.get('host')}/video/${video.id}`;
+ const html = `
+
+
+
+
+
+ ${video.title} - VideoStream
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+ res.send(html);
+ } catch (error) {
+ console.error("Error serving video page:", error);
+ res.redirect("/");
+ }
+ });
+
const httpServer = createServer(app);
return httpServer;
}