Alt text und bildunterschrift gleich

Followers:

Asked: Updated: Followers:

Alternativtext zu Bildern hinzufügen

In dieser Anleitung

1. Squarespace Hilfe-Center
2. Bilder und Videos
3. Erweiterte Bildanpassungen

Alternativtext zu Bildern hinzufügen

Hinzufügen von Alt-Text zu Ihren Bildern, wenn die erste Regel der Bild-SEO und es ist auch ein Schlüsselprinzip der Web-Zugänglichkeit.

Dies ist ein ausführlicher Artikel über das Attribut "alternativer Text": von dem , was ein alternativer Text ist, bis hin zu der Frage, wie man ihn perfekt schreibt.

Ich habe diesem Tutorial mehrere Beispiele für optimiertes alt for SEO mit Erklärungen hinzugefügt.

Es gibt auch einen eigenen Abschnitt über Alt-Text in WordPress.

Fangen wir an!

Was ist ein alternativer Text (alt) ?

An alternative text is an html attribute that should always be added to your image (<img>) elements. Alt texts provide a textual alternative to visual content in web pages.

Alt-Texte sind eine Textalternative für Bilder

Die Textalternative sollte das Aussehen und die Funktion des Bildes auf der Seite beschreiben. Die Leute vergessen oft, die Funktion des Bildes anzugeben, wenn sie alternative Texte ausfüllen. Das Erwähnen der Funktion ist nicht wirklich wichtig für SEO, aber es ist der Schlüssel für die Zugänglichkeit. Ich werde später auf dieses Thema zurückkommen, wenn wir die ALT-Beispiele durchgehen.

Alt-Attribute gelten für jedes Bildformat

Alt-Tags sollten unabhängig vom Bildformat angewendet werden: Dieses Attribut ist in der Tat mit JPEG, WebP, PNH, GIF usw. kompatibel.

Wenn das angezeigte Bild keine Funktion oder keinen redaktionellen Zweck hat, kann der Alt-Text leer gelassen werden.

<img src="useless-picture.jpeg" alt="" />

Alternativer Text, Alt-Text, Alt-Tag, Alt-Beschreibung und Alt-Attribut: DRITTER MANN: GANZ GLEICH!

Technisch gesehen sollte man den Begriff alt-Tag nicht für alternative Texte verwenden, da es sich nicht um ein Tag, sondern um ein mögliches Attribut von img-Elementen handelt. Aber wen kümmert das schon?

Alternativer Text, Alt-Text, Alt-Tag, Alt-Beschreibung, Alt-Attribut: sie sind Synonyme und bezeichnen eine Textalternative zu einem Bild.

Alt-Text und Titeltext (oder Titel-Tag) sind dennoch unterschiedlich.

Für Barrierefreiheit und SEO ist es wichtig, auf Alternativtext zu achten, aber Sie können den Titeltext ignorieren.

Titeltexte sind nur dazu da, Ihren Bildern einen Titel zu geben. Suchmaschinen kümmern sich nicht um sie: Sie sind daher für die Suchmaschinenoptimierung nutzlos. Die Optimierung von Titel-Tags sollte daher Ihre letzte Priorität sein.

Das ist einer der Gründe, warum unser Image SEO Optimizer für WordPress zwar das Problem des Alt-Textes, nicht aber des Titeltextes adressiert.

In ihrem Artikel Using ALT attributes smartly erzählte uns Ríona MacNamara vom Google Webmaster Tool Team:

” Googlebot sieht die Bilder nicht direkt, wir konzentrieren uns im Allgemeinen auf die Informationen, die im Attribut "alt" angegeben werden. “

Wenn Sie mehr darüber wissen wollen, lade ich Sie ein, meinen Artikel über die Optimierung der Bildattribute für SEO zu lesen. Dort finden Sie mehr Informationen über das Attribut title text.

Warum sind Alt-Texte wichtig für SEO und Barrierefreiheit?

Die Verbindung zwischen ALT-Text, Suchmaschinen und organischem Verkehr

Mit der Erhöhung der künstlichen Intelligenz sind Google und Bing in der Lage, Ihre Bilder zu lesen. Sie tun es jedoch nicht, weil es für sie zu langsam und teuer wäre. Deshalb sind alternative Texte für SEO und Image-SEO so wichtig: Sie bieten Ihnen die Möglichkeit, Google in wenigen Stichworten mitzuteilen, worum es bei Ihrem Foto geht.

Ich schreibe diesen Satz in fast allen meinen Artikeln oder Leitfäden, aber in-Seite SEO ist fast nur über die Hilfe Suchmaschinen, um Ihre Inhalte zu verstehen.

Ein Bild mit einem schlechten Namen und ohne Alt-Text wird in den Suchergebnissen von Google Image schlecht platziert, aber nicht nur.

Alt-Texte verbessern In-Page-SEO

Bilder ohne Alternativtext stellen für Suchmaschinen eine Grauzone auf Ihrer Seite dar. Indem Sie Google helfen, das Geheimnis Ihrer Bilder zu lüften, verbessern Sie auch die globale Semantik Ihrer Website. Das Alt-Text-Attribut ist gewissermaßen der beste Freund der Google-Roboter.

Alt-Tags sind grundlegend für die Zugänglichkeit und das Benutzererlebnis

Heutzutage ist der Zugang zum Internet fast ein Menschenrecht. Ihre Website sollte daher für jeden zugänglich sein. Auch für sehbehinderte oder blinde Menschen sind alternative Texte wichtig.

Die Bereitstellung einer textlichen Alternative zu Ihren Fotos ermöglicht es Menschen, die Bildschirmleseprogramme oder Software wie JAWS und NVDA verwenden, Ihre Bilder buchstäblich zu lesen, auch wenn sie sie nicht sehen können.

Das Hinzufügen von alternativen Texten zu Ihren Bildern ist das Richtige. Außerdem ist es ein Markt mit Millionen von Menschen auf der ganzen Welt.

 Auch Titel III des Gesetzes für Amerikaner mit Behinderungen verbietet die Diskriminierung aufgrund von Behinderung. Es gibt eine wachsende Zahl von Rechtsfällen bezüglich der Zugänglichkeit von Websites und immer mehr Richter erklären, dass Online-Händler die ADA-Verordnung einhalten müssen.

Zu Ihrer Information: Barrierefreiheit ist auch eines der Kernprinzipien von WordPress.

Wie schreibt man perfekt alternative Texte?

Aber konzentrieren wir uns jetzt auf das, wofür Sie wahrscheinlich gekommen sind: Wie schreibt man perfekt alternative Texte?

Ich sagte vorhin, dass die Funktion und der Kontext entscheidend sind. Jedes Mal, wenn ein Bild eine Funktion auf Ihrer Seite abspielt, sollte eine textliche Alternative angeboten werden. Umgekehrt kann bei einem rein dekorativen Bild der Alternativtext leer gelassen werden.

Lassen Sie uns mit einigen alternativen Textbeispielen üben!

Beste SEO-Praktiken für alternative Texte im Jahr 2020

Bilder teilweise oder verlinkt mit Ihrem redaktionellen Inhalt

Wenn ein Bild irgendwie mit Ihrem redaktionellen Inhalt verknüpft ist, müssen Sie eine textliche Alternative anbieten. Dazu gehören auch die Fotos, die Sie in Ihren Blog-Artikeln, Ihren Produktblättern usw. verwenden können.

Bei der Entscheidung, wie man geeignete Alternativtexte für Bilder schreibt, ist der Kontext alles. Ein Alt für ein Bild kann je nach dem Kontext und der Umgebung des Bildes selbst sehr unterschiedlich sein.

Gute Alternativtexte sind kurz, aber beschreibend, stellen den Inhalt in einem besseren Kontext dar und geben ggf. die Funktion des Bildes an.

Alt-Text Beispiele & Best Practices

Alt-Text-Beispiel Nr. 1

Perfektes Alt für SEO: Kathedrale Notre Dame de Paris von Wolken
umgeben Dezenter Alt für SEO: Notre Dame de Paris
Bad alt für SEO: Kathedrale

Alt-Text Beispiel Nr. 2

Perfektes Alt für SEO: Ausgewachsenes Rotes Känguru in der australischen Wüste
Anständiger Alt für SEO: Rotes Känguru
Schlechter Alt für SEO: Känguru

Alt-Text Beispiel Nr. 3

Perfektes Alt für SEO: Weiße Rosenblüte in einem natürlichen Garten
Dezenter Alt für SEO: Weiße Rose
Bad alt für SEO: Blume

Alt-Text Beispiel Nr. 4

Perfektes Alt für SEO: Tesla-Auto mit Strom auf einem Parkplatz
Decent Alt für SEO: Tesla auf einem Parkplatz
Bad alt für SEO: Auto

Wie sieht es mit Funktionsbildern aus?

Vor langer Zeit, in einer wunderbaren Welt, die vom Internet Explorer 6 dominiert wird, boten HTML und CSS den Frontend-Entwicklern nicht viele Möglichkeiten.

Frontend-Entwickler gab es nicht einmal, weil die einzige Möglichkeit, etwas ästhetisch zu gestalten, darin bestand, ein Bild in ein Tischelement zu setzen. Kein Grenz-Radius, kein Schatten-Kasten, etc.

Eine der Folgen war, dass die Leute Bilder für ihr Menü verwendeten. In solchen Situationen ist es notwendig, einen alternativen Text zum Bild bereitzustellen.

In unserem Beispiel sollte jeder Menüeintrag einen Alt-Text haben: "Brachiosaurus" für das erste Glied, "Gallimimus" für das zweite usw.

Es ist nicht notwendig, "Link to" hinzuzufügen, da das Bild als innerhalb eines Links identifiziert wird.

Dank gesundem Menschenverstand, Google, Mozilla Firefox und dem w3c.org verschwinden die funktionalen Bilder langsam.

Dekorative Bilder

Wie erkennt man, ob ein Bild dekorativ ist oder nicht? Sie müssen eine doppelte Frage beantworten.

1. Ist das Bild irgendwie mit dem Inhalt, von dem ich spreche, verbunden?
2. Bietet dieses Bild wichtige Funktionen, wie z.B. die Navigation?

In dieser Situation sind die Sterne in der Nähe des WordPress Logos hauptsächlich dekorativ.

Tatsächlich sind sie nicht direkt mit dem verbunden, worüber wir sprechen, und sie sind überhaupt nicht funktionsfähig, da sie keinen externen Link zu unseren erstaunlichen WordPress-Bewertungen bieten.

Alt-Texte in WordPress: Eine Schritt-für-Schritt-Anleitung

In diesem Abschnitt habe ich all die Dinge zusammengestellt, die Sie über Alt-Texte in WordPress wissen müssen. Fangen wir mit dem Offensichtlichsten an: dem Hinzufügen eines alternativen Textes zu einem Bild in WordPress.

So fügen Sie Alt-Text zu einem Bild in WordPress hinzu

Sobald Sie ein Bild in WordPress hochgeladen haben, haben Sie Zugriff auf dessen Metadaten, die Ihnen das folgende Menü (auf der rechten Seite des Bildschirms) zur Verfügung stellen:

Sie können u. a. den Titel Ihres Bildes, die Bildunterschrift und den Alt-Text ändern.

Sie können alternative Texte auch direkt in der Medienbibliothek hinzufügen.

Fügen Sie ein Bild hinzu und klicken Sie auf "Bearbeiten", um die Bildeinstellungen in WordPress aufzurufen.

Von hier aus können Sie den Alternativtext, die Beschriftung und die Beschreibung bearbeiten.

So fügen Sie Alt-Text zu Bildern in Elementor hinzu

Wenn Sie Seiten in Elementor erstellen, ist das Hinzufügen von Alt-Text sehr einfach. 

Wenn Sie einem Bild einen Alt-Text hinzufügen möchten, können Sie dies tun, indem Sie auf das Bild klicken und eine Bildbox aus dem Elementor-Editor erscheint.

Klicken Sie in der Bildbox auf das Bild und es wird in Ihrer Medienbibliothek angezeigt. 

Die Option Alt-Text wird auf der rechten Seite des Fensters angezeigt.

Sie können das Alt-Tag von hier aus bearbeiten.

Bild-Alt-Tags in Divi zum Laufen bringen

In der Vergangenheit hat das DIVI-Theme keine ALT-Tags aus der Mediengalerie unterstützt.

Dies hat sich hoffentlich seit der Version 4.4.4 geändert.

Das Hinzufügen von Alt-Text in Divi ist einfach: Sie müssen zur Registerkarte "Erweitert" gehen, nach unten scrollen und den Text manuell in den Alt-Text-Bereich eingeben.

Bulk-Alt-Tags in WordPress

Wenn Sie viele leere Alternativtexte haben, kann es Stunden dauern, die Alternativtexte richtig mit SEO-freundlichem Inhalt zu füllen.

Hoffentlich gibt es ein Plugin namens Bild-SEO-Optimiererdas das mit Hilfe von künstlicher Intelligenz mit einem Klick erledigen kann. Ich zeige Ihnen, wie Sie dieses Plugin verwenden können.

Nachdem Sie sich registriert haben, müssen Sie auf die Registerkarte "Alt & name optimizer " klicken. Wählen Sie dann die Einstellungen, die Ihren Bedürfnissen entsprechen.

Dann müssen Sie nur noch den Bulk ausführen. Das war's.

Dieses Plugin ist kompatibel mit Yoast und SEOPress gezielten Keywords.

Abschließende Gedanken zum Alt-Text-Attribut

Das Alternativtext-Attribut ist sowohl für SEO als auch für die Barrierefreiheit sehr wichtig: Sie sollten es unter keinen Umständen vernachlässigen.

Das perfekte Schreiben von Alternativtexten kann knifflig und zeitaufwendig sein. Ich hoffe, die Erklärung und die Beispiele, die ich Ihnen in diesem Artikel gegeben habe, helfen Ihnen dabei.

Wenn Sie Hunderte oder Tausende von alternativen Texten zu optimieren haben, sollten Sie einen Blick auf Image SEO Optimizer werfen. Dieses Plugin WordPress könnte Ihnen Stunden sparen!

Was gehört in den Alt Text?

Warum ist der Alt Text bei Bildern im Internet wichtig?

Was bedeutet Alt auf Bildern?

Warum Alt Text?