Name: Volker Niederastroth
Author: Volker Niederastroth

HTML-Code

<script>
// ===========================================
// SPA ROUTER MIT CSS-LOADER  V.Niederastroth
// ===========================================
//  Single-Page-Application  für Mobirise
// SEO Optimiert mit Script - in die index.html in den head Bereich !!
// Warten bis Mobirise den Body gerendert hat
window.addEventListener("DOMContentLoaded", function () {

    const app = document.getElementById("app");
    const transition = document.getElementById("pageTransition");

    // Fallback für Startseite
    if (!location.hash) {
        location.hash = "#/start";
    }

    // Routen: Hier die Menüpunkte einsetzen- kleinschreibung beachten !!
	// Hinter dem letzten Menüpunkt kein komma !!
    const routes = {
        "start": "start.html",
        "leistungen": "leistungen.html",
        "galerie": "galerie.html",
        "impressum": "impressum.html",
        "kontakt": "kontakt.html" 
    };

    // Events
    window.addEventListener("hashchange", router);
    window.addEventListener("load", router);

    async function router() {
        let hash = location.hash.replace("#/", "");

        // Ungültige Route → Start
        if (!routes[hash]) {
            hash = "start";
            location.hash = "#/start";
        }

        await loadPage(routes[hash]);
    }

    async function loadPage(url) {

        // Transition sofort aktiv (kein Weißblitzen)
        if (transition) transition.classList.add("active");

        try {
            const res = await fetch(url);
            const html = await res.text();

            const doc = new DOMParser().parseFromString(html, "text/html");
            const sections = [...doc.querySelectorAll("section")];

            const firstMenuIndex =
                sections.findIndex(sec => sec.classList.contains("menu"));

            const contentSections =
                firstMenuIndex >= 0 ? sections.slice(firstMenuIndex + 1) : sections;

            let content = "";
            contentSections.forEach(sec => (content += sec.outerHTML));

            // Content sofort ersetzen
            app.innerHTML = content;

            // Sanft einblenden
            requestAnimationFrame(() => {
                app.style.opacity = 1;
                if (transition) transition.classList.remove("active");
            });

        } catch (e) {
            app.innerHTML = "<h2 style='padding:40px;text-align:center;'>Fehler beim Laden</h2>";
            if (transition) transition.classList.remove("active");
        }
    }
});
</script>

CSS-Code

JavaScript-Code

HTML-Code

<script>
// =====================================================
//  UNIVERSAL SEO MASTER SCRIPT für SPA + HTML
//  Enthält:
//  ✔ Auto-META (Titel, Description, OG, Twitter)
//  ✔ Auto-Canonical (ordner-unabhängig)
//  ✔ Besucher-Redirect → SPA-Version
//  ✔ Googlebot NICHT umleiten
//  ✔ Ordner automatisch erkennen
//  Dieser Code muss in die globale HTML ind Mobirise in den Head Bereich!!
// =====================================================

// ------------------------------
// META-DATEN JE SEITE (ANPASSEN!)
// ------------------------------
const META_DATA = {
    "start.html": {
        title: "Startseite – Niederastroth",
        description: "Willkommen in Niederastroth.",
        image: "https://www.niederastroth.de/vn.png"
    },
    "galerie.html": {
        title: "Galerie – Niederastroth",
        description: "Bilder & Eindrücke aus Niederastroth.",
        image: "https://www.niederastroth.de/vn.png"
    },
    "leistungen.html": {
        title: "Leistungen – Unser Angebot",
        description: "Übersicht aller Leistungen, die wir anbieten.",
        image: "https://www.niederastroth.de/vn.png"
    },
    "kontakt.html": {
        title: "Kontakt – So erreichen Sie uns",
        description: "Kontaktmöglichkeiten und Anschrift.",
        image: "https://www.niederastroth.de/vn.png"
    },
    "impressum.html": {
        title: "Impressum – Rechtliche Hinweise",
        description: "Alle rechtlichen Angaben zu unserer Webseite.",
        image: "https://www.niederastroth.de/vn.png"
    }
};

// ------------------------------
// AUTO-ERKENNUNG DER ECHTEN HTML-SEITE
// ------------------------------
const fullPath = window.location.pathname;       // /test2/galerie.html
const file = fullPath.split("/").pop();          // galerie.html
const folder = fullPath.replace(file, "");       // /test2/

// ------------------------------------------------------
// AUTOMATISCHE META-INJEKTION (SEO + SOCIAL MEDIA)
// ------------------------------------------------------
(function(){

    const meta = META_DATA[file];
    if (!meta) return; // Falls nicht definiert

    // Title
    document.title = meta.title;

    // Description
    let desc = document.querySelector("meta[name='description']");
    if (!desc) {
        desc = document.createElement("meta");
        desc.name = "description";
        document.head.appendChild(desc);
    }
    desc.content = meta.description;

    // OG Title
    let ogTitle = document.querySelector("meta[property='og:title']");
    if (!ogTitle) {
        ogTitle = document.createElement("meta");
        ogTitle.setAttribute("property", "og:title");
        document.head.appendChild(ogTitle);
    }
    ogTitle.content = meta.title;

    // OG Description
    let ogDesc = document.querySelector("meta[property='og:description']");
    if (!ogDesc) {
        ogDesc = document.createElement("meta");
        ogDesc.setAttribute("property", "og:description");
        document.head.appendChild(ogDesc);
    }
    ogDesc.content = meta.description;

    // OG URL
    let ogUrl = document.querySelector("meta[property='og:url']");
    if (!ogUrl) {
        ogUrl = document.createElement("meta");
        ogUrl.setAttribute("property", "og:url");
        document.head.appendChild(ogUrl);
    }
    ogUrl.content = window.location.origin + fullPath;

    // OG Image
    let ogImg = document.querySelector("meta[property='og:image']");
    if (!ogImg) {
        ogImg = document.createElement("meta");
        ogImg.setAttribute("property", "og:image");
        document.head.appendChild(ogImg);
    }
    ogImg.content = meta.image;

    // Twitter Card
    let tw = document.querySelector("meta[name='twitter:card']");
    if (!tw) {
        tw = document.createElement("meta");
        tw.name = "twitter:card";
        document.head.appendChild(tw);
    }
    tw.content = "summary_large_image";

})();

// ------------------------------------------------------
// AUTOMATISCHER CANONICAL-TAG (ORDNERUNABHÄNGIG)
// ------------------------------------------------------
(function(){

    const canonicalFiles = Object.keys(META_DATA);

    if (canonicalFiles.includes(file)) {

        const canonicalUrl =
            window.location.origin + folder + file;

        document.write(
            '<link rel="canonical" href="' + canonicalUrl + '" />'
        );
    }

})();

// ------------------------------------------------------
// REDIRECT FÜR BESUCHER → SPA VERSION
// Googlebot bleibt AUF DER HTML-SEITE (SEO!)
// Hier bitte die Links anpassen !!!
// ------------------------------------------------------
(function(){

    const isBot = /googlebot|bingbot|crawler|spider|bot/i.test(navigator.userAgent);

    if (!isBot) {

        const mapHash = {
            "start.html": "#/start",
            "galerie.html": "#/galerie",
            "leistungen.html": "#/leistungen",
            "kontakt.html": "#/kontakt",
            "impressum.html": "#/impressum"
        };

        if (mapHash[file]) {
            window.location.replace(folder + mapHash[file]);
        }
    }

})();
</script>

HTML-Code

CSS-Code

JavaScript-Code

HTML-Code

CSS-Code

JavaScript-Code

Besucherstatistik