sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve video sharing on social media with rich previews and descriptions

Browse Source 
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
This commit is contained in:
sebastjanartic
2025-08-04 18:51:24 +00:00
parent a2b430c2e0
commit eb7051843c
3 changed files with 101 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/video.tsx
+23 -7
View File
@@ -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]);