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 hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash.
Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich 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.
