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

CMS für SEO
Die besten CMS für SEO

Ein Content-Management-System (CMS) ermöglicht es jedem User, auch ohne HTML-Kenntnisse, Inhalte auf Webseiten zu verändern. Mittlerweile gibt es sehr viele dieser Systeme, die sich in den technischen Feinheiten unterscheiden. Nur wenige Websitebetreiber verzichten auf die Arbeitserleichterung durch ein CMS. Welches CMS für SEO? Bei Baukastensystemen haben Sie als User nicht die Möglichkeiten, bestimmte Einstellungen zu

> WEITERLESEN …

 
Nutzererfahrung (UX) verbessern: SEO Kennzahlen und Tipps

Als User Experience (UX) oder Nutzererfahrung bezeichnen Fachleute das Erlebnis eines Users bei der Interaktion mit einer Website. Sind die Emotionen eines Nutzer positiv und werden seine Bedürfnisse befriedigt, dann ist auch die Nutzererfahrung positiv. Inhalt Kennzahlen, die mit der Nutzererfahrung zusammenhängen Sinnvolle SERPs Texte gliedern Bilder optimieren Interne Suchfunktion einbauen Hauptnavigation Breadcrumbs Mobile Nutzererfahrung

> WEITERLESEN …

 
SEO-konforme 404-Seiten (Tipps und Beispiele)

Fast jeder Internetnutzer, der sich regelmäßig auf verschiedenen Websites bewegt, ist schon mindestens einmal darauf gestoßen: eine 404-Fehlermeldung. Oft endet hier der Aufenthalt auf der betroffenen Website, da die Inhalte, die den Besucher interessieren, nicht aufzurufen sind. Es gibt viele Gründe, die dafür sorgen, dass 404-Fehler auftreten. Sei es eine fehlerhafte Weiterleitung, falsches Löschen von

> WEITERLESEN …

 
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 …