Fix SEO/a11y issues, add Impressum UID, stop tracking raw photos

- Use absolute og:image URLs and add missing og:description on Impressum - Load Google Fonts via <link> instead of blocking @import - Prevent default on shop request button to avoid stray URL hash - Guard optimize-images.js against silent filename collisions - Add real Umsatzsteuer-Identifikationsnummer (UID) to Impressum - Correct README's shop description to match actual empty state - Stop tracking images/fotowebsite/ (raw, uncompressed source photos) since only images/optimized/ is served by the site
2026-08-25 21:48:57 +02:00 · 2026-08-25 21:48:57 +02:00 · b74dd3744e
commit b74dd3744e
parent 63e3eff9da
13 changed files with 57 additions and 14 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,3 @@
 node_modules/
 .claude/
+images/fotowebsite/
--- a/README.md
+++ b/README.md
@ -23,10 +23,15 @@ Tischlerei-Staffenberger/
 │   ├── build.js             # Baut templates/ + partials/ zu den Root-HTML-Dateien
 │   └── optimize-images.js   # Erzeugt WebP/JPEG-Varianten aus images/fotowebsite/
 └── images/
-    ├── fotowebsite/     # Original-Fotos (Rohmaterial, unkomprimiert)
+    ├── fotowebsite/     # Original-Fotos (Rohmaterial, unkomprimiert) – nicht in git, siehe unten
    └── optimized/       # Generierte WebP/JPEG-Varianten (von optimize-images.js)
 ```

+**Hinweis zu `images/fotowebsite/`:** Die unkomprimierten Rohfotos (oft mehrere MB pro
+Bild) sind bewusst nicht in git getrackt (`.gitignore`), um das Repository klein zu
+halten – ausgeliefert wird ohnehin nur `images/optimized/`. Rohfotos bitte separat
+sichern (z. B. externe Festplatte/Cloud-Speicher), bevor sie lokal gelöscht werden.
+
 ### Seiten bearbeiten (Templates + Build)

 Header und Footer sind identisch auf allen Seiten und liegen daher nur einmal in
@ -93,7 +98,7 @@ Von dort aus funktionieren alle Links, Schriftarten und Platzhalter-Bilder.
 |-------------|--------|
 | **Start**   | Banner, Willkommenstext, Über mich, Leistungen (Möbel, Küchen, Außen), CTA „Kontakt“. |
 | **Bilder**  | Galerie mit Filter: Alle / Küche / Außenbereich / Sonderanfertigung. |
-| **Shop**    | 6 Beispielprodukte mit Bild, Beschreibung, Preis und Button „Anfragen“ (öffnet E-Mail). |
+| **Shop**    | Leer bis Artikel ergänzt werden (siehe `shop-item-template.html`); jede Karte zeigt Bild, Beschreibung, Preis und Button „Anfragen” (öffnet E-Mail). |
 | **Impressum** | Anbieter, Kontakt, USt-ID, Verantwortlichkeit, Haftungsausschluss (Platzhalter). |

 Navigation ist auf allen Seiten gleich; die aktuelle Seite wird hervorgehoben.
--- a/css/style.css
+++ b/css/style.css
@ -3,8 +3,7 @@
   Traditional, warm, responsive design
   ============================================ */

-/* --- Google Fonts --- */
-@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap');
+/* Google Fonts are loaded via <link rel="preconnect"/stylesheet"> in each page's <head> */

 /* --- CSS Custom Properties --- */
 :root {
--- a/impressum.html
+++ b/impressum.html
@ -10,7 +10,11 @@
  <meta property="og:site_name" content="Tischlerei Staffenberger">
  <meta property="og:locale" content="de_AT">
  <meta property="og:title" content="Impressum – Tischlerei Staffenberger">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:description" content="Impressum der Tischlerei Staffenberger – Kontakt- und Anbieterinformationen.">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
  <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
@ -65,7 +69,7 @@

        <section>
          <h2>Umsatzsteuer-Identifikationsnummer (UID)</h2>
-          <p>Liegt noch nicht vor und wird ergänzt, sobald vorhanden.</p>
+          <p>ATU52635509</p>
        </section>

        <section>
--- a/index.html
+++ b/index.html
@ -11,7 +11,10 @@
  <meta property="og:locale" content="de_AT">
  <meta property="og:title" content="Tischlerei Staffenberger – Möbel & Küchen nach Maß">
  <meta property="og:description" content="Möbel, Küchen und Objekte für Haus und Garten nach Maß – handgefertigt in einem Ein-Mann-Betrieb in Österreich.">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
  <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
--- a/js/script.js
+++ b/js/script.js
@ -173,6 +173,7 @@
    var requestBtns = document.querySelectorAll('.product-card .btn[data-product]');
    requestBtns.forEach(function (btn) {
      btn.addEventListener('click', function (e) {
+        e.preventDefault();
        var product = this.getAttribute('data-product');
        if (product) {
          // Open mail with subject line (no real checkout) – replace email with your address
--- a/pictures.html
+++ b/pictures.html
@ -11,7 +11,10 @@
  <meta property="og:locale" content="de_AT">
  <meta property="og:title" content="Bilder – Tischlerei Staffenberger">
  <meta property="og:description" content="Referenzen und Bilder: Küchen, Außenbereich und Sonderanfertigungen aus eigener Werkstatt.">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
  <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
--- a/scripts/optimize-images.js
+++ b/scripts/optimize-images.js
@ -67,9 +67,20 @@ async function main() {

    console.log(`[${inputSubdir}] – ${files.length} images`);

+    const usedNames = new Map(); // baseName -> source filename, to catch collisions
    for (const file of files) {
      const inputPath = path.join(inputDir, file);
      const baseName  = safeName(file);
+
+      const collidesWith = usedNames.get(baseName);
+      if (collidesWith) {
+        throw new Error(
+          `Filename collision in ${inputSubdir}: "${file}" and "${collidesWith}" both normalize to "${baseName}" ` +
+          `and would overwrite each other's optimized output. Rename one of the source files and re-run.`
+        );
+      }
+      usedNames.set(baseName, file);
+
      await processImage(inputPath, outputDir, baseName, GALLERY_SIZES);
    }
  }
--- a/shop.html
+++ b/shop.html
@ -11,7 +11,10 @@
  <meta property="og:locale" content="de_AT">
  <meta property="og:title" content="Shop – Tischlerei Staffenberger">
  <meta property="og:description" content="Kleine Serie und Einzelstücke zum Anfragen – handgefertigte Möbel nach Maß.">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
  <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
--- a/templates/impressum.html
+++ b/templates/impressum.html
@ -10,7 +10,11 @@
  <meta property="og:site_name" content="Tischlerei Staffenberger">
  <meta property="og:locale" content="de_AT">
  <meta property="og:title" content="Impressum – Tischlerei Staffenberger">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:description" content="Impressum der Tischlerei Staffenberger – Kontakt- und Anbieterinformationen.">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
  <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
@ -47,7 +51,7 @@

        <section>
          <h2>Umsatzsteuer-Identifikationsnummer (UID)</h2>
-          <p>Liegt noch nicht vor und wird ergänzt, sobald vorhanden.</p>
+          <p>ATU52635509</p>
        </section>

        <section>
--- a/templates/index.html
+++ b/templates/index.html
@ -11,7 +11,10 @@
  <meta property="og:locale" content="de_AT">
  <meta property="og:title" content="Tischlerei Staffenberger – Möbel & Küchen nach Maß">
  <meta property="og:description" content="Möbel, Küchen und Objekte für Haus und Garten nach Maß – handgefertigt in einem Ein-Mann-Betrieb in Österreich.">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
  <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
--- a/templates/pictures.html
+++ b/templates/pictures.html
@ -11,7 +11,10 @@
  <meta property="og:locale" content="de_AT">
  <meta property="og:title" content="Bilder – Tischlerei Staffenberger">
  <meta property="og:description" content="Referenzen und Bilder: Küchen, Außenbereich und Sonderanfertigungen aus eigener Werkstatt.">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
  <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
--- a/templates/shop.html
+++ b/templates/shop.html
@ -11,7 +11,10 @@
  <meta property="og:locale" content="de_AT">
  <meta property="og:title" content="Shop – Tischlerei Staffenberger">
  <meta property="og:description" content="Kleine Serie und Einzelstücke zum Anfragen – handgefertigte Möbel nach Maß.">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
  <link rel="stylesheet" href="css/style.css">
 </head>
 <body>