25. Aug. 2014

Bilder machen Texte interessant

Dies ist sicherlich jedem aus eigener Erfahrung bekannt. Ein Bild im Text, welches idealerweise sogar vom Text umflossen wird, lockert nicht nur den Text auf, sondern bietet dem Leser zusätzliche Information, bzw. veranschaulicht das behandelte Thema.

Suchmaschinen mögen gut aufbereitete Texte

Suchmaschinen sind stets bemüht ihren Nutzern qualitativ hochwertige Seiten zu präsentieren. Deshalb bewerten diese unter Anderem auch die Aufbereitung von Texten,

Fähre C.T.M.A. VACANCIER: Ein vom Text umflossenes Bild lockert nicht nur das Erscheinungsbild auf, auch die Suchmaschine freut es!

wobei das eine oder andere Bild garantiert nicht schaden kann.
Mit CSS ist es kein Problem einen dezenten Rahmen um das Bild zu legen und im Idealfall sogar noch eine Bildbeschreibung hinzuzufügen.
Ein weiteres gern gesehenes Feature sind anklickbare Vorschaubilder, die erst beim anklicken in voller Auflösung gezeigt werden. Dies spart nicht nur Ladezeit und bietet Ihren Besuchern den angenehmen Effekt, daß das große Bild nur geladen wird wenn es für den Leser von Interesse ist. Auch der Suchmaschinenroboter erkennt daß Sie sich hier Mühe gegeben haben und wird diesen Pluspunkt entsprechend honorieren.

Bilder mit <figure> und <figcaption> einbinden

Eine sehr sinnvolle Möglichkeit Bilder in Texte einzubinden ist die Nutzung von <figure> und <figcaption>. So wurde beispielsweise das Bild oben (das Schiff C.T.M.A. VACANCIER) genau auf diese Weise in den Text eingefügt.
Dies ermöglicht Ihnen auf sehr einfache Weise einen ansprechenden Rahmen um das Bild zu legen. Viel wichtiger im Bezug auf Suchmaschinenoptimierung jedoch, die Bildbeschreibung welche im <figcaption> steht.

Hier der HTML-code zu obigem Beispiel:

... der beschreibende Text...

</small>

</figcaption>

</figure>

Erklärung:
Rot: Das <figure> Tag zu Beginn legt über style="..." das CSS und somit das Aussehen und den Abstand des Rahmens zum Bild fest. Ganz wichtig ist hier die Angabe float (left oder right), damit der Text um das Bild fließen kann! Direkt danach folgt der Aufruf des Bildes wie gewohnt.
Blau: Das <figcaption> Tag leutet die Bildbeschreibung ein.
Grün: Mit <small style="...."> wird lediglich noch der beschreibende Text formatiert.

So erkennt nicht nur Ihr Besucher sofort worum es sich handelt, sonder auch die Suchmaschine erkennt dies auf Anhieb.
Ein weiterer Tipp in dieser Sache: Benennen Sie Ihre Bilder mit aussagekräftigen Dateinamen. Auch dies hilft der Suchmaschine bei der Indexierung. In obigem Beispiel wäre zum Beispiel "faehre-vacancier-kanada.jpg" ein sinnvoller Dateiname gewesen.

Generell zu Bilder im Internet

Web 2.0 und unsere moderne Medienwelt machen jeden zum Mediengestalter. Überall finden wir Bilder im Netz, sehr oft allerdings stehen Bilder "alleine" da und niemand weiß worum es im Grunde geht. Machen Sie sich diesen Missstand zum Vorteil und heben sich von der breiten Masse ab, indem Sie Ihre Bilder in Ihre Texte integrieren.
Sie tun nicht nur Ihren Lesern einen Gefallen, sondern auch der Suchmaschine und damit letztendlich auch sich selbst!

	Firestone, 06. Feb. 2015
	Cool erklärt... danke, hat mich weiter gebracht ;-)

	mouse, 06. Dec. 2016
	Super Seite! Sehr verständlich erklärt, danke für die Tipps!!

	Kaeserolli, 13. Jan. 2017
	Wieder etwas dazu gelernt, in Zukunft werde ich so arbeiten, auch wenn es etwas länger dauert.

Hier können Sie einen Kommentar bzw. Ihre Meinung hinterlassen:
Ihr Name: