Google beendet 2020 die Indexierung von Flash-Inhalten
Adobe Flash basiert auf der Skriptsprache Action Script und dient der Darstellung von animierten Grafiken oder Videoclips auf Webseiten. Jahrelang war dieses Technik weit verbreitet, in den letzten Jahren gingen die Nutzerzahlen jedoch stark zurück.
Flash galt ohnehin lange als Sicherheitsrisiko. Durch das benötigte Flash-Plugin zum Abspielen der Inhalte entsteht eine zusätzliche Fehlerquelle und die Möglichkeit Schadsoftware auf den betreffenden PCs zu installieren. Außerdem ist responsives Layout und damit die smartphonegerechte Darstellung von Inhalten mit Flash nicht möglich. Die Schriftgröße lässt sich nicht verändern und die Ladezeiten sind oftmals zu lang.
Google ignoriert ab 1. Januar 2021 Flash-Inhalte und indexiert keine SWF-Dateien mehr.
Chrome (ab Version 76), Firefox (ab 69), Microsoft Edge und Safari zeigen mit den Defaulteinstellungen keine Flash-Dateien mehr an. Auf Smartphone-Browsern ist schon seit langer Zeit kein Flash Player mehr installiert. Adobe selbst bietet nur noch bis 31.12.2020 eine Downloadmöglichkeit für den Flash Player an.
Zeit sich endgültig von Flash zu verabschieden und Alternativen zur Darstellung von Werbebannern, Animationen oder Videos zu verwenden.
Umstellung von Flash auf HTML5
Vorteile von HTML5 im Vergleich zu Flash
- Keine zusätzlichen Plugins erforderlich.
- Ohne Flash Player besteht kein unnötiges Sicherheitsrisiko bei Hackerangriffen.
- Touchelemente sind nur mit HTML5 realisierbar.
- Die Videowiedergabe auf Smartphones geht mit HTML5 deutlich schneller als mit Flash. Der Akkuverbrauch sinkt.
- Kürzere Ladezeit der Web-Animationen.
Tools zu Erzeugung von HTML5 Animationen
Wer immer noch Flash auf seiner Seite hat, sollte schnellstens auf HTML5 umstellen. Diese Umwandlung geht beispielsweise mit Animate. Innerhalb kürzester Zeit generiert die Software aus Flash-Werbebannern HTML-Canvas-Dokumente. Das Programm ist kostenpflichtig.
Mit dem Google Web Designer steht außerdem ein kostenloses Tool zur Verfügung, das die Erstellung von interaktiven HTML5-Designs ohne Programmierkenntnisse ermöglicht. Es stehen zahlreiche Vorlagen für die unterschiedlichen Verwendungszwecke zur Verfügung.
Screenshot Google Webdesigner
Hier finden Sie zahlreiche Tools zur Erzeugung von HTML5-Animationen.
Die meisten dieser Tools erzeugen HTML Canvas Elemente, daher erläutere ich im Folgenden die grundlegende Funktionsweise dieser Technik.
HTML5 Canvas
HTML5 Canvas läuft auf allen aktuellen Browsern ohne zusätzliche Plugins oder Erweiterungen. Dabei legt der Programmierer in HTML bzw. CSS die Leinwand fest und JavaScript erzeugt die Grafiken bzw. Animationen.
Bei deaktiviertem Javascript funktioniert HTML5-Canvas deshalb nicht. Die Erzeugung der Bilder beansprucht sehr wenig Ladezeit, das Laden des JavaScript Codes geschieht vorher.
HTML5 Canvas erscheint nur in Dokumenten mit der korrekten HTML5 Doctype Defintion <!DOCTYPE html> am Anfang der HTML-Datei.
Beim Einsatz von JavaScript ist aus SEO Sicht einiges zu beachten. Lesen Sie unseren interessanten Leitfaden JavaScript & SEO für mehr Informationen.
Simples Canvas Beispiel
Zunächst legen Sie mit dem canvas-Element die Leinwand fest. Es ist standardmäßig eine weiße Fläche, die ich in diesem Beispiel durch einen Rahmen border verdeutliche.
<canvas id="b_c" width="200" height="100" style="border:1px solid gray"> Keine Canvas Unterstützung durch Ihren Browser. </canvas>
Durch Javascript Code zeichnen und animieren Sie die Objekte:
<script>
var canvas = document.getElementById('beispiel_canvas'),
context = canvas.getContext('2d'),
ge = 0;
function zeichnen() {
context.beginPath();
context.rect(ge, 25, 100, 50);
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#000000";
context.fill();
context.closePath();
ge = ge + 1.05;
}
zeichnen();
setInterval(zeichnen, 2000);
</script>
In diesem Fall bewegt sich der schwarze Kasten alle 2000 Millisekunden (2 Sekunden) langsam nach rechts.
The HTML <canvas> element is used to draw graphics on a web page.
Beachten Sie diesen Grundsatz aus dem HTML Canvas Tutorial. Verwenden Sie Canvas-Elemente nur für Animationen und programmieren Sie keinesfalls HTML-Überschriften oder längere Textabschnitte mit der Canvas-Technik. Im canvas-Element besteht im Gegensatz zum img-Element keine Möglichkeit ein alt-Tag hinzuzufügen und den Suchmaschinen so zusätzliche Informationen über das Element zu übermitteln.
CSS3 Animationen
Mit CSS3 erzeugte Keyframe-Animationen kommen komplett ohne JavaScript Code aus. CSS3 erzeugt einzelne Bilder (keyframes). Die Bilder setzen sich wie in einem Daumenkino zu einer animierten Sequenz zusammen. Legen Sie also in HTML das zu animierenden Element fest und sorgen Sie dann durch den CSS-Code für Bewegung.
#farb_wechsel{
width:100px;
height:50px;
border:1px solid black;
background-color:#fff;
animation-name:farb_wechsel;
animation-duration:8s;
animation-iteration-count:infinite;
}
@keyframes farb_wechsel{
0%, 100% {
background-color:#fff;
}
25% {
background-color:#ddd;
}
50% {
background-color:#bbb;
}
75% {
background-color: #000;
}
}
Es gibt in diesem Beispiel 4 Zustände, die sich alle 2 Sekunden abwechseln. Die Möglichkeiten sind vielfältig. Mit einiger Übung erstellen Sie auf diese Art unterschiedliche CSS Animationen.
background-color:#fff;
background-color:#ddd;
background-color:#bbb;
background-color:#000;
CSS3 Keyframe-Animationen sind auch ohne JavaScript möglich. Nur der CSS-Code vergrößert sich, während der HTML-Quellcode übersichtlich bleibt. Außerdem haben CSS3 Animationen eine sehr kurze Ladezeit und funktionieren auf allen modernen Browsern.
Animationen und Usability
Setzen Sie Animationen mit Bedacht ein. Zuviel Bewegung oder sinnloses Blinken vermindern die Userzufriedenheit. Animationen sind kein Selbstzweck, optimalerweise verdeutlichen sie eine Aussage, dienen als Werbebanner der gezielten Verkaufsförderung oder werten die Seite auf. Verzichten Sie auf schlecht gemachte oder technisch unausgereifte Animationen. Stellen Sie eine hohe Userzufriedenheit und eine kurze Ladezeit sicher, um den SEO Erfolg Ihrer Seite zu ermöglichen.
Über Marcel Sarman
IT-AbteilungMarcel Sarman betreut die ABAKUS Website und entwickelt sie weiter. Er ist unser Experte für HTML5, CSS3 und WordPress und schreibt Beiträge für unsere Seite.
Alle Artikel von: Marcel Sarman
