Konfiguration
- Anzahl der Slider variabel
- Mobile wird immer nur das 1. Bild angezeigt
- Pfeile ausblendbar - falls ohne Slidefunktion gewünscht
- Variante 1: 3 Bilder (dieser Slide)
- Formate:
373x300px, 373x300px & 373x685px
Format Banner: 1920 x 900px
SLIDER-ELEMENT
Format Banner: 1920 x 900px
Parallax-Element
Text und Bild sind austauschbar
Format Bild Parallax: 1920 x 609px
BILD-/TEXTELEMENT
LOREM IPSUM
Hier sind die Einstellungen sehr vielseitig: Der graue Hintergrund ist optional, Versatz nach oben und unten möglich, 3 verschiedene Button-Darstellungen, blaue Linie optional & Länge variierbar, Zoom-Animation des Bildes optional, 3er-Bild-Grid pflegbar, gespiegelte Platzierung Bild/Text möglich, Platzierung Bild über Text möglich - s. auch die folgenden 2 Elemente
lorem ipsum
Bildformat: 800 x 500px
LOREM IPSUM
LOREM IPSUM
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, hic veritatis. Dolore eos minus natu
HEADLINE
LOREM IPSUM
LOREM IPSUM
Beispiel Austauschmöglichkeit: Text links, Bild rechts
lorem ipsum
Zitat-Element: Kann auch in 2-spaltigen-Elementen verwendet werden (s.u.).
Autor
Position
Hier können z.B. Bilder, Texte, Slider oder das Numbers-Element platziert werden.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolore
Lorem ipsum
Lorem ipsum
TEXTELEMENTE
LOREM IPSUM
Headline optional
Textausrichtung: Alle Texte & Headlines können links, mittig & rechts ausgerichtet werden.
Es gibt 1-spaltige Textelemente, 2-spaltige Textelemente und sie können beliebig platzier werden - auch neben anderen Elementen (s. z.B. oben, Zitat-Element)
Lorem Ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
LOREM IPSUM
LOREM IPSUM
Lorem Ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Video-Element
In der Höhe skalierbar, Standbild aus Frequenz auswählbar
Bildelement mit Button
Bildformat: 500 x 500px
Produkt-Element
Produkt wird ausgewählt & Darstellung zieht sich automatisch. Abweichende Darstellung über manuelle Pflege der weiteren Bild-/Textelemente bzw. Slider möglich.
Bildformat: 1920 x 600px
OPTIONALE HEADLINE
Optionaler Text, beliebig lang (wird automatisch gekürzt, s.u.), beliebig viele Themen einsetzbar. Bildgröße: 398x250px
Optionaler Text, beliebig lang (wird automatisch gekürzt, s.u.), beliebig viele Themen einsetzbar. Bildgröße: 398x250px
Optionaler Text, beliebig lang (wird automatisch gekürzt, s.u.), beliebig viele Themen einsetzbar. Bildgröße: 398x250px
Optionaler Text, beliebig lang (wird automatisch gekürzt, s.u.), beliebig viele Themen einsetzbar. Bildgröße: 398x250px
Optionaler Text, beliebig lang (wird automatisch gekürzt, s.u.), beliebig viele Themen einsetzbar. Bildgröße: 398x250px
LOREM IPSUM
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanct
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanct
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanct
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd g
...
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu
...
LOREM IPSUM
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanct
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanct
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanct
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd g
...
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu
...
DYNAMISCHER BILDSLIDER
Variante 2: 2 Bilder
Formate: 756x300px & 373x685px
Konfiguration
- Anzahl der Slider variabel
- Mobile wird immer nur das 1. Bild angezeigt
- Pfeile ausblendbar - falls ohne Slidefunktion gewünscht
- Variante 1: 3 Bilder (dieser Slide)
- Formate:
373x300px, 373x300px & 373x685px
Variante 2: 2 Bilder
Formate: 756x300px & 373x685px
SLIDER (1 IMAGE & 1 TEXT )
.png)
.png)
Formular-Element
Felder sind beliebig anpassbar, Button ist ebenfalls in blau oder weiß verfügbar, Empfänger anpassbar
GUIDELINE
SEO-/BILDOPTIMIERUNG
Warum ist die Optimierung von Bildern wichtig?
1. Suchmaschinen
In einem Onlineshop wird eine Vielzahl von Bildern verwendet – auf der Startseite, den Kategorieseiten und den Artikeldetailseiten. Neben dem Text sind sie die wichtigsten sichtbaren Bestandteile einer Website. Bilder bieten über die Bildersuche der Suchmaschinen das Potential, Besucher auf die eigene Website zu bekommen. Doch Suchmaschinen, wie Google oder Bing, können den Inhalt eines Bildes nicht erschließen. Wir müssen ihnen also eine Hilfestellung geben.
2. Barrierefreiheit
Auch im Internet gilt Barrierefreiheit! Durch optimierte Bilder erhalten blinde User Zugang zu den Bildschirminformationen. Mit Hilfe von Screenreadern werden die Inhalte vorgelesen oder in Blindenschrift ausgegeben.
3. User Experience/Usability
Bilder nehmen Einfluss auf die User Experience, wie zum Beispiel die Ladezeit einer Website. Mit optimierten Bildern wird die Seite schneller geladen, was sich positiv auf die User Experience auswirkt. Zudem kann es vorkommen, dass ein Bild aus verschiedenen Gründen nicht geladen werden kann. Mit einem alternativen Text kann dem User trotzdem eine Bildinformation bereitgestellt werden.
Welche Optimierungsmöglichkeiten gibt es?
1. Dateiname
Der Dateiname spielt für das Ranking in der Bildersuche eine wichtige Rolle.
- Beschreibenden Namen entsprechend des Bildinhaltes wählen
optimierter Dateiname: huepfburg.jpg
vermeiden: Teaser_3-8_FINAL4.jpg - Ergänzungen werden mit Bindestrichen hinzugefügt
- Google sieht Bindestriche als trennend: clownhuepfburg vs. clownhuepfburg → sind unterschiedliche Keywords für Google
- Unterstriche werden als verbindend gesehen
optimierter Dateiname: huepfburg-mit-rutsche.jpg
vermeiden: huepfburg_rutsche.jpg - Keine Umlaute und Sonderzeichen verwenden
optimierter Dateiname: huepfburg.jpg
vermeiden: hüpfburg.jpg - Keywords verwenden und an den Anfang stellen
optimierter Dateiname: huepfburg-mieten.jpg
vermeiden: kinderattraktion-springburg.jpg - Kurze Dateinamen verwenden (Themenrelevanz vor Länge)
optimierter Dateiname: huepfburg.jpg
vermeiden: schloss-huepfburg-mit-vier-tuermen-fuer-gross-und-klein.jpg
2. alt-Attribut
Das Alt-Attribut ermöglicht die Bereitstellung eines alternativen Textes, falls das Bild nicht angezeigt werden kann oder von Screenreadern vorgelesen wird (siehe Barrierefreiheit).
• Gib in kurzen Worten den Inhalt des Bildes wieder
• Verwende dabei das Hauptkeyword
• Vermeide eine Aneinanderreihung von Keywords (Keyword-Stuffing)
3. title-Attribut
Das title-Attribut spielt für Suchmaschinen eine untergeordnete Rolle, ist aber aus Usability-Gründen gut. Es erscheint, wenn man mit dem Mauszeiger über das Bild fährt.
- Hier kann z.B. der gleiche Text wie im alt-Attribut oder ein CopyrightHinweis stehen
- Verwende das Hauptkeyword
4. Dateiformate
Es sollten Bilddateiformate verwendet werden, die die meisten Browser unterstützen:
- JPG/JPEG (gute Komprimierung), PNG (für Transparenz), GIF (für Animation)
- WEBP (verlustfreie Komprimierung) wurde von Google entwickelt, wird allerdings nicht in allen Browsern angezeigt
5. Verzeichnis/Ordnerpfad
Bei der Suchmaschinenoptimierung von Bildern spielt auch die URL eine Rolle.
- Bilder sollten in einem eigenen Verzeichnis gespeichert werden
- Die Ordnerstruktur sollte thematisch relevant sein
Bisher:
/media/image/c3/09/0e/header-fraport_20205eAG3BKjOsf8t.jpg
Besser:
/bilder/referenzen/fraport-mitarbeiterfest-spielwiese.jpg
6. Dateigröße
Die Dateigröße nimmt Einfluss auf die Ladezeit einer Seite und das Ranking in der Bildersuche. Damit ein Bild schneller und leichter in den Index aufgenommen wird, sollte eine weboptimierte Dateigröße verwendet werden. 150 KB sind ideal, um die Ladezeit des Bildes in der Suche zu verkürzen. Auf hochauflösende Aufnahmen mit einer Dateigröße von mehr als 10 Megabyte ist dringend zu verzichten.
Zur Komprimierung der Bilder kann u.a. TinyPNG genutzt werden.
7. Bildgröße
Empfohlen wird die Bilder in der Bildgröße hochzuladen, in der sie auch im
Content angezeigt werden.
Kleine Bilder, wie Vorschaubilder oder Profilbilder, gelangen seltener in den
Index, wobei dies auch vom Keyword abhängt. Sucht man beispielsweise nach einer Person, so erscheint höchstwahrscheinlich auch ein Profilbild in der Bildersuche. Als untersten Richtwert für ein gutes Ranking können 300 Pixel für mindestens eine Seite des Bildes angenommen werden. Die zweite Seite kann dabei variieren. Auch hier ist das Keyword entscheidend. Bei der Suchanfrage „Kölner Dom“ werden höchstwahrscheinlich auch hohe Bilder angezeigt. Google hat einst eine Maximalgröße von 1280 x 960 Pixel für Bilder in der Google-Suche definiert. Größere Bilder können auch durch die Suchmaschine abgeschnitten oder skaliert werden. Ein Querformat von 4:3 ist daher zu empfehlen.
8. Mehrfache Verwendung
Anders als bei den Texten einer Website fördert die Mehrfachverwendung eines Bildes mit den gleichen Metaangaben ein gutes Ranking in der Bildersuche. Sie ist ein Zeichen der Beliebtheit und Relevanz des Bildes.
Hinweis Video-Optimierung
Hier gelten dieselben Anforderungen wie bei der Bildoptimierung (s.o.). Zusätzlich sollten die Videos per Default auf lautlos stehen und es sollte auf jeden Fall der Page Speed im Auge behalten werden - vor allem bei automatisch abspielenden Videos.