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

Add article specific meta tags for better SEO and social sharing

Browse Source 
Enhances the `usePageMeta` hook to include `article:published_time`, `article:author`, and `article:section` meta tags. Updates `ArticlePage` to pass these new properties when available.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 58667ffe-2f4f-4581-bbf7-758f889552ed
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:26:35 +00:00
parent d2874d8aa5
commit a94b98258a
2 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
client/src/hooks/use-page-meta.ts
View File

@ -6,6 +6,9 @@ interface OgMeta {
ogImage?: string;
ogType?: string;
ogUrl?: string;
articlePublishedTime?: string;
articleAuthor?: string;
articleSection?: string;
}
function setMetaTag(selector: string, content: string) {
@ -14,15 +17,20 @@ function setMetaTag(selector: string, content: string) {
el.content = content;
} else {
el = document.createElement("meta");
const [attr, value] = selector.match(/\[(.+?)="(.+?)"\]/)?.slice(1) || [];
if (attr && value) {
el.setAttribute(attr, value);
const match = selector.match(/\[(.+?)="(.+?)"\]/);
if (match) {
el.setAttribute(match[1], match[2]);
el.content = content;
document.head.appendChild(el);
}
}
}
function removeMetaTag(selector: string) {
const el = document.querySelector(selector);
if (el) el.remove();
}
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";
@ -47,10 +55,20 @@ export function usePageMeta(title: string, description?: string, og?: OgMeta) {
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);
if (og.articlePublishedTime) {
setMetaTag('meta[property="article:published_time"]', og.articlePublishedTime);
setMetaTag('meta[property="article:modified_time"]', og.articlePublishedTime);
}
if (og.articleAuthor) {
setMetaTag('meta[property="article:author"]', og.articleAuthor);
}
if (og.articleSection) {
setMetaTag('meta[property="article:section"]', og.articleSection);
}
}
return () => {
document.title = DEFAULT_TITLE;
@ -64,6 +82,10 @@ export function usePageMeta(title: string, description?: string, og?: OgMeta) {
setMetaTag('meta[name="twitter:image"]', DEFAULT_OG_IMAGE);
setMetaTag('meta[property="og:type"]', "website");
setMetaTag('meta[property="og:url"]', "https://folx.tv/");
removeMetaTag('meta[property="article:published_time"]');
removeMetaTag('meta[property="article:modified_time"]');
removeMetaTag('meta[property="article:author"]');
removeMetaTag('meta[property="article:section"]');
};
}, [title, description, og?.ogTitle, og?.ogDescription, og?.ogImage, og?.ogType, og?.ogUrl]);
}, [title, description, og?.ogTitle, og?.ogDescription, og?.ogImage, og?.ogType, og?.ogUrl, og?.articlePublishedTime, og?.articleAuthor, og?.articleSection]);
}

3
client/src/pages/article.tsx
View File

@ -115,6 +115,9 @@ export default function ArticlePage() {
ogImage: articleImage || undefined,
ogType: "article",
ogUrl: articleUrl,
articlePublishedTime: new Date(article.publishedAt).toISOString(),
articleAuthor: article.author || "Folx Music Television",
articleSection: article.category || "News",
} : undefined
);