Slider sinnvoll einsetzen
Slider präsentieren mehrere Themen an einer Position
Haben Sie mehrere Themen, die alle an einer Position auf Websites präsentieren werden sollen, bietet sich ein Slider an. Auf den einzelnen Slides des Sliders können die einzelnen Themen übersichtlich und ansprechend dargestellt werden. Prädestiniert ist ein Slider deshalb für den Bereich “Above The Fold” der Startseite.
Auf dieser Seite stelle ich drei verschiedene Ausführung unseres Sliders vor. Wir verwenden als Grundlage den Script-Slider “Slick-Slider” und kombinieren ihn in der Darstellung mit dem mächtigen Gestaltungswerkzeug für den WordPress-Editor GenerateBlocks. Damit haben wir alle gestalterische Freiheit und die Option, Inhalte auch dynamisch an jeder Slide-Position im Slider anzeigen zu lassen. Und das ohne “großen” Fußabdruck des Sliders für die Serverlast. Das Ergebnis: ein schneller Slider, der sich in Design und Inhalten frei gestalten lässt. Perfekt für all unsere Webprojekte.
Slide On — Welche Grundkonfigurationen sind vorstellbar:
- Statischer Slider mit Bild- und / oder Textwechsel
- Dynamischer Slider mit Bild- und / oder Textwechsel: Inhalte werden dynamisch z.B. aus einem Blog geladen
- Kombinationen von statischen und dynamischen Inhalten mit Bild- und/oder Textwechsel
Welche Version man wählt, hängt von den darzustellenden Inhalten ab. Im Projekt mache ich Ihnen hierzu Vorschläge und erläutere die Möglichkeiten im Detail.
Statischer Slider mit Bild- und Textwechsel
Statischer Slider mit einem animiertem Bild und Textwechsel
Wenn ein Bild für alle Aussagen gilt, genügt es, nur den Text sliden zu lassen. So muss nicht mit jedem Slide auch ein neues Bild geladen werden, der Slider wirkt ruhiger und der Fokus liegt auf dem sich ändernden Text.
Dynamischer Slider mit Bild- und Textwechsel
Mit dem dynamischen Slider können wir gezielt Blogartikel anzeigen und ‘sliden’ lassen. Das ist z.B. dann praktisch, wenn wir automatisiert immer die drei neuesten oder individuell bestimmte Artikel aus dem Blog oder aus einer Blogkategorie anzeigen möchten. Technisch verbinden wir dafür einen GenerateBlocks Loop mit dem Slick-Slider Script. Daraus ergeben sich unbegrenzte Darstellungsmöglichkeiten von Inhalten als Slider.
Wichtig für die Ladezeit
Bilder skalieren und komprimieren — auch für den Slider
Wichtig für die Performance und Ladezeit Ihrer Website ist es, auch die Bilder des Sliders erst zu skalieren und zu komprimieren (am besten in das .webp-Format) und danach in die WordPress Mediathek hochzuladen.
Wie das genau geht, siehe: WordPress: Bilder bearbeiten vor dem Upload
Was ist beim Einsatz von Slidern hinsichtlich SEO zu beachten?
Wenn Sie einen HTML-Slider in eine Website einbauen, müssen Sie einige Dinge beachten, um sicherzustellen, dass er für Suchmaschinen (SEO) optimiert ist. Hier sind einige Tipps für eineeffektive und SEO-konforme Verwendung:
Denken Sie daran, dass SEO ein fortlaufender Prozess ist, und dass es wichtig ist, sich über die besten Praktiken der Branche und die Algorithmen der Suchmaschinen auf dem Laufenden zu halten, um die Suchergebnisse Ihrer Website zu erhalten und zu verbessern.
Vgl. Suchmaschinenoptimierte Erstellung von Website Inhalten
Crawlability
Stellen Sie sicher, dass Suchmaschinen-Bots den Inhalt Ihres Sliders crawlen und indizieren können. Manchmal sind Slider, die mit JavaScript implementiert wurden, nicht leicht crawlbar; ggf. können Suchmaschinen nur den ersten Slide auswerten, da die anderen Inhalte erst später geladen werden und dadurch für den “kurzen Blick” Suchmaschinen-Crawlers unsichtbar sind. Wenn möglich, verwenden Sie HTML und CSS für den Slider, um eine bessere Zugänglichkeit für Suchmaschinen zu gewährleisten.
Textinhalt
Stellen Sie sicher, dass der Slider von relevanten Textinhalten begleitet wird. Suchmaschinen verlassen sich auf Text, um den Inhalt einer Seite zu verstehen. Wenn Ihr Slider nur Bilder, Bildunterschriften oder textlose Inhalte enthält, kann es für Suchmaschinen schwierig sein, den Kontext zu verstehen. Fügen Sie relevante Schlüsselwörter in den mit dem Slider verbundenen Textinhalt ein. Dies hilft den Suchmaschinen, die Relevanz Ihrer Inhalte für die Suchanfragen der Nutzer zu erkennen.
Alt-Text für Bilder
Wenn Ihr Slider Bilder enthält, verwenden Sie für jedes Bild einen beschreibenden und relevanten Alt-Text. Alt-Text hilft nicht nur Suchmaschinen, den Inhalt zu verstehen, sondern verbessert auch die Zugänglichkeit für Benutzer mit Behinderungen.
Semantisches HTML
Verwenden Sie semantische HTML-Tags, um Ihren Inhalt zu strukturieren. Dies hilft den Suchmaschinen, die Hierarchie und Bedeutung der verschiedenen Elemente auf der Seite zu verstehen.
Responsive Design
Stellen Sie sicher, dass Ihr Slider responsive ist und auf verschiedenen Geräten und Bildschirmgrößen gut funktioniert. Google betrachtet die Mobilfreundlichkeit als einen Rankingfaktor, daher ist ein responsives Design für die Suchmaschinenoptimierung von entscheidender Bedeutung.
Seitenladegeschwindigkeit
Optimieren Sie die Bilder und Inhalte innerhalb des Sliders, um die Ladezeiten der Seite zu minimieren. Suchmaschinen, insbesondere Google, betrachten die Seitenladegeschwindigkeit als einen Rankingfaktor. Sie können Tools wie Google PageSpeed Insights verwenden, um die Ladegeschwindigkeit Ihrer Website zu überprüfen und zu verbessern.