optimierte texte

src/hooks/use-page-meta.ts

@@ -0,0 +1,46 @@
+import { useEffect } from "react";
+
+const SITE_NAME = "WEBklar";
+const DEFAULT_TITLE = `${SITE_NAME} – Webagentur für KMU`;
+const DEFAULT_DESCRIPTION =
+  "WEBklar digitalisiert KMU: Website, Prozesse und Systeme aus einer Hand. Kostenlose Potenzialanalyse – Antwort innerhalb von 24 Stunden.";
+
+function setMetaTag(
+  attribute: "name" | "property",
+  key: string,
+  content: string
+): void {
+  let el = document.querySelector(`meta[${attribute}="${key}"]`);
+  if (!el) {
+    el = document.createElement("meta");
+    el.setAttribute(attribute, key);
+    document.head.appendChild(el);
+  }
+  el.setAttribute("content", content);
+}
+
+/**
+ * Setzt document.title und Meta-Beschreibung für SPA-Routen.
+ */
+export function usePageMeta(title: string, description?: string): void {
+  useEffect(() => {
+    const fullTitle = title.includes(SITE_NAME) ? title : `${title} | ${SITE_NAME}`;
+    document.title = fullTitle;
+
+    const desc = description ?? DEFAULT_DESCRIPTION;
+    setMetaTag("name", "description", desc);
+    setMetaTag("property", "og:title", fullTitle);
+    setMetaTag("property", "og:description", desc);
+    setMetaTag("name", "twitter:title", fullTitle);
+    setMetaTag("name", "twitter:description", desc);
+
+    return () => {
+      document.title = DEFAULT_TITLE;
+      setMetaTag("name", "description", DEFAULT_DESCRIPTION);
+      setMetaTag("property", "og:title", DEFAULT_TITLE);
+      setMetaTag("property", "og:description", DEFAULT_DESCRIPTION);
+      setMetaTag("name", "twitter:title", DEFAULT_TITLE);
+      setMetaTag("name", "twitter:description", DEFAULT_DESCRIPTION);
+    };
+  }, [title, description]);
+}