Header/OG-Visual

Meine Piwigo-Galerie neu gedacht: Orte sammeln, UX & SEO

Kurzfassung: Ich habe meine Fotogalerie auf Piwigo modernisiert – mit einer übersichtlichen Startseite (News-Leiste & Orte-Hub), besserer Bedienung auf Bildseiten und soliden SEO-Basics. Hier zeige ich, was ich geändert habe und warum es sich lohnt.

Warum ich das gemacht habe

Seit Jahren sammle ich Orte: Nordsee, Ostsee, Sachsen, Bodensee, Rhein … Mit der Zeit war die Galerie zwar voll, aber nicht unbedingt benutzerfreundlicher. Ziel der Überarbeitung: schneller finden, schöner stöbern, besser teilen – ohne das System zu wechseln.

Header/OG-Visual
Bild 1: Header/OG-Visual

Startseite: klarer Einstieg statt Zufall

Früher: ein statischer Header, darunter alles Mögliche.
Jetzt führt eine News-Leiste durch das Aktuelle (z. B. neue Orte, Meilensteine, Projekte). Direkt danach kommt der Orte-Hub: kompakte Karten mit Regionen, Schnellfiltern und Zufalls-Ort – mobil einklappbar, damit man nicht ewig scrollt.

Was das bringt:

  • Besucher sehen sofort, was neu ist.

  • Einstieg über Regionen/Orte gelingt mit einem Klick.

  • Funktioniert auch im Dark-Theme ohne Blendwirkung.

Mockup News-Leiste & Orte-Hub
Bild 2: Mockup News-Leiste & Orte-Hub

Bildseiten: schneller und intuitiver

Ich wollte die Bildansicht so gestalten, wie ich selbst gern blättere:

  • Pfeiltasten (←/→) bzw. H/J: vorheriges/nächstes Bild

  • Esc: zurück zum Album

  • Hotzones links/rechts: am Desktop reicht ein Klick in den Bildbereich

  • „Zurück“-Button als Floating-Action (sichtbar, auch ohne Tastatur)

  • „Teilen / Link kopieren“ für Messenger & Social (mit Web-Share oder Copy)

Dazu kommen kleine Details wie ein Skip-Link („Zum Inhalt springen“) und bessere Alt-Texte. Ergebnis: schneller weiter, weniger Frust, mehr Orientierung.

Keyboard-Kürzel als Übersicht
Bild 3: Keyboard-Kürzel als Übersicht

Technik unter der Haube (ohne Code)

  • Performance: Headerbild priorisiert, Lazy-Loading für Thumbnails, Preconnect für die Karte.

  • SEO & Sharing: saubere <title>-Zeilen, meta description, canonical, Open-Graph & Twitter Cards. Beim Teilen gibt’s aussagekräftige Vorschauen – Albumtitel/Bildtitel statt kryptischer Links.

  • Sitemap & Robots: echte /sitemap.xml für Crawler, noindex für interne Such-/Tagseiten.

  • Dark-Styling: News-Streifen und Orte-Hub harmonieren mit dem dunklen Theme (keine Weiß-Blitzer).

Was sich spürbar geändert hat

  • Weniger Suchaufwand: Orte & Regionen sind der Startpunkt.

  • Bessere Share-Previews: Links sehen in Messengern und Social Media ordentlich aus.

  • Runder Flow auf Bildseiten: Tastatur, Klickflächen und Buttons greifen ineinander.

  • Subjektiv schneller: vor allem beim ersten Laden und beim Weiterblättern.

Was als Nächstes kommt

Auf der Liste stehen WebP-Derivate (für noch schnellere Ladezeiten), eine Backup-Automatik (DB + Upload) und kleine Sortier-Pills in Alben („Neu“, „Zufall“). Wenn dich das interessiert, schreibe ich einen kurzen Follow-Up.

Call-to-Action / Share-Badge
Bild 4: Call-to-Action / Share-Badge

Links

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert