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

H1-Überschrift anstelle des Title-Tags in den Google-Suchergebnissen

Nach jeder Sucheingabe erscheint bei Google eine Suchergebnisseite (SERP). Die einzelnen Suchergebnisse setzen sich aus der URL, dem Titel und der Seitenbeschreibung zusammen. Suchergebnis mit Anzeige des angegebenen Titels Dabei legen Sie den Seitentitel mit <title> — </title> und die Seitenbeschreibung durch <meta name=“description“ content=“—“ > direkt auf der Seite fest. Die Angaben sind für

> WEITERLESEN …

 
Interne Verlinkungen optimieren

Links, die innerhalb einer Domain von einer Unterseite auf eine andere Unterseite verweisen, werden als interne Links bezeichnet. Bei Verlinkungen von anderen Websites sprechen Fachleute dagegen von externen Links. Durch interne Verlinkungen steigt die Wertigkeit der verlinkten Unterseiten. Außerdem erleichtern interne Links Suchmaschinen die Indexierung der vorhandenen Inhalte. Die meisten Unterseiten verfügen über keinerlei einkommende

> WEITERLESEN …

 
Arten von Suchanfragen – Wie suchen die User?

In der SEO-Welt ist es sehr einfach, zwischen den verschiedensten Erfolgsfaktoren und Performance-Indikatoren den Überblick darüber zu verlieren, was Suchmaschinen letztendlich zu so wirksamen Marketing-Instrumenten macht. Bei den Versuchen Traffic zu erhöhen und Rankings für unterschiedliche Keywords zu verbessern, kann oft vergessen werden, dass der grundlegende Zweck von Suchmaschinen ist, Nutzern die für sie relevantesten

> WEITERLESEN …

 
Rankingvorteile durch Löschen oder Erneuern alter Inhalte?

Veraltete News-Artikel, Informationen zu Produkten, die nicht mehr verkauft werden, und qualitativ verbesserungswürdiger Content. Häufig erkennen Webmaster viele Unterseiten mit Inhalten, die grundsätzlich veraltet sind, oder mit dem Motto „Quantität über Qualität“ erstellt wurden. Die Überlegung nach der Aktualisierung dieser Inhalte hört häufig dann auf, sobald erkannt wird, dass die Seiten mit diesen Inhalten Rankings

> WEITERLESEN …