Google beendet 2020 die Indexierung von Flash-Inhalten

Marcel Sarman  Marcel Sarman in OnPage SEO am 25. November 2020

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
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.


Keine Canvas Unterstützung durch Ihren Browser.
<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:


Keine Canvas Unterstützung durch Ihren Browser.


<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.




Beitrag kommentieren

EINE ANTWORT HINTERLASSEN

Dein Kommentar wird vor der Freischaltung von einem Admin moderiert.



Marcel Sarman

Über Marcel Sarman

IT-Abteilung

Marcel 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:

Verwandte Beiträge

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

> WEITERLESEN …

 
Keywords im Singular oder Plural optimieren?

Eine Thematik, die eigentlich schon lange als geklärt galt, wurde durch ein Google Hangout mit John Mueller am 26. Juni 2020 quasi wieder neu aufgewärmt. Die Rede ist von der Verwendung der Einzahl (Singular) oder Mehrzahl (Plural) von Keywords. Genauer gesagt ging es darum, ob und wie Google entsprechende Singular- und Plural-Varianten von Keywords bewertet.

> WEITERLESEN …

 
Strukturen, die Google liebt – SEO mit strukturierten Daten (inkl. Update für COVID-19-Ankündigungen)

Google mag gute Inhalte, das wissen wir. Doch Content ist vielschichtig, vielformatig und manchmal auch mehrdeutig. Deswegen mögen Suchmaschinen neben dem reinen Inhalt eine Hilfe zur Interpretation. Diese technische SEO Hilfe können wir in Form von strukturierten Daten bzw. Mikroformaten geben. Doch was sind strukturierte Daten und wie werden sie implementiert? Können damit Rankings verbessert

> WEITERLESEN …

 
Hidden Content und Infinite Scrolling: SEO Tipps zur Umsetzung

Als Hidden Content bezeichnen Fachleute Inhalte einer Website, die für den User nicht zu sehen, aber im Quelltext vorhanden sind. Dabei unterscheidet man zwischen zwei Arten von Hidden Content. Im ersten Fall versteckt der Websitebetreiber Texte durchgängig vor dem User. Dann kommen die Keywords im Quelltext vor, sind aber für den Website Besucher unsichtbar. Winzige

> WEITERLESEN …