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;
}