Das Bildtitelattribut verstehen

Die Optimierung der Bilder Ihrer Website ist keine leichte Aufgabe. Sie müssen nicht nur sicherstellen, dass die Dateigrößen überschaubar sind, um lange Seitenladezeiten zu vermeiden, sondern sie bieten auch viele Möglichkeiten zur Verbesserung Ihrer Suchmaschinenoptimierung (SEO), die leicht zu übersehen sind. Sie kennen beispielsweise das Bildtitelattribut und die Rolle, die es in den visuellen Elementen Ihrer Website spielt, nicht.

In diesem Beitrag beleuchten wir das Bildtitel-Attribut, diskutieren, wie es sich vom Alt-Attribut unterscheidet und was es für Ihre SEO-Strategie bedeutet. Wir zeigen Ihnen auch, wie Sie es vor den Besuchern Ihrer Website verbergen können.

Lass uns direkt eintauchen!

Abonnieren Sie unseren Youtube-Kanal

Eine Einführung in das Bildtitelattribut

Das Wichtigste zuerst: Das Bildtitelattribut ist nicht dasselbe wie der Dateiname des Bildes. Vielmehr handelt es sich um Informationen, die in das HTML-Tag des Fotos oder der Grafik eingefügt werden können. Hier ist ein Beispiel mit dem title-Attribut am Ende:

<img src="filename.jpg" alt="description of your image" title="image title">

Die bemerkenswerteste Auswirkung des title-Attributs besteht darin, dass Benutzer es als „Tooltip“ im Frontend Ihrer Website sehen können, wenn sie mit der Maus über das Bild fahren:

Nicht alle Browser unterstützen diese Funktion. Firefox ist jedoch einer der wenigen, die dies tun, und es ist der drittbeliebteste Browser im Internet. Sie können Bildtitelattribute in WordPress über Ihre Medienbibliothek hinzufügen. Klicken Sie einfach auf das entsprechende Bild und füllen Sie das Feld Titel aus:

Sie können es auch direkt im Blockeditor hinzufügen. Erweitern Sie die erweiterten Einstellungen für den Bildblock und füllen Sie das Feld Titelattribut aus:

Der Zweck, den Bildtitel beim Hover sichtbar zu machen, besteht darin, Ihren Besuchern einen zusätzlichen Kontext zu bieten. Einige Ersteller von Inhalten geben beispielsweise die Namen der auf dem Bild abgebildeten Personen an oder wichtige Details, von denen die Benutzer profitieren können.

Sie möchten sich jedoch nicht ausschließlich auf das title-Attribut verlassen, zumal es nicht in allen Browsern für Benutzer sichtbar ist. In einigen Fällen kann eine Bildunterschrift effektiver sein. Außerdem sollten Sie Ihren Bildern immer Alt-Text hinzufügen, auch wenn sie Titelattribute haben.

Beim Erstellen Ihrer Titelattribute ist es am besten, sie auf wenige Wörter zu beschränken. Seien Sie selektiv und beschreibend, damit der Hover-Text nicht zu lang ist und Ihren Besuchern einen Mehrwert bietet.

Der Unterschied zwischen dem Title-Attribut und dem Alt-Attribut

Wir haben bereits erwähnt, dass es wichtig ist, Ihren Bildern Alt-Text hinzuzufügen, auch wenn Sie ein Titelattribut enthalten haben. Es ist ein häufiger Fehler von Inhaltserstellern, das Bildtitel-Attribut mit dem Alt-Attribut zu verwechseln oder davon auszugehen, dass die Verwendung von beiden übertrieben ist.

Das Alt-Attribut gibt den Alt-Text des Bildes in seinem HTML-Tag an. Es ist das zweite in unserem Beispiel zuvor aufgeführte Attribut:

<img src="filename.jpg" alt="description of your image" title="image title">

Der Zweck von Alternativtext besteht darin, Benutzern visuelle Elemente zu beschreiben, die sie nicht sehen können, entweder weil das Bild nicht geladen wurde oder weil sie einen Bildschirmleser verwenden. Dieser Text wird anstelle des Bildes angezeigt, wenn er nicht gerendert werden kann:

In WordPress kannst du Bildern über deine Medienbibliothek oder die Einstellungen eines beliebigen Bildblocks im Block-Editor Alternativ-Text hinzufügen. Dies ist entscheidend, um sicherzustellen, dass Ihre Website den Barrierefreiheitsstandards entspricht. Wir empfehlen Ihnen daher dringend, dies zu tun.

Es ist äußerst wichtig, nicht zu versuchen, das Bildtitelattribut zu verwenden, um das Alt-Attribut zu ersetzen. Nicht alle Screenreader unterstützen das title-Attribut und es gibt keine Möglichkeit für Benutzer, die auf die Tastaturnavigation angewiesen sind, den Mauszeiger über ein Bild zu bewegen, um es anzuzeigen. Dies kann zu ernsthaften Problemen mit der Barrierefreiheit auf Ihrer Website führen.

Wie sich das Bildtitelattribut auf SEO auswirkt

Es gibt viele gemischte Botschaften, wenn es darum geht, wie wichtig das Bildtitelattribut für SEO ist. Einige behaupten, es sei eine hervorragende Möglichkeit, zusätzliche Keywords einzubinden, während andere sagen, dass Suchmaschinen-Bots sie nicht einmal crawlen.

Um es auf den Punkt zu bringen, das Attribut des Bildtitels ist kein direkter Rankingfaktor. Wenn Sie Ihre Bilder optimieren, indem Sie allen Titeln hinzufügen, wird dies die Sichtbarkeit Ihrer Seiten in den Suchmaschinenergebnissen wahrscheinlich nicht wesentlich ändern.

Das Einbeziehen von Titelattributen wird Ihrer Website jedoch auch aus SEO-Sicht nicht schaden . Tatsächlich empfiehlt Google es. Wenn Suchmaschinen-Bots sie crawlen und Sie Schlüsselwörter einbeziehen, können Sie Ihren Bildern möglicherweise zumindest einen Schub in den Google Bilder-Suchergebnissen geben.

Außerdem können Bildtitel die User Experience (UX) Ihrer Website verbessern, indem sie wichtige Details mit den Besuchern teilen. Dies kann indirekt zur SEO beitragen, indem es Rankingfaktoren wie Seitenaufrufe, Sitzungsdauer und andere solche Metriken beeinflusst.

Trotzdem unterstützen nicht alle Browser und Geräte, wie bereits mehrfach erwähnt, Hover-Text. Das Durchsuchen Ihrer Medienbibliothek und das Hinzufügen von Titeln zu jeder Datei kann eine enorme Zeitverschwendung sein, wenn die meisten Ihrer Benutzer sie nie sehen werden.

So blenden Sie den Bildtitel-Tooltip in WordPress aus

Möglicherweise möchten Sie den Tooltip des Bildtitels ausblenden. Vielleicht befürchten Sie, dass Besucher es als störend empfinden oder möchten es hauptsächlich für SEO-Zwecke verwenden, halten es aber nicht für notwendig, um den Lesern zu helfen, Ihren Inhalt zu verstehen.

Sie können einfach das Titelattribut aus Ihren Bildern im Blockeditor und Ihrer Medienbibliothek entfernen. Sie verlieren dann jedoch alle potenziellen SEO-Vorteile, die Sie daraus sehen könnten.

Die meisten Leute, die den Tooltip ausblenden möchten, fügen ihren Sites JavaScript hinzu, damit sie das Attribut in ihren Image-Tags behalten können, aber verhindern, dass es im Frontend angezeigt wird. Wir empfehlen die Verwendung eines Plugins wie Insert Headers and Footers, um diesen Vorgang zu vereinfachen.

Fügen Sie im Abschnitt <head> den folgenden Code hinzu, der in script-Tags eingeschlossen ist:

jQuery(document).ready(function($) {
    $('img[title]').each(function() { $(this).removeAttr('title'); });
});

Wenn Sie Divi verwenden, können Sie die Installation des zusätzlichen Plugins überspringen und diesen Code hinzufügen, indem Sie zu Divi > Themenoptionen > Integration navigieren:

Der erste Code-Editor auf diesem Bildschirm fügt das JavaScript zum Abschnitt <head> Ihrer Website hinzu, genau wie es beim Einfügen von Kopf- und Fußzeilen der Fall wäre.

Abschluss

Es ist möglich, jahrelang Online-Inhalte zu erstellen, ohne an die Titelattribute Ihrer Bilder zu denken. Wenn Sie sie jedoch vollständig ignorieren, könnte dies eine verpasste Gelegenheit sein, Ihren Benutzern zusätzlichen Kontext zu bieten. Noch wichtiger ist, dass der Missbrauch dieses Attributs negative Folgen für die Zugänglichkeit und SEO Ihrer Website haben kann.

In diesem Beitrag haben wir die Unterschiede zwischen dem Bildtitel-Attribut und dem Alt-Attribut besprochen, damit Sie Ihre SEO maximieren können. Wir haben Sie auch durch das Ausblenden der Bildtitel-QuickInfo im Frontend geführt, damit Besucher sie nicht sehen können, wenn sie mit der Maus über ein Foto oder eine Grafik fahren.

Sie haben Fragen zum Bildtitelattribut oder zur Bildoptimierung? Hinterlassen Sie sie für uns im Kommentarbereich unten!

Bild von Jane Kelly / Shutterstock.com