Add article specific meta tags for better SEO and social sharing

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

client/src/hooks/use-page-meta.ts

@@ -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) || [];
+    const match = selector.match(/\[(.+?)="(.+?)"\]/);
-    if (attr && value) {
+    if (match) {
-      el.setAttribute(attr, value);
+      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]);
 }

client/src/pages/article.tsx

@@ -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
   );