sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add structured data for news and improved social sharing

Browse Source 
Implement NewsArticle schema and Open Graph tags on article pages for better search engine visibility and social media previews, and add WebSite schema to the homepage.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: b02ed261-705f-4f15-a1ae-b9b80b538081
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/koutl3W
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic
2026-03-06 14:17:59 +00:00
parent bc389539d0
commit bb5617b394
3 changed files with 149 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/hooks/use-page-meta.ts
+59 -7
View File
@@ -1,17 +1,69 @@
import { useEffect } from "react";
export function usePageMeta(title: string, description?: string) {
interface OgMeta {
ogTitle?: string;
ogDescription?: string;
ogImage?: string;
ogType?: string;
ogUrl?: string;
}
function setMetaTag(selector: string, content: string) {
let el = document.querySelector(selector) as HTMLMetaElement;
if (el) {
el.content = content;
} else {
el = document.createElement("meta");
const [attr, value] = selector.match(/\[(.+?)="(.+?)"\]/)?.slice(1) || [];
if (attr && value) {
el.setAttribute(attr, value);
el.content = content;
document.head.appendChild(el);
}
}
}
const DEFAULT_TITLE = "Volksmusik & Schlager | Folx Music Television";
const DEFAULT_DESC = "FOLX TV – Ihr Fernsehsender für Volksmusik und Schlager. Musikvideos, Live-Shows, Interviews und aktuelle Nachrichten aus der Welt der volkstümlichen Musik. Jetzt einschalten!";
const DEFAULT_OG_TITLE = "Volksmusik & Schlager | Folx Music Television";
const DEFAULT_OG_DESC = "FOLX TV – Ihr Fernsehsender für Volksmusik und Schlager. Musikvideos, Live-Shows und aktuelle Nachrichten aus der volkstümlichen Musikszene.";
const DEFAULT_OG_IMAGE = "https://folx.tv/og-image.jpg";
export function usePageMeta(title: string, description?: string, og?: OgMeta) {
useEffect(() => {
const suffix = " | Folx Music Television";
document.title = title + suffix;
if (description) {
let meta = document.querySelector('meta[name="description"]') as HTMLMetaElement;
if (meta) meta.content = description;
setMetaTag('meta[name="description"]', description);
}
if (og) {
if (og.ogTitle) setMetaTag('meta[property="og:title"]', og.ogTitle);
if (og.ogDescription) setMetaTag('meta[property="og:description"]', og.ogDescription);
if (og.ogImage) {
setMetaTag('meta[property="og:image"]', og.ogImage);
setMetaTag('meta[property="og:image:secure_url"]', og.ogImage);
setMetaTag('meta[name="twitter:image"]', og.ogImage);
}
if (og.ogType) setMetaTag('meta[property="og:type"]', og.ogType);
if (og.ogUrl) {
setMetaTag('meta[property="og:url"]', og.ogUrl);
setMetaTag('link[rel="canonical"]', og.ogUrl);
}
setMetaTag('meta[name="twitter:title"]', og.ogTitle || title + suffix);
setMetaTag('meta[name="twitter:description"]', og.ogDescription || description || DEFAULT_OG_DESC);
}
return () => {
document.title = "Volksmusik & Schlager | Folx Music Television";
let meta = document.querySelector('meta[name="description"]') as HTMLMetaElement;
if (meta) meta.content = "FOLX TV – Ihr Fernsehsender für Volksmusik und Schlager. Musikvideos, Live-Shows, Interviews und aktuelle Nachrichten aus der Welt der volkstümlichen Musik. Jetzt einschalten!";
document.title = DEFAULT_TITLE;
setMetaTag('meta[name="description"]', DEFAULT_DESC);
setMetaTag('meta[property="og:title"]', DEFAULT_OG_TITLE);
setMetaTag('meta[property="og:description"]', DEFAULT_OG_DESC);
setMetaTag('meta[property="og:image"]', DEFAULT_OG_IMAGE);
setMetaTag('meta[property="og:image:secure_url"]', DEFAULT_OG_IMAGE);
setMetaTag('meta[name="twitter:title"]', DEFAULT_OG_TITLE);
setMetaTag('meta[name="twitter:description"]', DEFAULT_OG_DESC);
setMetaTag('meta[name="twitter:image"]', DEFAULT_OG_IMAGE);
setMetaTag('meta[property="og:type"]', "website");
setMetaTag('meta[property="og:url"]', "https://folx.tv/");
};
}, [title, description]);
}, [title, description, og?.ogTitle, og?.ogDescription, og?.ogImage, og?.ogType, og?.ogUrl]);
}