Was ist WebP – kurz erklärt
WebP ist ein modernes Bildformat, entwickelt von Google. Ziel: Kleinere Dateien bei gleicher oder besserer Bildqualität im Vergleich zu JPG oder PNG.
Was kann WebP?
- Fotos komprimieren (wie JPG)
- Transparenz darstellen (wie PNG)
- Animationen anzeigen (wie GIF)
- verlustfrei oder verlustbehaftet speichern
Es vereint also mehrere alte Formate in einem.
Warum ist WebP sinnvoll?
Beispiel: Ein JPG mit 1 MB → als WebP oft nur 600–700 KB
Ersparnis: ca. 25–40 %
Qualität: im Web meist kein sichtbarer Unterschied.
Vorteile
✔ kleinere Dateien
✔ schnellere Ladezeit
✔ bessere Google-Bewertung (PageSpeed)
✔ moderne Browser unterstützen es vollständig
gleiche Bildqualität + weniger Speicher + schnellere Website
Nachteile
- Sehr alte Browser können es nicht anzeigen
- Manche Bildbearbeitungsprogramme speichern es nicht direkt
- Man muss es bewusst einsetzen (es passiert nicht automatisch)
🧠 Für deine Joomla-Website
Wenn du mit Joomla 6 arbeitest, dann ist WebP ideal für:
- Beitragsbilder
- Headerbilder
- Projektfotos
Nicht zwingend nötig für:
- SVG-Logos
- sehr kleine Icons
Was ist AVIF – ganz kurz
AVIF ist ein modernes Bildformat, das auf dem AV1-Video-Codec basiert.
Vorteil
- Noch kleinere Dateien als JPG und meist auch kleiner als WebP
- Sehr gute Bildqualität trotz starker Kompression
- Unterstützt Transparenz und HDR
Beispiel:
1 MB JPG → oft 400–600 KB als AVIF - (also 40–60 % kleiner)
Nachteil
- Erzeugung braucht mehr Rechenleistung
- Nicht jedes alte Gerät unterstützt es
- Etwas langsamer beim Kodieren
Erscheinungsjahr: ca. 2019 / Basis: moderner AV1-Video-Codec
Eigenschaften
- Noch stärkere Kompression als WebP
- Sehr gute Detailerhaltung
- Unterstützt Transparenz
- Unterstützt HDR
- Technisch moderner
Typische Einsparung
Gegenüber JPG:
→ 40–60 % kleiner
Gegenüber WebP:
→ 10–20 % kleiner
Wann ist JPG trotzdem besser?
1️⃣ Maximale Kompatibilität nötig
Wenn Besucher sehr alte Geräte oder Firmen-PCs nutzen. JPG funktioniert überall – auch bei uralten Systemen.
2️⃣ Bild wird weiterbearbeitet
WebP und AVIF sind weniger geeignet für:
- Druck
- spätere Nachbearbeitung
- Archivierung
Dafür besser:
Original als JPG oder PNG speichern.
3️⃣ Sehr geringe Kompression gewünscht
Wenn du ein Bild mit 95–100 % Qualität speicherst, ist der Unterschied zwischen JPG und WebP minimal. Dann lohnt der Umstieg kaum.
4️⃣ Server ist schwach
AVIF-Erzeugung kann CPU-intensiv sein. Auf sehr kleinen Hosting-Paketen kann das bremsen.
TEIL 1 - WebP automatisch erzeugen
Wichtig:
Joomla selbst erzeugt keine WebP-Dateien automatisch. Du brauchst ein Plugin oder Server-Unterstützung.
Möglichkeit A – Mit Erweiterung (empfohlen)
Beispiel: JCH Optimize URL: https://www.jch-optimize.net
Schritt-für-Schritt
1️⃣ Installation
Backend öffnen: https://joomla6.rneuhoff.de/administrator, dann:
- System → Erweiterungen → Installieren
- ZIP hochladen
- Installieren
2️⃣ WebP aktivieren
Komponenten → JCH Optimize → Einstellungen
Aktivieren:
✔ Bilder optimieren
✔ WebP erzeugen
✔ WebP ausliefern, wenn Browser unterstützt
Speichern.
3️⃣ Cache leeren
System → Wartung → Cache leeren
Was passiert jetzt?
Beispiel: Original: 1,2 MB JPG
Automatisch erzeugt: 450 KB WebP, Ersparnis: ~60–70 %
Qualität:
Bei moderater Einstellung kaum sichtbar schlechter.
Möglichkeit B – Serverlösung (wenn Hoster es anbietet)
Manche Hoster erzeugen WebP automatisch per Apache/Nginx.
Vorteil:
Kein Joomla-Plugin nötig.
Nachteil:
Wenig Kontrolle.
TEIL 2 – Lazy Loading kontrollieren
Seit Joomla 4/5 ist Lazy Loading standardmäßig aktiv. In Joomla 6 ebenfalls. Das bedeutet: Bilder bekommen automatisch: loading="lazy"
Wann ist das gut?
✔ Bei langen Seiten
✔ Bei Blogartikeln
✔ Bei vielen Bildern
Spart Ladezeit.
Wann ist das schlecht?
Beim Hero-Bild oben auf der Startseite. Das sollte sofort laden.
Lazy Loading gezielt deaktivieren (Hero-Bild)
Möglichkeit 1 – Im Template
Wenn du mit Helix Ultimate arbeitest:
Im Custom HTML Modul: Bild manuell einfügen:
<img src="bild.webp" loading="eager" data-alt="Beschreibung">
„eager“ bedeutet: Sofort laden.
Möglichkeit 2 – Per CSS/JS (fortgeschritten)
Kann man über Template-Override steuern, ist aber für dich nicht nötig.
Wichtige Kontrolle
Nach Aktivierung prüfen mit:
Browser → Rechtsklick → Untersuchen → Bild markieren
Du solltest sehen:
type="image/webp"
loading="lazy"
Dann funktioniert es.
Empfohlene Grundeinstellung für dich
✔ Bilder vorher mit Squoosh verkleinern
✔ JCH Optimize für WebP aktivieren
✔ Lazy Loading aktiviert lassen
✔ Nur Hero-Bild auf eager setzen
Realistische Verbesserung (merkt man deutlich)
Vorher: Seite 10–15 MB
Nacher: Nach Optimierung: 2–4 MB
Schema.org und Rich Snippets in Joomla 6:
Eine vollständige Anleitung
Suchmaschinen werden immer intelligenter. Sie wollen nicht nur die Wörter auf deiner Website lesen, sondern auch ihre Bedeutung verstehen. Hier kommt Schema.org ins Spiel. Dieser Artikel erklärt dir nicht nur die grundlegenden Unterschiede, sondern zeigt dir mit vollständigen Pfad- und URL-Angaben, wie du in Joomla 6 Schema-Markups für deine Artikel einrichtest und testest.
Die wichtigsten URLs und Pfade:
Die Einrichtung von Schema.org in Joomla 6 ist dank der nativen Plugins überraschend einfach und ein echter Gewinn für deine SEO. Du versetzt Suchmaschinen in die Lage, deine Inhalte nicht nur zu lesen, sondern auch zu verstehen.
| Wofür? | Vollständiger Pfad / URL |
|---|---|
| Schema.org Vokabular | https://schema.org/ |
| Joomla Plugins | System → Plugins (dann Suche nach "schema") |
| Artikel-Schema zuweisen | Inhalt → Artikel → [Artikel öffnen] → Reiter Schema |
| Rich Results Test (Google) | https://search.google.com/test/rich-results |
| Google Search Console | https://search.google.com/search-console |
| Search Console URL-Prüfung | In Search Console: Suchfeld oben (URL eingeben) |
Unterschied zwischen Schema.org und Rich Snippets?
Diese beiden Begriffe werden oft synonym verwendet, sind aber nicht dasselbe. Das Verständnis des Unterschieds ist der erste Schritt zu einer erfolgreichen Implementierung.
Schema.org (Das Vokabular)
Schema.org ist eine gemeinsame Initiative der großen Suchmaschinen (Google, Bing, Yahoo, Yandex) aus dem Jahr 2011 . Es stellt eine gemeinsame Sammlung von Tags (ein sogenanntes Vokabular) bereit, mit denen Webmaster ihren Code auszeichnen können, um den Suchmaschinen zu erklären, um welche Art von Inhalt es sich handelt . Denk daran wie an eine universelle Sprache oder ein Etikett. Sagt dein Inhalt, dass es ein "Produkt" ist? Eine "Rezension"? Eine "Veranstaltung"? Oder ein "Artikel"? Schema.org liefert die genauen Bezeichnungen dafür .
Die offizielle Website von Schema.org findest du unter: https://schema.org/
Rich Snippets (Das Ergebnis)
Rich Snippets sind die visuelle Darstellung dieses ausgezeichneten Inhalts in den Suchergebnissen (SERPs) . Google, Bing und andere Suchmaschinen lesen das Schema.org-Markup auf deiner Seite und zeigen, wenn sie es für sinnvoll halten, zusätzliche Informationen direkt im Suchergebnis an . Das können Bewertungssterne, Bilder, Preise, Kochzeiten bei Rezepten oder Veranstaltungsdaten sein . Rich Snippets sind also das, was der Nutzer sieht, während Schema.org der Code ist, der es möglich macht .
Ein Beispiel für ein Rich Snippet mit Bewertungssternen siehst du, wenn du in Google nach einem Produkt suchst und unter dem Suchergebnis Sternebewertungen angezeigt werden.
Kurz gesagt: Schema.org ist der Code auf deiner Website, und Rich Snippets sind die hübschen, informativen Ergebnisse, die daraus in der Google-Suche entstehen können .
Ein wichtiger Unterschied: Strukturierte Snippets
Es gibt auch noch Strukturierte Snippets (Structured Snippets). Diese werden nicht aus Schema.org-Code generiert, sondern aus HTML-Tabellen (<table>-Tags) auf deiner Seite extrahiert . Google kann aus diesen Tabellen zusätzliche Informationen wie Produktspezifikationen oder Vergleichsdaten in den Suchergebnissen anzeigen .
Warum ist das für deine Joomla-Website wichtig?
Die Implementierung von Schema.org ist ein starkes Signal für Suchmaschinen und bringt klare Vorteile mit sich:
- Besseres Verständnis:
Du hilfst Suchmaschinen, den Kontext und die Bedeutung deiner Inhalte präzise zu erfassen. - Höhere Klickrate (CTR):
Rich Snippets heben dein Suchergebnis von der Masse ab und führen zu mehr Klicks . - Autorität und Glaubwürdigkeit:
Ein mit strukturierten Daten angereichertes Suchergebnis wirkt oft vertrauenswürdiger und professioneller . - Vorbereitung für die Zukunft:
Die Bedeutung von strukturierten Daten für die Suche wird weiter zunehmen .
Joomla 6 und Schema.org: Die nativen Plugins
Die gute Nachricht: Seit Joomla 5 (und damit auch in Joomla 6) musst du keine komplexen Erweiterungen von Drittanbietern mehr installieren. Joomla bringt ein eigenes, modulares System für Schema.org mit, das auf einer Reihe von Plugins basiert. Diese Plugins sind dafür zuständig, das strukturierte Daten-Markup (im JSON-LD-Format) automatisch zu generieren und in den HTML-Code deiner Seite einzufügen.
Vollständiger Pfad zu den Schema-Plugins:
- Melde dich im Administrations-Backend deiner Joomla-Website an.
- Gehe zu: System → Plugins (im Bereich "Verwalten")
- Gib im Suchfilter oben den Begriff "schema" ein.
Standardmäßig sind folgende Schema.org-Typen verfügbar:
- Inhalt - Schema (Blogposting)
- Inhalt - Schema (Book)
- Inhalt - Schema (Event)
- Inhalt - Schema (JobPosting)
- Inhalt - Schema (Organization)
- Inhalt - Schema (Person)
- Inhalt - Schema (Recipe)
- ... und weitere
Schritt-für-Schritt: Einrichtung von Schema für einen Artikel
Um einen einzelnen Artikel mit den richtigen Schema-Informationen zu versehen, aktivierst du das passende Plugin und verknüpfst es mit deinem Inhalt. Nehmen wir als Beispiel das "Blogposting"-Schema für einen normalen Artikel.
Schritt 1: Das Schema-Plugin aktivieren
- Gehe im Administrations-Backend deiner Joomla-Website auf System → Plugins.
- Suche in der Liste nach dem Plugin namens Inhalt - Schema (Blogposting) (oder dem für deinen Inhalt passenden Typ, z.B. "Event", "Article", etc.). Du kannst auch oben rechts im Suchfilter "schema" eingeben, um alle Schema-Plugins anzuzeigen.
- Klicke auf den Plugin-Titel, um es zu öffnen.
- Setze den Status auf Aktiviert (grüner Haken).
- Klicke oben links auf Speichern & Schließen. (Die Grundeinstellungen kannst du in der Regel so belassen.)
Schritt 2: Das Schema mit einem Artikel verknüpfen
- Gehe zu Inhalt → Artikel (im Bereich "Inhalt").
- Öffne den Artikel, den du auszeichnen möchtest, indem du auf seinen Titel klickst.
- Wechsle im Bearbeitungsbildschirm zum Reiter Schema (dieser erscheint nur, wenn mindestens ein Schema-Plugin aktiviert ist).
- Hinweis: Sollte der Reiter nicht angezeigt werden, prüfe unter Optionen (das Zahnrad-Symbol oben rechts in der Artikel-Liste) im Reiter "Veröffentlichung", ob "Schema" auf "Verbergen" steht und stelle es auf "Anzeigen". Klicke dann auf "Speichern" und lade die Artikel-Bearbeitungsseite neu.
- Klicke auf die Schaltfläche Schema wählen oder Hinzufügen (je nach Joomla-Version).
- Wähle aus der Liste den Typ aus, der zu deinem Artikel passt, in unserem Fall Blogposting.
- Es öffnen sich nun die Felder für dieses spezifische Schema. Du kannst hier zusätzliche Informationen hinterlegen, die nicht automatisch aus dem Artikel gelesen werden können, wie z.B.:
- Bild (Image): Ein Hauptbild für den Artikel. Klicke auf "Auswählen" oder "Hochladen", um ein Bild aus den Joomla-Medien zu wählen.
- Wortlaut (Word Count): Die Anzahl der Wörter (kann automatisch befüllt werden).
- Alternativer Kopf (Alternative Headline): Ein alternativer Titel.
- Klicke oben links auf Speichern & Schließen.
Fertig! Joomla fügt nun automatisch das JSON-LD-Markup im Kopfbereich deiner Seite für diesen spezifischen Artikel ein.
Nach der Einrichtung ist es wichtig zu prüfen, ob alles korrekt funktioniert. Dafür stellt Google zwei hervorragende Werkzeuge bereit.
1. Der Google Rich Results Test (Erweiterte Prüfung)
Das klassische Tool für eine detaillierte Fehleranalyse. Es wurde 2020 eingeführt und hat das frühere Strukturierte-Daten-Testtool ersetzt .
Vollständige URL des Tools:
https://search.google.com/test/rich-results
So testest du eine URL:
- Rufe die Seite auf, auf der du das Schema implementiert hast (z.B. deinen Artikel).
- Kopiere die vollständige URL der Seite (z.B. https://www.deine-domain.de/de/artikel/mein-artikel).
- Öffne den Rich Results Test unter der oben genannten URL.
- Wähle die Option URL aus (standardmäßig ausgewählt).
- Füge die URL in das Eingabefeld ein.
- Klicke auf URL testen.
- Das Tool analysiert die Seite und zeigt dir:
- Erkannte Elemente: Welche Schema.org-Typen wurden gefunden? (z.B. "1 gültiges Element vom Typ Blogposting erkannt")
- Vorschau: Du kannst auf "Ergebnisvorschau" klicken, um zu sehen, wie dein Suchergebnis potenziell in Google aussehen könnte .
- Fehler: Gibt es kritische Probleme, die die Darstellung als Rich Snippet verhindern?
- Warnungen: Gibt es empfohlene Felder, die du noch ausfüllen könntest?
- Gecrawlte URL: Hier siehst du, ob Google die Seite crawlen konnte und ob wichtige Ressourcen (CSS, JS, Bilder) blockiert sind .
So testest du Code-Snippets (z.B. für Entwicklungsumgebungen):
- Öffne den Rich Results Test.
- Wähle die Option Code aus.
- Füge deinen HTML-Code (inklusive Schema-Markup) in das Eingabefeld ein .
- Klicke auf Code testen.
- Im Gegensatz zum URL-Test kannst du hier den Code auf der linken Seite direkt bearbeiten und die Änderungen auf der rechten Seite sofort in der Vorschau sehen .
Wichtige Einstellung: Du kannst oben im Tool zwischen Smartphone und Computer als User-Agent wählen. Wähle "Smartphone", da Google mittlerweile mobile Seiten zuerst indexiert (Mobile-First Indexing) .
2. Die Google Search Console (Langzeit-Überwachung)
Die Google Search Console ist dein kostenloses Dashboard für die Kommunikation mit Google . Sie hilft dir, die Gesundheit deiner strukturierten Daten langfristig im Auge zu behalten.
Vollständiger Pfad zur Search Console:
https://search.google.com/search-console
So nutzt du sie für Schema.org:
- Melde dich in der Google Search Console für deine Website an. Falls deine Website noch nicht hinzugefügt ist, klicke auf "Property hinzufügen" und folge der Anleitung (DNS-Eintrag, HTML-Datei-Upload, etc.).
- Wähle deine Website-Property aus.
- Gehe im linken Menü auf Verbesserungen (früher: "Erweiterungen").
- Hier siehst du für verschiedene Schema-Typen (z.B. Artikel, Breadcrumbs, FAQ, Produkte, Rezepte) separate Berichte .
- Klicke auf einen Bericht, z.B. "Artikel". Du siehst eine Übersicht:
- Gültige Elemente: Wie viele deiner Seiten haben gültiges Schema-Markup?
- Elemente mit Warnungen: Seiten mit gültigem Markup, aber empfohlenen Verbesserungen.
- Fehlerhafte Elemente: Seiten, bei denen Google Probleme mit dem Markup festgestellt hat .
- Klicke auf einen Fehler, um die betroffenen URLs zu sehen. Nachdem du das Problem behoben hast, kannst du auf Validierung starten klicken, um Google mitzuteilen, dass der Fehler behoben wurde .
Weitere hilfreiche Search Console-Tools:
- URL-Prüftool:
Gib eine beliebige URL deiner Website ein, um zu sehen, ob sie von Google indexiert ist, wann sie zuletzt gecrawlt wurde und ob es Probleme gibt . Zugang: Gib die URL in das Suchfeld oben in der Search Console ein. - Insights-Bericht: Unter Übersicht → Insights
(oder direkt im Menü) findest du einen Bericht, der dir zeigt, welche deiner Seiten die meisten Klicks erhalten und welche Suchanfragen zu deiner Website führen .
Media-Manager
Abweichungen / veraltete Aussagen
- Der „komplett neue Medienmanager“ kam ursprünglich in Joomla 4 —
in Joomla 6 wurde er funktional erweitert und stabilisiert, nicht neu erfunden. - Bildbearbeitung passiert jetzt nicht mehr in einem Popup,
sondern in einer integrierten Bearbeitungsoberfläche. - Bearbeiten verändert standardmäßig die Originaldatei
(früher wurde oft automatisch eine Kopie erzeugt). - Uploads über das Medien-Custom-Field landen nicht irgendwo →
sie werden im definierten Zielordner gespeichert. - Template Cassiopeia-extended hat keinen Einfluss auf den Media-Manager —
nur auf die Darstellung im Frontend.
Der Media-Manager
Der Media-Manager ist die zentrale Dateiverwaltung deiner Website. Er organisiert alle hochgeladenen Dateien, die im Frontend angezeigt werden. Du verwaltest dort keine Inhalte, sondern Ressourcen, aus denen Inhalte bestehen.
Wo du ihn im Backend findest:
Inhalt → Medien Pfad: https://joomla6.rneuhoff.de/administrator/index.php?option=com_media
Hauptaufgabe
Der Media-Manager ist im Grunde der Dateiserver deiner Website im Browser. Er erfüllt 4 zentrale Funktionen:
1. Dateien speichern
Er speichert alles, was später auf der Website angezeigt wird:
| Typ | Beispiele |
|---|---|
| Bilder | Artikelbilder, Logos, Fotos |
| Dokumente | PDF, Download-Dateien |
| Grafiken | Icons, Banner |
| Videos | eingebettete Medien |
Physischer Speicherort (Server): /images
Beispiel: /images/artikel/messe.jpg
Frontend: https://joomla6.rneuhoff.de/images/artikel/messe.jpg
Du baust eine klare Struktur wie in einem Explorer:
├─ artikel/
├─ produkte/
├─ team/
├─ downloads/
Das verhindert später Chaos im Editor.
3. Bilder bearbeiten
Direkt in Joomla möglich:
| Funktion | Zweck |
|---|---|
| Zuschneiden | Bildausschnitt wählen |
| Resize | verkleinern |
| Rotate | drehen |
| Qualität | Dateigröße reduzieren |
→ Dadurch brauchst du oft kein externes Grafikprogramm mehr.
4. Zugriffskontrolle
Du kannst festlegen:
| Benutzer | Darf |
|---|---|
| Redakteur | nur hochladen |
| Manager | löschen |
| Admin | alles |
Damit verhindert man, dass Redakteure versehentlich Dateien zerstören.
Was der Media-Manager NICHT ist
Sehr wichtig:
| Falsch gedacht | Richtig |
|---|---|
| Bilder gehören zum Artikel | Artikel referenziert Bild |
| Datei wird kopiert | Datei wird verlinkt |
| Jeder Artikel hat eigene Bilder | Viele Artikel nutzen gleiche Datei |
Der Artikel speichert nur den Pfad: images/artikel/messe.jpg
Änderst du ein Bild im Media-Manager → ändert es sich automatisch überall auf der Website.
Das ist Absicht.