Hey! Ich weiß, es ist nicht immer einfach mehr Besucher & Kunden zu generieren und ich hatte die gleichen Probleme! Wenn du bereit bist zu checken, ob du Hilfe von mir erhalten kannst, dann bewirb dich jetzt auf deinen Strategie-Call.
HTML ist die Programmiersprache, mit welcher Webseiten geschrieben werden.
Meistens ist es jedoch untypisch eine Webseite selbst von null mit HTML selbst zu bauen, denn dafür gibt es heutzutage Webseiten-Builder wie Chimpify, welche einem diese Arbeit abnehmen, damit man sich mehr auf die kreative Komponente fokussieren kann.
Inhalt
HTML & SEO: Wie ist der Zusammenhang?
Oftmals kommt die Frage auf, wie HTML und SEO miteinander hängt.
Im Prinzip ist es aus einer SEO-Perspektive nur wichtig, dass die Inhalte gut gelesen werden können und der HTML-Code simple und korrekt ist.
Es gibt immer wieder hitzige Diskussionen, wie der HTML-Code strukturiert sein muss und ob Builder wie Elementor SEO schwerer machen.
Es geht aber hauptsächlich um das Nutzererlebnis behauptet Google selbst. Wie der Code hinter der Webseite aussieht, ist deshalb zweitrangig oder sogar irrelevant.
Google misst Nutzerdaten wie Lesedauer, Bounce Rate (umstritten aber wahrscheinlich) oder auch soziale Teilungen.
Zusammenfassend: Ja, der HTML muss sauber sein und eine Webseite voller Programmierfehler wird nicht gut bei Google ranken, aber das Erlebnis dieses Codes also UX (Nutzererlebnis) ist vorrangig.
HTML Basics
<HTML>
Jedes HTML-Skript fängt gleich an mit dem "<!DOCTYPE html><html>" ganz oben und ganz unten das "</html>".
Dazwischen findet die ganze Magie statt.
Das DOCTYPE erklärt die Art des Dokuments und zwischen den beiden htmls darf dann HTML-Code angewandt werden.
<Head>
Danach kommt immer zuerst der sogenannte Head, welcher wie folgt aussieht:
"<head> INHALT des Heads </head>"
Innerhalb dieses Heads gibt es verschiedene Sachen, welche eingefügt werden:
- Der Titel (PFLICHT) "<title> TITEL DER WEBSEITE </title>"
- Meta Beschreibung "<meta> BESCHREIBUNG FÜR GOOGLE max. 160 Zeichen </meta>"
- Javascript "<script> Etwas komplexere Programmierungen </script>"
- Das CSS-File verlinken "<link rel="stylesheet" type="text/css" href="styles.css">"
Die Großbuchstaben sind übrigens nicht notwendig!
Die Meta-Beschreibung und der Titel sollten beide dein Keyword enthalten, damit Google dich besser einordnen kann.
<Body>
Erst im Body geht es dann richtig los und man beginnt mit dem tatsächlichen Webseiteninhalt.
Der Titel und die Beschreibung vom Head sind gar nicht sichtbar für die Leser der Webseite, sondern rein für die Suchmaschinen.
In der Regel eröffnet man den Body mit der H1-Überschrift.
Das sieht dann so aus: "<h1>Deine tolle Überschrift der Webseite</h1>"
Diese Überschrift sollte in jedem Fall dein exaktes Keyword enthalten.
Danach kommt vermutlich eine Einleitung von dir, bis es dann mit dem echten Inhalt losgeht, bei welchem du aber nur noch die "<h2>Überschrift</h2>" verwendest, denn die H1-Überschrift darf es nur einmal pro Seite geben.
<div> Sektion
Das Div-Element ist eine Sektion. Eine Art sinnvolle Unterteilung deines Inhalts. Du kannst ein Div auch verwenden, um den Hintergrund eines Elements zu ändern. Das mache ich übrigens hier auch:
Das ist ein Div-Element, welches ich mit CSS gestylt habe, um einen schönen Kontrast zu erzeugen.
<p> Paragraph
Innerhalb des Bodys und der Divs sind die ganz normalen Textabschnitte, welche in HTML mit einem "<p>" eingeleitet werden für das englische Paragraph.
Nach so einem Paragraph schließt man diesen wieder mit "</p>", sonst ist der Code invalide und funktioniert nicht.
<b> <i> Fett, Kursiv und Unterstrichen
Innerhalb des Paragraph kann ich Dinge fett markieren mit dem "<b>Dieser Text wird fett.</b>" und auch kursiv "<i>Dieser Text wird kursiv.</i>".
Unterstreichen kann man folgendermaßen: "<u>Dieser Text ist unterstrichen.</u>"
<br> Umbruch
Wenn man einen Absatz innerhalb eines Paragraphs oder auch danach machen möchte, dann verwendet man im HTML das "<br>", welches sich von dem englischen Break ableiten lässt.
<ul> <li> Liste
Eine Liste wie zum Beispiel diese hier:
- Das
- ist
- eine
- Liste
Erstellt man in HTML folgendermaßen.
Man beginnt mit dem "<ul>" und schließt auch am Ende mit dem "</ul>". Das erklärt also den Anfang und das Ende der Liste.
Dazwischen fügt man einzelne Listen-Elemente mit dem "<li>" ein.
Die fertige Liste von oben sieht dann so aus:
"<ul>
<li>Das</li>
<li>ist</li>
<li>eine</li>
<li>Liste</li>
</ul>"
<id>
Jedem Element von HTML kann eine class und eine ID zugeordnet werden.
Die class definiert die Art und Weise und die ID gibt einfach einen bestimmten Namen.
Die ID wird häufig auch verwendet, um Verlinkungen auf derselben Webseite zu realisieren.
Wenn man zum Beispiel am Anfang eines Artikels zum Fazit verweisen möchte, dann kann man das mit der ID-Funktion realisieren.
- Zuerst muss man das Element dafür festlegen, zu welchem verwiesen werden soll. Nehmen wir als Beispiel die letzte Überschrift eines Artikels, welche "Fazit" lautet.
- Im HTML-Code sieht diese Überschrift dann wie folgt aus: "<h2>Fazit</h2>"
- Nun fügt man einfach eine id hinzu: "<h2 id="Link">Fazit</h2>"
- Schon kann man dazu verlinken mit einem # davor. Wenn ich also oben zum Fazit verlinken möchte, dann verlinke ich einfach #Link und man springt beim Klicken dieses Links nach ganz unten zu dieser Überschrift.
Merke: Wenn man von einer anderen Seite direkt zum Fazit dieses Artikels verlinken möchte, dann muss man noch die URL davor hinzufügen.
https://beispiel.de/artikel/#Link
Diese Ids sollte man aus SEO-Sicht bei allen wichtigen Überschriften hinterlegen aus 2 Gründen:
- Google vergibt eventuell das Rich Snippet "Site Links"
- Man kann ein Inhaltsverzeichnis oben einfügen
<Footer>
Der Footer ist das Ende der Webseite, welcher sich aber noch im Body-Tag befindet.
Der Footer ist typischerweise bei allen Webseiten gleich und man findet dort den Datenschutz, das Impressum und die AGBs und weitere wichtige Links, welche auf jeder Seite vorhanden sein sollten.
So einen Footer selbst zu erstellen in HTML ist etwas aufwändig und dafür empfehle ich einen Webseiten-Builder zu verwenden wie Chimpify (mein Favorit).
Wer tiefer in die Materie einsteigen möchte, der sollte unbedingt bei W3School (Englisch) oder bei WikiSelf (Deutsch) vorbeischauen.
Wenn du einen kompletten HTML Einführungskurs möchtest, dann empfehle ich dir auf GoSkills vorbeizuschauen, dort gibt es Kurse für HTML, CSS und Javascript.
JavaScript
JavaScript ist die Programmiersprache, welche für komplizierte Aufgaben und Software auf eine Webseite verwendet wird.
Mit HTML kann man wirklich nicht groß Dinge programmieren, sondern es ist eher die Sprache, um Inhalte darzustellen.
JavaScript hingegen ist eine volle Programmiersprache mit allem Drum und Dran. (Nicht zu verwechseln mit Java).
Damit kann man also komplette Web-Apps entwickeln und komplexe Software, welche auf Webseiten läuft.
Als Blogger kommt man an dieser Sprache nicht sonderlich oft vorbei. Außer bei den strukturierten Daten. Das ist aber wirklich sehr einfach.
Wenn du einen kompletenn Kurs zum Thema JavaScript belegen möchtest, dann schau hier vorbei.
Was denkst du?