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 15.07.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

Die 3 besten kostenlosen Online Sitemap GeneratorenMethoden und Ansätze für kreative und relevante Ideen um Content zu generieren5 Tipps für eine perfekte Seo-optimierte Url-Struktur deiner WebsiteWebsites sollten regelmäßig mit einem SEO-Check-Tool wie dem SEO-Check-Tool von famecontent überprüft werdenWas darf ein Artikellink kosten? Günstig starkes Linkbuilding betreibenSo baust du deine Website richtig auf (HTML)So wichtig ist der Header deiner WebsiteWas ist Instagram und passt es zu mir?Mit diesen 5 einfachen Schritten verbesserst du den header deiner Website 9 Tipps für die perfekte CSS-Datei
SEO
  • Header tags
  • Texte schreiben
  • Bilder formatieren
  • Linkaufbar