Sie fragen sich, was dekorative Bilder sind und wie sie sich auf SEO auswirken?
Dekorative Bilder müssen anders behandelt werden als andere Bildtypen.
Die gute Nachricht ist, dass es sehr einfach ist, dekorative Bilder korrekt zu handhaben.
In diesem Artikel
Was sind dekorative Bilder?
Ein dekoratives Bild ist ein Bild, das keine relevante Information liefert.
Zum Beispiel ist ein Stockfoto von gestapelten Büchern ein dekoratives Bild, das häufig auf Bildungswebsites zu finden ist.
Während dekorative Bilder selten Informationswert hinzufügen, können sie den Stil einer Website verbessern und zum Vergnügen des Nutzers auf einer Seite beitragen.
Zum Beispiel können Literaturmagazine und -zeitschriften Stockbilder oder benutzerdefinierte Illustrationen verwenden, um Seiten visuell aufzuwerten.
Hier kann das dekorative Bild ansprechend sein und hauptsächlich die Fantasie ansprechen.
Die „Über uns“-Seite des Magazins Nautilus ist ein gutes Beispiel. Sie verspricht „eine Reise in die Wunder des Universums“, und eine traumhafte Illustration zieht den Leser an.
Informative vs. dekorative Bilder: Was ist der Unterschied?
Der Hauptunterschied zwischen dekorativen und informativen Bildern besteht darin, dass letztere Informationen liefern, die sich auf das Thema einer Seite beziehen.
Beispiele für informative Bilder sind:
- Fotos von Nachrichtenereignissen, wie z. B. einem Protest oder einem Tatort.
- Diagramme und Grafiken, die Punkte in einem Artikel verdeutlichen.
- Bilder eines Ortes, einer Person oder einer Sache, die im Artikel besprochen werden.
Informative Bilder werden auch als funktionale Bilder bezeichnet.
Informative Bilder helfen Benutzern, die Richtigkeit des Textes zu überprüfen und in einigen Fällen tiefergehende Details zu erfahren.
Aber wie wir am Beispiel von Nautilus gesehen haben, scheint es falsch zu sein zu behaupten, dass dekorative Bilder keine Informationen vermitteln, da sie visuell eine Stimmung hervorrufen und Erwartungen wecken können.
Wir können jedoch sagen, dass dekorative Bilder keine Informationen liefern, die nicht bereits im Text vorhanden sind.
Diese beiden Bildtypen werden auch in Bezug auf SEO unterschiedlich behandelt.
Um zu verstehen, wie und warum, lassen Sie uns die Bedeutung von Alt-Text noch einmal betrachten.
Was ist Alt-Text (Alternativtext)?
Alt-Text ist Text, der ein Bild beschreibt.
Es gibt 2 Zwecke für Alt-Text:
- Suchmaschinen lesen und indizieren Alt-Text und er hilft ihnen, den Bildinhalt zu verstehen.
- Alt-Text wird von Bildschirmlesegeräten vorgelesen, Geräte, die von Menschen mit Beeinträchtigungen verwendet werden.
Alternativtext wird auch als Alt-Tag bezeichnet. Dies ist ein Verweis auf das HTML, das Content-Management-Systeme wie WordPress automatisch zu Bildern hinzufügen.
Alt-Text für dekorative Bilder
Die Handhabung von Alternativtexten für dekorative Bilder ist einfach: die Angabe als leerer Text gilt als bewährte Methode.
So stellen Sie sicher, dass das Feld leer ist:
- Melden Sie sich bei WordPress an
- Navigieren Sie zu einer beliebigen Webseite, auf der Sie ein Bild haben.
- Klicken Sie dann auf das Bild, um die Bildeinstellungen von WordPress in der rechten Seitenleiste zu öffnen.
Dort sehen Sie das Feld für Alternativtext.
Wenn Sie es leer lassen, bedeutet das einfach, dass Sie keinen Alternativtext hinzufügen müssen.
Wenn Sie es leer lassen, werden Bildschirmsprachausgaben das dekorative Bild überspringen. Das bietet eine bessere Benutzererfahrung für sehbehinderte Menschen, da die Beschreibung dieses Bildes keinen Mehrwert bieten würde.
Stellen Sie sich vor, eine Bildschirmsprachausgabe liest laut vor:
- „Menschen zeigen auf Webseiten“
- „dekoratives grünes Bild“ oder,
- „Illustration für einen Webseitenartikel“
Langweilig, oder?
Sehen wir uns nun an, wie sich die Handhabung von Alternativtexten für informative Bilder unterscheidet
Bildschirmsprachausgaben sind eine von vielen assistiven Technologien, die von Menschen mit Behinderungen genutzt werden.
Alt-Text für informative Bilder
Als Beispiel verwenden wir einen Artikel über ein digitales Strategiemodell, das von Avinash Kaushik erstellt wurde.
Kaushik ist ein bekannter Marketing-Visionär. Da sich der Artikel auf seine Arbeit konzentriert, haben wir ein Foto von ihm hinzugefügt.
Und das ist der Alternativtext, den wir hinzugefügt haben: „Avinash Kaushik spricht auf einer Konferenz.“
Das Foto von Kaushik liefert nicht viele Informationen, daher fragen Sie sich vielleicht: „Warum es nicht als dekoratives Bild behandeln?“ Das könnten wir tun. Aber Kaushik ist zentral für den Artikel. Und wir möchten, dass Suchmaschinen diesen Alternativtext indexieren.
Auf diese Weise können Benutzer, die nach „Avinash Kaushik“ suchen, auf dieses Foto stoßen und zum Artikel gelangen.
Betrachten wir nun 2 Bildprobleme, die sich auf SEO auswirken können.
Weitere SEO-Tipps: Dateinamen und Größen von Bildern
Wenn Sie sicherstellen, dass Ihr Dateiname und die Größe Ihres Bildes optimiert sind, kann dies Ihre SEO verbessern.
Betrachten wir zuerst die Dateinamen.
Dateinamen von Bildern im Vergleich zu Dateitypen
Bevor wir uns damit befassen, ist es hilfreich zu wissen, dass sich ein Dateiname eines Bildes vom Dateityp des Bildes unterscheidet. Der Dateityp wird als „Erweiterung“ ausgedrückt – ein kurzer Text, der automatisch am Ende des Dateinamens eines Bildes erscheint.
Zum Beispiel: Foto-Name.jpg
Dies sagt uns, dass der Dateiname „Foto-Name“ lautet und es sich im JPG-Dateiformat befindet.
Wenn dieses Bild im PNG-Format vorläge, würde es so aussehen: Foto-Name.png.
Die Dateiendung ist eine winzige Information, die angibt, in welchem Format sich die Datei befindet.
Es gibt viele Arten von digitalen Bildformaten, wie z. B. .webp und .svg. Es ist nicht notwendig, sie alle zu verstehen, da diese Dateiendung automatisch hinzugefügt wird.
So optimieren Sie Bilddateinamen
Da Suchmaschinen auch Bilddateinamen lesen, stellen Sie sicher, dass Ihre klar und beschreibend sind.
Schlecht benannte Bilddateien sind vage, wie diese:
- 1100073658.jpg
- Mann-beim-Sport.jpg
Gute Bildtitel sollten spezifisch sein und das Bild beschreiben.
Angenommen, Sie schreiben einen Artikel darüber, wie Rekruten ihre Fitness aufbauen, bevor sie zum US Marine Corps Boot Camp geschickt werden.
Ihr Bild zeigt einen tatsächlichen Rekruten, der Plank-Übungen macht. Anstatt mann-beim-sport.jpg könnten Sie Ihr Bild marine-rekrut-macht-plank.jpg nennen.
Dateinamen für dekorative Bilder sind oft weniger spezifisch, da sie verwendet werden, um eine Stimmung oder ein Markenimage zu erzeugen. Zum Beispiel heißt das dekorative Nautilus-Bild oben wunder-fahrzeug.jpg.
Wenn Sie ein Kunstwerk teilen, ist der Titel des Kunstwerks ein geeigneter Bilddateiname.
Erfahren Sie mehr in unserem Artikel über SEO für Bilddateinamen.
Vorsicht: Die Veröffentlichung von Bildern, für die Sie keine Lizenz haben, kann zu hohen Geldstrafen führen. In den USA können diese Strafen bis zu 150.000 US-Dollar pro Bildnutzung betragen.
Bilddateigröße
Da große Dateigrößen dazu führen können, dass Ihre Seite langsam geladen wird, sollten Sie ein WordPress-Plugin verwenden, das Ihre Bilder automatisch für Geschwindigkeit optimiert.
Plugins wie WP Rocket sind einfach zu installieren und zu verwenden.
Profi-Tipp: Die Größe Ihrer Bilddatei und die Anzeigegröße des Bildes sind 2 verschiedene Dinge. Es ist möglich, die Bildgröße zu reduzieren und sie trotzdem als hochauflösendes, Retina-fähiges Bild anzuzeigen.
Webseiten-SEO: Mehr Besucher gewinnen
Informative und dekorative Bilder können Ihnen helfen, Besucher Ihrer Website zu binden. Und Alt-Texte für informative Bilder können Traffic von Suchmaschinen anziehen.
Aber SEO ist mehr als nur Bild-Alt-Texte.
Hier kommt ein Plugin wie All in One SEO (AIOSEO) ins Spiel.
Es wurde entwickelt, um für Anfänger einfach zu bedienen zu sein und bietet fast alles, was Sie für SEO benötigen (außer Inhalte).
Dies ist ein etabliertes Plugin mit Tausenden von 5-Sterne-Bewertungen auf WordPress.org. Über 3 Millionen Benutzer haben es heruntergeladen.
So funktioniert es.
Höher ranken: Jeder möchte, dass seine Inhalte höher ranken, aber SEO zu lernen braucht Zeit. Hier ist AIOSEO entscheidend. Es analysiert Ihre Inhalte und sagt Ihnen genau, was Sie tun müssen, um sie für SEO zu optimieren.
Wenn Sie die Empfehlung befolgen, steigt Ihr TruSEO-Score.
In Suchergebnissen gut aussehen: Das Plugin macht es einfach, Ihre Webseiten für die Anzeige als Rich Snippets zu qualifizieren. Sie können sich Rich Snippets als Super-Deluxe-Suchmaschinenanzeigen vorstellen.
Hier ist, wie ein Standard-Such-Snippet aussieht:
Und hier ist ein Rich Snippet.
Kein Code erforderlich: All in One SEO kümmert sich automatisch um mehrere technische Funktionen. Zum Beispiel generiert es automatisch XML- und RSS-Sitemaps. Diese Sitemaps benachrichtigen Suchmaschinen über Ihre Änderungen oder neuen Inhalte.
Vergessen Sie nicht, für Conversions zu planen
Während Sie daran arbeiten, mehr Traffic zu generieren, sollten Sie überlegen, welche Aktionen Ihre Webbesucher ausführen sollen.
Wir verwenden OptinMonster, um Exit-Intent-Popups zu erstellen. Diese Popups erscheinen, wenn Besucher Ihre Website verlassen wollen.
OptinMonster ist kostengünstig und effektiv.
Wie wird Alt-Text in HTML geschrieben?
Diejenigen unter Ihnen, die neugierig auf die HTML-Darstellung von Alt-Text sind, werden die folgenden Informationen nützlich finden.
Die Syntax für Alt-Text lautet wie folgt:
<img alt="your alt text goes here">Beachten Sie, dass alt eine Eigenschaft eines HTML-Bildelements ist und das, was zwischen den Anführungszeichen steht, der Wert der Eigenschaft ist.
<img alt="baseball player sliding into homebase">Img-Tags enthalten auch die Quelle (src) (URL) des Bildes, zum Beispiel:
<img src="/baseball-player-scoring.png/" alt="baseball player sliding into homebase">Wenn das Alt-Text-Feld leer ist, nennt man es nuller Alt-Text und es sieht in HTML so aus.
<img src="/baseball-player-scoring.png/" alt="">Dies wird auch als leerer Alt-Attribut bezeichnet.
Tipp: Erfahren Sie, wie Sie den Code jeder Webseite anzeigen können.
Fragen und Antworten zu Bildern
Haben Sie weitere Fragen dazu, wie manche Bilder dekorativen Zwecken dienen, zu Alt-Text oder Barrierefreiheit? Wir haben einige häufig gestellte Fragen unten beantwortet.
Wenn Sie eine zusätzliche Frage haben, hinterlassen Sie bitte eine Notiz im Kommentarbereich.
Werden Hintergrundbilder als dekorative Bilder betrachtet?
Ja, Hintergrundbilder, wie sie durch die CSS-Eigenschaft 'background-image' definiert werden, gelten als dekorativ. In diesen Fällen weist der CSS-Code der Website normalerweise eine Klasse zu, deren Alt-Attribut immer leer gelassen wird.
Was ist Web-Barrierefreiheit?
Web-Barrierefreiheit ist eine Reihe von technologischen Praktiken und Standards, die darauf abzielen, Menschen mit Behinderungen das Surfen und Konsumieren von Inhalten auf einer Website zu erleichtern. Die Web Content Accessibility Guidelines (WCAG) legen Best Practices für Webentwickler fest, aber Anfänger möchten vielleicht mit den Grundlagen beginnen.
Obwohl die Zugänglichkeit einer Website die SEO nicht direkt beeinflusst, stimmt die Zugänglichkeit mit guter SEO überein. Deshalb kann eine für die Zugänglichkeit optimierte Website in den Suchergebnissen höher ranken.
Was sind die Richtlinien für Web-Barrierefreiheit?
Das Dokument mit den Richtlinien für Web-Barrierefreiheit legt Leitlinien für die einfachere Zugänglichkeit von Websites für Menschen mit Behinderungen fest. Die vom Web Accessibility Initiative (WAI) entwickelten Web Content Accessibility Guidelines (WCAG) werden ständig verbessert.
Die Richtlinien halten sich an 4 Prinzipien, die als Wahrnehmbar, Bedienbar, Verständlich und Robust definiert sind.
Die Web Accessibility Initiative ist Teil des World Wide Web Consortium (W3).
Nach dekorativen Bildern . . .
Wir hoffen, dieser Beitrag hat Ihnen geholfen zu verstehen, was dekorative Bilder sind und warum es am besten ist, den Alternativtext leer zu lassen.
Erfahren Sie als Nächstes mehr über Bild-SEO und wie Bilder zur Erstellung von scanbarem Inhalt nützlich sein können.
Wenn Sie diesen Artikel hilfreich fanden, abonnieren Sie bitte unseren YouTube-Kanal. Dort finden Sie viele weitere hilfreiche Tutorials. Sie können uns auch auf X (Twitter), LinkedIn oder Facebook folgen, um auf dem Laufenden zu bleiben.
Möchten Sie AIOSEO kostenlos ausprobieren?
Geben Sie die URL Ihrer WordPress-Website ein, um AIOSEO Lite zu installieren.
Offenlegung: Unsere Inhalte werden von den Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Wir empfehlen nur Produkte, von denen wir glauben, dass sie unseren Lesern einen Mehrwert bieten.
