Texte und Bilder in die Website implementieren (HTML)
Online-Marketing Content SEO Marktplatz SEO-CHECK

Texte und Bilder in die Website implementieren (HTML)

Bilder und Texte gehören zum Content der gesamten Website.

Erstellt/geändert am 14.04.2024

[Learning HTML] - Teil 3 - Der Content deiner Website besteht aus Texten und Bildern. Hier lernst du, wie man beides in eine Website einbindet und diese für die Suchmaschine optimierst.

Eine gute Website besteht aus guten Texten und passenden Bildern. Mit guten Texten sind thematisch passende und ausreichend ausformulierte Texte, die durch ihre Aussagekraft und Wortwahl den Leser in den Bann ziehen und zum Weiterlesen animieren. Wenn man dazu noch passende Bilder präsentiert, ist der Content deiner Seite schon fast unschlagbar. Doch wie genau bindet man Text und Bilder in den HTML-Quellcode ein und wie optimiert man dies für die Suchmaschine? Wir verraten dir hier, wie du deinen Content nicht nur optisch ansprechend deinen Lesern präsentierst, vielmehr auch für die Suchmaschinen optimierst.

Pack mal alles in Container

Der Inhalt einer Website muss irgendwie strukturiert und platziert werden. Dies geschieht durch sogenannte <div>-Container, welche mittels CSS (Cascade Style Sheet) optisch platziert und grafisch aufbereitet wird. Der DIV-Container wird vom englischen Wort division abgeleitet und bedeutet soviel wie „Bereich“ oder „Abteilung“. In diesen Container wird alles hineingepackt, was Content für die Website bedeutet.

Texte

Wenn man Produkte ordentlich erklären möchte und Leser durch spannende und interessante Informationen so lange wie möglich auf der Website halten will, benötigt man perfekte Texte.

<p> Textabsatz

Das p-Tag steht im englischem für paragraph

<p> Beispiel

<p> In diesem Bereich wird der Textcontent stehen. Du kannst den ganzen Text auch in verschiedenen Bereiche aufteilen und jeweils mit einem p-Tag abgrenzen, genau so, wie in diesem Beispiel. </p>

Bilder

Bilder werden auf einer Website mittels dem <img>-Tag eingefügt und können dann direkt oder mit CSS angepasst werden. Auch hierbei sind einige Dinge zu beachten, weil Suchmaschinen die Bilder sonst nicht richtig erkennen und die Seite als fehlerhaft abstufen würden.

<img src="[Pfad zum Bild]" alt="[1]" title="[2]" width="[3]" height="[4]"/>

[1] alt Hier kommt eine sehr kurze Beschreibung hin, was das Bild zeigt, wie beispielsweise "Eiche im Schweizer Wald". Falls das Bild nicht geladen werden kann, erscheit dieser Text als alternative. Diese Eingabe ist Pflicht.

[2] title Der Titel des Bildes kann ähnlich oder gleich dem alt sein und bietet lediglich etwas mehr Infos für eine Suchmaschine.

[3] width Diese Eingabe kann u.a. sowohl in Pixel als auch in Prozent angegeben werden, wie beispielsweise width="100" (Pixel) oder width="100%" (Prozent). Ein Bild kann auch per CSS angepasst werden.

[4] height Diese Eingabe kann u.a. sowohl in Pixel als auch in Prozent angegeben werden, wie beispielsweise height ="100" (Pixel) oder height ="100%" (Prozent). Ein Bild kann auch per CSS angepasst werden.

Bilder sollten von den Abmaßen her so klein wie möglich und so groß wie nötig gehalten werden. Bedenke die minimalen Abmaße eines Bildes vorher, damit der Server nicht zuviel Daten laden muss. Hast du die perfekte Größe ermittelt und das Bild z.B. mit dem Programm Gimp 2 dahingehend bearbeitet hast, kannst du das Bild noch mit tinypng optimieren.

Mehr Artikel und Infos

HTML Grundkurs für deine eigene WebsiteDie CTR Click-Through-Rate hat eine enorme Bedeutung im SEO für Websites und muss ständig optimiert werdenDie 3 besten kostenlosen Online Sitemap GeneratorenSEO Begriffe erklärtSo baust du deine Website richtig auf (HTML)Mit diesen 5 einfachen Schritten verbesserst du den header deiner Website So wichtig ist der Header deiner WebsiteMethoden und Ansätze für kreative und relevante Ideen um Content zu generierenBacklinks von anderen Websites erhaltenWofür brauche ich Links auf meine Website
SEO
  • Header tags
  • Texte schreiben
  • Bilder formatieren
  • Linkaufbar