/* SEO-H1 für XOBOR-Threadseiten -------------------------------- Ziel: Auf jeder Threadseite wird automatisch eine echte H1 erzeugt. Diese H1 ist optisch unsichtbar, aber technisch im DOM vorhanden.
Beispiel: document.title: "Unser Gästeforum - Beteiligung ohne Anmeldung » Login für Mitglieder"
erzeugte H1: "Login für Mitglieder" */
function isThreadPage(){ /* Erkennt typische XOBOR-Thread-URLs, z. B.: /t9824f110-Login-fuer-Mitglieder.html oder ähnliche t...-Threadadressen. */ return /\/t\d+f\d+-/i.test(location.pathname) || /\/t\d+/i.test(location.pathname); }
function cleanText(txt){ /* Entfernt doppelte Leerzeichen und störende Anführungszeichen am Anfang/Ende. */ return (txt || "") .replace(/\s+/g, " ") .replace(/^\s*["“”'„]+|["“”'„]+\s*$/g, "") .trim(); }
function cleanThreadTitleFromDocumentTitle(){ var title = cleanText(document.title);
/* XOBOR setzt oft: "Forenbereich » Threadtitel"
Wir brauchen nur den letzten Teil nach dem letzten ». Beispiel: "Unser Gästeforum - Beteiligung ohne Anmeldung » Login für Mitglieder" wird zu: "Login für Mitglieder" */ if(title.indexOf("»") !== -1){ title = title.split("»").pop(); }
/* Falls zusätzlich noch Domain-/Foren-Anhänge im Titel stehen, werden diese entfernt. */ title = title .replace(/\s*-\s*Forum-Transportunternehmer.*$/i, "") .replace(/\s*\|\s*Forum-Transportunternehmer.*$/i, "") .replace(/\s*-\s*www\.forum-transportunternehmer\.de.*$/i, "") .replace(/\s*\|\s*www\.forum-transportunternehmer\.de.*$/i, "") .replace(/\s*-\s*Das Forum.*$/i, "") .replace(/\s*\|\s*Das Forum.*$/i, "") .replace(/\s*-\s*Powered by Xobor.*$/i, "") .replace(/\s*\|\s*Powered by Xobor.*$/i, "") .trim();
return cleanText(title); }
function findVisibleThreadTitle(){ /* Reserve-Funktion: Falls document.title einmal keinen brauchbaren Titel liefert, sucht das Skript vorsichtig nach typischen Threadtitel-Elementen. */ var selectors = [ ".thread_title", ".threadtitle", ".topic_title", ".topictitle", ".posttitle", ".post_title", ".message_title", ".c_r_headline" ];
for(var i = 0; i < selectors.length; i++){ var el = document.querySelector(selectors[i]); if(!el) continue;
var text = cleanText(el.innerText || el.textContent);
function getThreadTitle(){ /* Bei XOBOR ist document.title meist zuverlässiger als irgendein sichtbarer Kasten im HTML. */ var titleFromPageTitle = cleanThreadTitleFromDocumentTitle();
function addCss(){ /* CSS für die unsichtbare, aber technisch vorhandene H1. Wichtig: Nicht display:none verwenden. Nicht visibility:hidden verwenden. */ if(document.getElementById("xoborSeoH1Css")) return;
var css = document.createElement("style"); css.id = "xoborSeoH1Css";
function removeOldSeoH1(){ /* Entfernt alte H1-Versionen, die durch frühere Skripte erzeugt wurden. Dadurch vermeiden wir doppelte H1. */ document.querySelectorAll("h1.xobor-seo-hidden-h1, h1.seo-hidden-h1").forEach(function(el){ el.remove(); }); }
function createSeoH1(){ if(!isThreadPage()) return;
removeOldSeoH1();
/* Wenn XOBOR selbst irgendwann eine echte sichtbare H1 ausgibt, erzeugen wir keine zweite H1. */ var visibleH1 = Array.from(document.querySelectorAll("h1")).find(function(h1){ return !h1.classList.contains("xobor-seo-hidden-h1") && !h1.classList.contains("seo-hidden-h1"); });
if(visibleH1) return;
var title = getThreadTitle();
if(!title || title.length < 4) return;
var h1 = document.createElement("h1"); h1.className = "xobor-seo-hidden-h1"; h1.textContent = title;
/* Die H1 wird ganz oben im body eingefügt. Optisch bleibt sie unsichtbar. */ document.body.insertBefore(h1, document.body.firstChild); }
function run(){ addCss(); createSeoH1(); }
/* Startet das Skript zuverlässig: - direkt nach DOM-Ladung - zusätzlich verzögert, falls XOBOR Inhalte später nachlädt */ if(document.readyState === "loading"){ document.addEventListener("DOMContentLoaded", run); }else{ run(); }
Zitat von Kipper-Spedition im Beitrag #40Ich gebe es zu, das ich den Inhalt dieses Threads nie richtig für ernst genommen habe und auch nicht verstehen wollte und konnte. So, nun hat aber eine (kostenlose) SEO-Analyse ergeben, dass die H1-Überschriften wichtig sind! und dafür!
Hehe, ich hatte mich schon gewundert... ¯\_(ツ)_/¯ Hauptsache jetzt mit im Boot...
<script> document.addEventListener("DOMContentLoaded", () => { "use strict"; // Hilfsfunktionen function clean(t){return (t||"").replace(/\s+/g," ").trim();} function getSeoH1(){ const h = document.querySelector("h1.xobor-seo-hidden-h1"); return h ? clean(h.textContent) : "";} function getVisibleH1(){return [...document.querySelectorAll("h1")].filter(h => !h.classList.contains("xobor-seo-hidden-h1"));} function isThread(){const p = location.pathname; return /\/t\d+/.test(p) || /thread\.php/.test(p);} function extractTitle(){let t = document.title; if(t.includes("»")) t = t.split("»").pop().trim(); return clean(t);}
dein H1-Skript aus Beitrag #31 hat mir super weitergeholfen! Da du für mich wie ein Mentor bist, habe ich mich von deiner Arbeit inspirieren lassen und ein bisschen herumexperimentiert.
Ich hatte die Idee, das Skript mal als reine Demonstration so umzuschreiben, dass es auf wirklich allen Geräten (vor allem auch auf iPhones und Smartwatches) maximal akku- und cpu-schonend läuft. Ich wollte einfach mal ausprobieren, wie man den Prozessor im Hintergrund komplett entlasten kann, wenn das Forum geladen ist.
Der neue Code soll einfach nur eine Idee und eine kleine Inspiration sein, was heute mit modernen Standards alles möglich ist. Ich hoffe, die Idee gefällt dir!
Mich würde deine Meinung zu diesem Ansatz riesig interessieren, wenn du mal Zeit hast.
// FUNKTION: Prüft die Seite und repariert die H1-Überschrift für Google const fixSEO = () => { // Prüfen, ob wir uns auf einer echten Xobor-Themenseite (Thread) befinden const isThreadPage = /\/t\d+/.test(location.pathname) || /thread\.php/.test(location.pathname); if (!isThreadPage) return; // Wenn nicht, Skript hier sofort abbrechen
// Schutz: Wenn die moderne H1 bereits erzeugt wurde, nichts mehr tun if (document.querySelector(".xobor-seo-h1-modern")) return;
// Prüfen, ob das Template bereits eine sichtbare H1 besitzt (außer Xobor-Standard-Versteckte) const hasH1 = document.querySelector("h1:not(.xobor-seo-hidden-h1)"); if (hasH1) return; // Wenn eine H1 da ist, ist keine Korrektur notwendig
// Die typischen Titel-Klassen vom Xobor Business Template 4 suchen const threadTitle = document.querySelector(".f_title, .topic-title, #main-content h2, .f_wrapper .f_title");
// Wenn ein Titel-Element gefunden wurde und Text enthält: if (threadTitle?.textContent?.trim()) { // Ein brandneues, sauberes H1-HTML-Element erstellen const seoH1 = document.createElement("h1"); seoH1.textContent = threadTitle.textContent.trim(); // Den Text des Themas hineinkopieren seoH1.className = "xobor-seo-h1-modern"; // Die neue CSS-Klasse für das Design zuweisen
// Die neue H1 genau vor dem alten Titel-Element im Forum einfügen threadTitle.parentNode.insertBefore(seoH1, threadTitle); threadTitle.style.display = "none"; // Das alte, unsaubere Titel-Element unsichtbar schalten } };
// LIVE-WÄCHTER: Reagiert ohne CPU-Last, wenn User im Forum blättern (Seite 2, 3...) const observer = new MutationObserver(() => { fixSEO(); });
// Start-Logik: Wartet, bis die Seite bereit ist, und aktiviert dann den Wächter if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", () => { fixSEO(); observer.observe(document.documentElement, { childList: true, subtree: true }); }); } else { fixSEO(); observer.observe(document.documentElement, { childList: true, subtree: true }); } })(); </script>
<style> /* DESIGN: Das Aussehen der neuen H1-Überschrift im Forum */ .xobor-seo-h1-modern { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* clamp() sorgt dafür, dass die Schrift auf Uhren klein ist und auf dem PC automatisch groß wird */ font-size: clamp(1.2rem, 3.5vw + 0.5rem, 2.25rem); font-weight: 800; letter-spacing: -0.02em; color: #111827; margin-bottom: 1rem; line-height: 1.25; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; /* Macht die Schrift auf iPhones/Macs schärfer */ }
/* KORREKTUR: Bereinigt die alten CSS-Fehlermeldungen aus den Foren-Logs mit modernem Standard */ .modern-opacity-fix { opacity: 1; border-radius: 6px; width: 100%; }
/* DARK MODE: Schaltet die Schriftfarbe automatisch um, wenn das Gerät auf "Dunkel" steht */ @media (prefers-color-scheme: dark) { .xobor-seo-h1-modern { color: #f9fafb; } } </style>
// Event-Listener für Buttons: Schließen und Aktualisieren (Reload) document.getElementById("seoH1CloseBtn").onclick = () => panel.remove(); document.getElementById("seoH1ReloadBtn").onclick = () => location.reload(); };
// Einmaliger Wächter: Baut das Panel auf und schaltet sich zur CPU-Schonung sofort ab (disconnect) const panelObserver = new MutationObserver((_, obs) => { if (document.body) { createPanel(); obs.disconnect(); } }); panelObserver.observe(document.documentElement, { childList: true, subtree: true }); })(); </script> {{user_admin==true.end}}
RE: H1-Überschriften im Header - Mit SEO-Analyse-Tool
Hallihallo!
Mir scheint nach wie vor die beste Erklärung die von @Daishi, dass viele einfache H1-Analyse-Tools die H1-Überschrift nicht erkennen.
Zitat von Daishi im Beitrag #30Warum das Tool noch "H2" anzeigt: Der Grund ist die Arbeitsweise des Analyse-Tools:Das Tool: Es lädt meistens nur den "rohen" HTML-Quelltext direkt vom Server herunter. Es führt dabei oft kein JavaScript aus. Da im ursprünglichen Quelltext von Xobor noch <h2> steht, sieht das Tool auch nur das. Google (der Bot): Im Gegensatz zu einfachen Online-Tools nutzt Google einen hochmodernen "Evergreen Chrome"-Renderer. Das bedeutet: Google lädt die Seite, führt das JavaScript aus, wartet kurz und schaut sich dann das Ergebnis an. Google sieht also genau das, was du beim "Untersuchen" siehst:
Denn es zeigen zwar das Google Rich Results Test Tool und Wolfgang dein SEO-Tool auch bei mir die verborgene H1-Überschrift an.
Aber vom Klenkschen Tool wird bei mir die jeweilige H1-Überschrift nach wie vor als H2 angezeigt... Und bei dir Arndt/@Kipper-Spedition auf den Unterseiten noch nicht mal das... Und Wolfgang, bei dir war das vor 1-2 Wochen auch wieder so, dass es als H2 angezeigt wird, vorher und jetzt wieder als H1. Bei euch allen war das auch so als ich diesen Thread gestartet hab.
Einige online SEO-Analyse-Tools zeigen doch den "versteckten" H1 an. Viele aber nicht, z.B. neilpatel.com bei keinem von uns, Wolfgang, Arndt & mir. SeoTheta nur auf Arndt deine Hauptseite "Forum". Atoms.so sieht bei mir den Forumsvollnamen mit Zusatz als H1 an, den Kurznamen als H2, bei dir Wolfgang dann sogar zwei H1, bei dir Arndt wieder nur "Forum".
❓⮕ Bei dir Arndt/@Kipper-Spedition ist nur das Wort "Forum" als Teil von "Willkommen im Forum" ein H1, und auch nur auf der Hauptseite, alle andern Seiten haben laut dem Klenkschen Tool keine H1-Überschrift, während die Google Rich Search Console ausgerechnet die Cookie-Einstellungen als H1-Überschrift erkennen, und das als zweite H1 auf der Eingangsseite.
Ich war mir immer nicht sicher, ob es sinnig ist, auf Thread-Seiten die jeweils ersten Beitrags-Titel als H1 zu haben, so dass das wohl in Suchmaschinen höher gewertet wird als der Forumsname... Eigentlich hatte ich gelesen, dass H1 auf jeder Seite dem Forumsnamen vorbehalten sein sollte, die Beitrags-Titel usw. dann H2. Andrerseits will ich ja schon, dass die Beiträge ein höheres Gewicht bekommen. Und hier https://www.seotheta.com/seo-tools/h1-structure-analysis wird auf "Should every page on my site have a unique H1?" geantwortet: Yes, absolutely - der Forumsname z.B. auf jeder Seite sähe 'dünn' aus, wenn jede unterschiedlich ist, zeigt das Vielfalt/Reichtum bzw. Wert der jeweiligen Seite.
// Event-Listener für Buttons: Schließen und Aktualisieren (Reload) document.getElementById("seoH1CloseBtn").onclick = () => panel.remove(); document.getElementById("seoH1ReloadBtn").onclick = () => location.reload(); };
// Einmaliger Wächter: Baut das Panel auf und schaltet sich zur CPU-Schonung sofort ab (disconnect) setTimeout(() => {createPanel();}, 300); })(); </script> {{user_admin==true.end}}