Head, Meta & SEO
Der head ist unsichtbar, entscheidet aber mit, wie deine Seite in Tabs, Suchmaschinen und sozialen Netzwerken erscheint.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Titel und Beschreibung
Der title erscheint im Browser-Tab und ist oft die erste Zeile in Suchergebnissen.
Er sollte pro Seite eindeutig und kurz sein.
meta name="description" liefert eine Zusammenfassung für Suchmaschinen und Vorschauen. Eine gute Beschreibung verspricht konkreten Inhalt, statt Keywords zu stapeln.
<head>
<title>Links & Pfade – HTML lernen | Learn-Program</title>
<meta name="description"
content="Relative Pfade, Anker und gute Linktexte verständlich erklärt.">
</head>Technische Basis: charset und viewport
meta charset="UTF-8" sollte früh im head stehen, damit Umlaute und Sonderzeichen korrekt gelesen werden.
Der viewport-Meta-Tag sorgt dafür, dass mobile Browser die Seite in der richtigen Breite darstellen. Das lang-Attribut am html-Element beschreibt die Sprache.
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meine Seite</title>
</head>
</html>Teilen und einordnen: Open Graph & canonical
Open-Graph-Tags bestimmen, wie ein Link in sozialen Netzwerken aussieht.
og:title, og:description und og:image sind die wichtigsten Bausteine.
Ein canonical-Link zeigt Suchmaschinen die bevorzugte URL, wenn derselbe Inhalt unter mehreren Adressen erreichbar ist.
<meta property="og:title" content="Links & Pfade">
<meta property="og:description" content="Pfade und Anker verständlich erklärt.">
<meta property="og:image" content="/images/links-pfade.png">
<link rel="canonical" href="https://example.com/html/links">Vertiefung
Der head ist die Visitenkarte
title und description sind keine Garantie für gute Rankings, aber sie entscheiden über den ersten Eindruck in Suchergebnissen. Formuliere den konkreten Nutzen einer Seite, nicht nur ihren Namen.
Technische Angaben wie charset und viewport verhindern Darstellungsfehler. Open Graph und canonical helfen beim Teilen und bei doppelten URLs - sie ersetzen aber keine guten Inhalte.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML-Formulare validieren | Learn-Program</title>
<meta name="description" content="Native Validierung, Fehlermeldungen und die Grenzen der Browserprüfung.">
<meta property="og:title" content="HTML-Formulare validieren">
<link rel="canonical" href="https://example.com/module/html/validation">
</head>Merksatz: Der head beschreibt die Seite für Browser, Suche und soziale Netzwerke. Halte Titel und Beschreibung pro Seite eindeutig und ehrlich.
Übungsaufgabe
SEO-Head für eine Kursseite
Schreibe einen vollständigen head für eine Kursseite über HTML-Formulare. Ergänze Titel, Beschreibung, technische Basis und eine Social-Media-Vorschau.
Das soll dein Programm können
- Eindeutiger title mit Seitenthema
- meta name="description" mit konkretem Nutzen
- charset und viewport
- Mindestens zwei Open-Graph-Tags
- canonical-Link auf die bevorzugte URL
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Orientiere dich an dieser Reihenfolge: charset, viewport, title, description, Open Graph, canonical. Die description ist ein Satz, kein Keyword-Block.
Lösung anzeigen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML-Formulare validieren | Learn-Program</title>
<meta name="description"
content="Lerne, wie du Formulare mit HTML prüfst und Fehler verständlich ausgibst.">
<meta property="og:title" content="HTML-Formulare validieren">
<meta property="og:description"
content="Native Validierung und zugängliche Fehlermeldungen.">
<meta property="og:image" content="/images/formulare.png">
<link rel="canonical" href="https://example.com/module/html/validation">
</head>
<body>
<h1>Formulare validieren</h1>
</body>
</html>Warum funktioniert das?
Der title benennt Thema und Seite. Die description fasst den Nutzen zusammen. Open Graph steuert die Vorschau beim Teilen, canonical zeigt die bevorzugte Adresse bei doppelten Inhalten.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Deine Lieblingsseite
Baue eine kleine Seite über ein Thema, das dich wirklich interessiert. Nutze die Struktur, die du in dieser Lektion gelernt hast.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.