Bilder suchmaschinenoptimiert in HTML einbinden
Bilder in HTML einbinden
Heute erkläre ich Ihnen, wie man in HTML Bilder einfügen kann.
Dazu verwenden wir das image-Tag img.
Beispielcode:
<pre><html>
<body>
<img src="bildname.jpg">
</body>
</html></pre>
Sie können dem Bild selbstverständlich die gewünschte Größe mitgeben. Um ein Bild mit der Größe 200px x 200px anzuzeigen schreiben wir folgenden Code:
Beispielcode:
<pre><html>
<body>
<img src="bildname.jpg" width="200" height="200">
</body>
</html></pre>
Um Bilder von einer anderen URL anzuzeigen benötigen Sie den kompletten URL-Pfad mit http://:
Beispielcode:
<pre><html>
<body>
<img src="http://www.beispieldomain.de/bildname.jpg" width="200" height="200">
</body>
</html></pre>
Sehr wichtig für validen Code, die Suchmaschinen und Screenreader (für blinde Menschen) ist das alt-Tag. Der Inhalt des alt-Tags wird angezeigt, sobald der Browser keine Bilderanzeige hat. Dies ist der Fall bei Screenreadern und teilweise bei geschäftlich genutzten Rechnern, deren IT-Abteilung die Anzeige von Bildern abgeschaltet hat. Das gibt es tatsächlich.
Beispielcode:
<pre><html>
<body>
<img src="http://www.beispieldomain.de/bildname.jpg" width="200" height="200" alt="Dies ist der Text, der das Bild am besten beschreibt, Hier bringe ich auch noch ein paar Suchbegriffe ein.">
</body>
</html></pre>
Nun optimieren wir das Bild nochmals und fügen das title Tag ein. Der Inhalt dieses Tags wird angezeigt, wenn man mit der Maus über das Bild fährt:
Beispielcode:
<pre><html>
<body>
<img src="http://www.beispieldomain.de/bildname.jpg" width="200" height="200" alt="Dies ist der Text, der das Bild am besten beschreibt, Hier bringe ich auch noch ein paar Suchbegriffe ein."
title="und in den Titel packe ich auch nochmal die wichtigsten Begriffe kurz und knapp rein">
</body>
</html></pre>
Wenn Sie nun noch beachten, daß die Bilder richtig benannt werden, dann können Sie sich in Zukunft über viele neue Besucher der Google-Bildersuche freuen.
Ein Bild, das beispielsweise eine Rose zeigt, sollte nicht DCN456312.jpg heißen.
Das wäre völliger Quatsch. Sie wissen nicht, was sich hinter dem Dateinamen verbirgt… woher soll es die Suchmaschine wissen?
Nennen Sie die Datei rote_rose.jpg.
Viel Spaß beim Einbinden von Bildern in Ihre HTML-Seiten.
Author: Andreas Lang
Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
