From 4ece9e4ccd507b3ef8d3b47c73ad552278a364d4 Mon Sep 17 00:00:00 2001 From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com> Date: Sun, 8 Mar 2026 07:33:00 +0000 Subject: [PATCH] Add exclusive photos from recordings to the gallery and improve site metadata Integrate AdSense ads into the photo gallery, introduce SSR meta tags for the gallery page, and improve layout stability by reserving space for ads and dynamic content. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 81f3d8bc-2328-4374-a06e-57257dbb713b Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/OPD8Ro3 Replit-Helium-Checkpoint-Created: true --- client/src/components/adsense.tsx | 2 +- client/src/components/photo-gallery.tsx | 88 +++++++++++++++---------- client/src/index.css | 9 +++ client/src/pages/gallery.tsx | 2 +- client/src/pages/horoscope.tsx | 2 + replit.md | 1 + server/static.ts | 35 ++++++++++ server/vite.ts | 32 +++++++++ 8 files changed, 133 insertions(+), 38 deletions(-) diff --git a/client/src/components/adsense.tsx b/client/src/components/adsense.tsx index 6227a28..88d5b56 100644 --- a/client/src/components/adsense.tsx +++ b/client/src/components/adsense.tsx @@ -96,7 +96,7 @@ export function ArticleCardAd() { export function InArticleAd() { return ( -
+
Anzeige
{Math.min(visibleCount, totalCount)} von {totalCount} Fotos

-
- {visibleImages.map((img, i) => ( - + ); + })}
- {img.artist && ( -
- - {img.artist} - -
- )} - - ))} -
+
+ )); + })()} {hasMore && (
diff --git a/client/src/index.css b/client/src/index.css index 6f97663..2361fae 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -303,3 +303,12 @@ div[class^="fc-"] { inset: -1px; } } + +.ad-container { + contain: layout style; + overflow: hidden; +} + +.adsbygoogle { + contain: layout style; +} diff --git a/client/src/pages/gallery.tsx b/client/src/pages/gallery.tsx index e619a70..5171a17 100644 --- a/client/src/pages/gallery.tsx +++ b/client/src/pages/gallery.tsx @@ -7,7 +7,7 @@ import { usePageMeta } from "@/hooks/use-page-meta"; import { InArticleAd, PageSideAds } from "@/components/adsense"; export default function GalleryPageWrapper() { - usePageMeta("Fotogalerie - Volksmusik & Schlager Bilder", "Exklusive Fotos und Bilder von Volksmusik- und Schlager-Stars, Konzerten und Events. Die Volksmusik-Fotogalerie von FOLX TV."); + usePageMeta("Fotogalerie – Exklusive Backstage- & Konzertfotos | FOLX TV", "Einzigartige Fotos direkt von unseren Aufzeichnungen und Sendungen: Backstage-Momente, Konzertbilder und exklusive Aufnahmen der Volksmusik- und Schlager-Stars bei FOLX TV."); return (
diff --git a/client/src/pages/horoscope.tsx b/client/src/pages/horoscope.tsx index 086c403..7053f57 100644 --- a/client/src/pages/horoscope.tsx +++ b/client/src/pages/horoscope.tsx @@ -276,6 +276,7 @@ function SignDetail({ signIndex, onNavigate, aiHoroscopes }: { signIndex: number ))}
+
{tab === "daily" && (
@@ -310,6 +311,7 @@ function SignDetail({ signIndex, onNavigate, aiHoroscopes }: { signIndex: number

{horoscope.monthly}

)} +
diff --git a/replit.md b/replit.md index 669999e..0547d5b 100644 --- a/replit.md +++ b/replit.md @@ -7,6 +7,7 @@ The official website for Folx Music Television (folx.tv). Dark-themed bento grid - Primary keyword: "Volksmusik" — used across all page titles, meta descriptions, OG tags, and structured data - Dynamic canonical URLs via `usePageMeta` hook (updates `` per page) - SSR article pages: server-side meta tags (OG, Twitter, description, keywords, canonical) in both `server/vite.ts` (dev) and `server/static.ts` (prod) +- SSR gallery page (`/gallery`): OG meta, Twitter card, description, canonical — emphasizes exclusive backstage/concert photos from recordings - `stripExistingMeta()` removes duplicate meta/canonical from base HTML before injecting article-specific ones - JSON-LD structured data: WebSite (home) with SearchAction, NewsArticle + BreadcrumbList (articles) - Sitemap at `/sitemap.xml` — includes all static pages, categories, horoscope signs, and articles diff --git a/server/static.ts b/server/static.ts index d812718..8427908 100644 --- a/server/static.ts +++ b/server/static.ts @@ -95,6 +95,41 @@ export function serveStatic(app: Express) { } } + if (url.match(/^\/gallery(\/|$|\?)/)) { + let template = await fs.promises.readFile(indexPath, "utf-8"); + template = stripExistingMeta(template); + const galTitle = "Fotogalerie \u2013 Exklusive Backstage- & Konzertfotos | FOLX TV"; + const galDesc = "Einzigartige Fotos direkt von unseren Aufzeichnungen und Sendungen: Backstage-Momente, Konzertbilder und exklusive Aufnahmen der Volksmusik- und Schlager-Stars bei FOLX TV."; + const galUrl = `${canonicalBase}/gallery`; + const galImage = `${canonicalBase}/images/og-image.jpg`; + + const galTags = [ + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + `${escapeHtml(galTitle)}`, + ].join("\n "); + + template = template.replace(/[^<]*<\/title>/, galTags); + res.status(200).set({ "Content-Type": "text/html" }).end(template); + return; + } + if (url.match(/^\/horoskop(\/|$|\?)/)) { let template = await fs.promises.readFile(indexPath, "utf-8"); template = stripExistingMeta(template); diff --git a/server/vite.ts b/server/vite.ts index 4b229e2..617ee0b 100644 --- a/server/vite.ts +++ b/server/vite.ts @@ -113,6 +113,38 @@ export async function setupVite(server: Server, app: Express) { } } + if (url.match(/^\/gallery(\/|$|\?)/)) { + template = stripExistingMeta(template); + const galTitle = "Fotogalerie \u2013 Exklusive Backstage- & Konzertfotos | FOLX TV"; + const galDesc = "Einzigartige Fotos direkt von unseren Aufzeichnungen und Sendungen: Backstage-Momente, Konzertbilder und exklusive Aufnahmen der Volksmusik- und Schlager-Stars bei FOLX TV."; + const galUrl = `${canonicalBase}/gallery`; + const galImage = `${canonicalBase}/images/og-image.jpg`; + + const galTags = [ + `<meta property="og:title" content="${escapeHtml(galTitle)}" />`, + `<meta property="og:description" content="${escapeHtml(galDesc)}" />`, + `<meta property="og:type" content="website" />`, + `<meta property="og:url" content="${escapeHtml(galUrl)}" />`, + `<meta property="og:image" content="${escapeHtml(galImage)}" />`, + `<meta property="og:image:secure_url" content="${escapeHtml(galImage)}" />`, + `<meta property="og:image:width" content="1200" />`, + `<meta property="og:image:height" content="630" />`, + `<meta property="og:image:type" content="image/jpeg" />`, + `<meta property="og:site_name" content="Folx Music Television" />`, + `<meta property="og:locale" content="de_DE" />`, + `<meta name="twitter:card" content="summary_large_image" />`, + `<meta name="twitter:title" content="${escapeHtml(galTitle)}" />`, + `<meta name="twitter:description" content="${escapeHtml(galDesc)}" />`, + `<meta name="twitter:image" content="${escapeHtml(galImage)}" />`, + `<meta name="description" content="${escapeHtml(galDesc)}" />`, + `<meta name="keywords" content="Fotogalerie, Volksmusik Fotos, Schlager Bilder, Konzertfotos, Backstage, FOLX TV, Volksmusik Stars" />`, + `<link rel="canonical" href="${escapeHtml(galUrl)}" />`, + `<title>${escapeHtml(galTitle)}`, + ].join("\n "); + + template = template.replace(/[^<]*<\/title>/, galTags); + } + if (url.match(/^\/horoskop(\/|$|\?)/)) { template = stripExistingMeta(template); const signMatch = url.match(/^\/horoskop\/([^?#]+)/);