Der head im Detail: Metadaten & SEO

Das lernst du in dieser Lektion

Du kennst die richtige Reihenfolge im head und weißt, warum charset in die ersten 1024 Bytes gehört.
Du schreibst title und meta description so, dass deine Seite im Suchergebnis geklickt wird.
Du setzt canonical und meta robots gezielt ein und kennst den Unterschied zur robots.txt.
Du machst Links mit Open Graph und Twitter Cards vorschautauglich.
Du kennst das moderne Favicon-Minimalset und weißt, welche Metadaten du getrost weglässt.

Die wichtigsten Zeilen deiner Webseite bekommt kein Besucher je direkt zu sehen. Was im <head> steht, entscheidet trotzdem mit darüber, ob deine Seite bei Google geklickt wird, wie ihr Link in WhatsApp oder LinkedIn aussieht und ob der Browser deine Umlaute korrekt darstellt. Die Grundlagen kennst du längst – in dieser Lektion nimmst du den <head> professionell auseinander: Element für Element, mit klaren Regeln und Begründungen statt SEO-Mythen.

Reihenfolge ist keine Geschmacksfrage

Der Browser liest deine HTML-Datei als rohen Bytestrom von oben nach unten. Um aus Bytes Buchstaben zu machen, muss er die Zeichenkodierung kennen – und genau hier zieht der HTML-Standard eine harte Grenze: Die Angabe <meta charset="utf-8"> muss innerhalb der ersten 1024 Bytes der Datei stehen, denn weiter schaut der Browser beim Vorab-Scan nicht. Findet er sie dort nicht, muss er raten – und wenn er falsch rät, werden aus „für“ und „größer“ kryptische Zeichensalate, oder das Dokument muss teuer neu geparst werden.

Daraus ergibt sich eine bewährte Grundreihenfolge: charset als allererstes Element, direkt danach der viewport (er beeinflusst, wie die Seite überhaupt gerendert wird), dann der title. Alles Weitere – description, canonical, Open Graph, Favicons, Stylesheets – folgt dahinter.

Die bewährte Grundreihenfolge im head

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sauerteigbrot backen – die komplette Anleitung | Brotliebe</title>
  <meta name="description" content="Schritt für Schritt zum ersten Sauerteigbrot: Ansatz züchten, kneten, backen – mit Zeitplan und Rezept als PDF.">
  <!-- danach: canonical, Open Graph, Favicons, CSS -->
</head>
<body>
  …
</body>
</html>

title und description: dein Auftritt im Suchergebnis

Kein anderes Element im head hat so viel Gewicht wie <title>. Er erscheint als Tab-Beschriftung und Lesezeichen-Name, Screenreader lesen ihn beim Seitenwechsel als Erstes vor – und vor allem ist er in aller Regel die blaue Überschrift deines Suchergebnisses. Suchmaschinen werten ihn als eines der stärksten Onpage-Signale dafür, worum es auf der Seite geht. Daraus folgt eine klare Strategie:

50–60 Zeichen: Google schneidet Titel nicht nach Zeichen, sondern nach Pixelbreite ab (rund 600 Pixel). Mit 50–60 Zeichen bist du praktisch immer auf der sicheren Seite.
Das Wichtigste nach vorn: Der Kernbegriff der Seite gehört an den Anfang – dort fällt der Blick zuerst hin, und dort übersteht er jede Kürzung.
Marke ans Ende: Der Site-Name kommt hinter einen Trenner („|“ oder „–“) ganz nach hinten. Deine Marke kennt Google ohnehin – gesucht wird der Inhalt.
Jede Seite einzigartig: Zwei Seiten mit demselben title konkurrieren gegeneinander und verwirren Nutzer wie Crawler.

title-Strategie: vorher / nachher

<!-- Schwach: Marke vorn, nichtssagend, viel zu lang -->
<title>Brotliebe GmbH – Willkommen auf unserer Homepage – Brot, Backen, Rezepte und vieles mehr</title>

<!-- Stark: Kernbegriff vorn, konkret, Marke hinten (56 Zeichen) -->
<title>Sauerteigbrot backen: Anleitung für Anfänger | Brotliebe</title>

Hartnäckiger Mythos, klare Faktenlage: Die meta description ist kein Ranking-Faktor – das hat Google mehrfach bestätigt. Warum sie trotzdem auf jede wichtige Seite gehört? Weil sie der graue Text unter dem blauen Link ist: dein kostenloser Anzeigentext. Eine gute Description erhöht die Klickrate – und mehr Klicks bei gleicher Position sind am Ende doch ein Gewinn.

Die Handwerksregeln: 150–160 Zeichen, damit nichts abgeschnitten wird; die Suchintention aufgreifen („Schritt für Schritt“, „mit Checkliste“); einen konkreten Mehrwert versprechen; aktive Sprache. Und sei nicht gekränkt, wenn Google deinen Text ignoriert: Passt die Description nicht zur Suchanfrage, baut sich Google das Snippet aus Seitenfragmenten selbst zusammen. Eine gut geschriebene Description wird aber deutlich häufiger übernommen als gar keine.

viewport im Detail

Warum braucht jede Seite <meta name="viewport" content="width=device-width, initial-scale=1">? Die Antwort ist ein Stück Web-Geschichte: Als 2007 das erste iPhone erschien, gab es praktisch nur Desktop-Seiten. Mobile Browser rendern unbekannte Seiten deshalb bis heute auf einer virtuellen Breite von rund 980 Pixeln und zoomen das Ergebnis winzig klein heraus. Erst die viewport-Angabe sagt: „Diese Seite kann mit echten Gerätebreiten umgehen“ – width=device-width setzt die Layoutbreite auf die tatsächliche Displaybreite, initial-scale=1 startet ohne Zoomfaktor.

Was du dort niemals hineinschreiben solltest: user-scalable=no oder maximum-scale=1. Damit sperrst du das Zoomen – für Menschen mit Sehbeeinträchtigung eine echte Barriere und ein klarer Verstoß gegen die Barrierefreiheits-Richtlinien. Moderne Browser ignorieren die Sperre aus genau diesem Grund teilweise; schreibe sie trotzdem gar nicht erst hin.

Zeit zum Anfassen. Weil es in dieser Lektion um den <head> geht, zeigt der Editor ausnahmsweise ein komplettes Dokument statt nur Body-Inhalt. Eines wirst du dabei bemerken: Der title taucht in der Vorschau nirgends auf – sie ist ein eingebetteter Rahmen ohne eigenen Browser-Tab. Genau das ist die Lektion im Kleinen: Metadaten wirken unsichtbar. Ändere title und description, ergänze eigene Metadaten und präge dir die Reihenfolge ein.

Probier es ausÄndere den Code – die Vorschau aktualisiert sich sofort.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Backkurs: Sauerteig für Einsteiger | Brotliebe</title>
  <meta name="description" content="Lerne in 7 Tagen, dein erstes Sauerteigbrot zu backen – mit Anleitung, Zeitplan und Rezept zum Ausdrucken.">
  <link rel="canonical" href="https://www.brotliebe.example/sauerteig-kurs">
  <meta name="theme-color" content="#8b5a2b">
</head>
<body>
  <h1>Sauerteig für Einsteiger</h1>
  <p>Alles Entscheidende dieser Seite steht oben im head –
  sichtbar ist davon hier unten nichts.</p>
</body>
</html>

canonical und meta robots: Regie führen

Ein und derselbe Inhalt ist oft unter mehreren URLs erreichbar: mit und ohne www, mit Tracking-Parametern wie ?utm_source=newsletter, als Druckversion. Für Suchmaschinen sind das getrennte Seiten mit identischem Inhalt – sogenannter Duplicate Content. Die Folge ist keine „Strafe“, aber ein Verwässern: Links und Signale verteilen sich auf mehrere Varianten. Mit <link rel="canonical" href="…"> benennst du die bevorzugte Adresse, auf die alle Varianten einzahlen sollen. Gute Praxis ist, dass jede Seite auf ihre eigene saubere URL zeigt – das sogenannte selbstreferenzierende canonical.

Mit <meta name="robots"> steuerst du die Indexierung einzelner Seiten: noindex („nimm diese Seite nicht in den Suchindex auf“ – etwa für interne Suchergebnisse oder Danke-Seiten) und nofollow („folge den Links auf dieser Seite nicht“). Der Standardwert index, follow muss nie explizit gesetzt werden.

Wichtig ist die Abgrenzung zur robots.txt: Diese Datei im Stammverzeichnis regelt das Crawling – also ob ein Bot die Seite überhaupt abrufen darf –, nicht die Indexierung. Eine per robots.txt gesperrte URL kann trotzdem im Index landen, wenn andere Seiten auf sie verlinken; sie erscheint dann als nacktes Suchergebnis ohne Beschreibung.

canonical und robots in der Praxis

<!-- Diese Seite ist die maßgebliche Version ihrer selbst -->
<link rel="canonical" href="https://www.brotliebe.example/sauerteig-kurs">

<!-- Interne Suchergebnisseite: nicht in den Google-Index -->
<meta name="robots" content="noindex">

Open Graph und Twitter Cards: die Link-Vorschau

Teilst du einen Link in WhatsApp, LinkedIn, Slack, Discord oder Mastodon, baut der Dienst eine Vorschaukarte – und die Daten dafür holt er sich aus den Open-Graph-Metadaten (einst von Facebook eingeführt, heute Quasi-Standard). Ohne sie greift sich der Dienst irgendein Bild und irgendeinen Text – mit ihnen bestimmst du selbst, wie dein Link aussieht. Vier Angaben genügen fast immer:

Property	Inhalt	Praxis-Tipp
`og:title`	Überschrift der Vorschaukarte	Darf werblicher und etwas länger sein als der `title`.
`og:description`	Text unter der Überschrift	Oft identisch mit der meta description – das ist völlig okay.
`og:image`	Vorschaubild	Empfohlen 1200 × 630 Pixel; immer eine absolute URL angeben, relative Pfade werden häufig ignoriert.
`og:type`	Art des Inhalts	Meist `website`, für Blogbeiträge `article`.

Und Twitter beziehungsweise X? Die Plattform liest ersatzweise die Open-Graph-Werte – du brauchst in der Regel nur eine einzige Zusatzzeile, die das große Vorschaubild-Format anfordert: <meta name="twitter:card" content="summary_large_image">.

Komplettes Vorschau-Setup

<meta property="og:title" content="Sauerteigbrot backen: die komplette Anleitung">
<meta property="og:description" content="Vom ersten Ansatz bis zur knusprigen Kruste – Schritt für Schritt erklärt.">
<meta property="og:image" content="https://www.brotliebe.example/img/vorschau-sauerteig.jpg">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">

Favicons heute, theme-color und ein Blick auf hreflang

Jahrelang wucherten Favicon-Anleitungen mit Dutzenden PNG-Größen für jedes erdenkliche Gerät. Dieser Wildwuchs ist vorbei – heute genügen zwei Dateien: ein SVG-Favicon, das verlustfrei in jeder Größe skaliert (und per eingebettetem Media Query sogar auf den Dark Mode reagieren kann), und ein apple-touch-icon als PNG in 180 × 180 Pixeln für den Homebildschirm von iPhones und iPads. Eine klassische favicon.ico im Stammverzeichnis schadet als Fallback für ältere Software nicht – viele Programme fragen den Pfad /favicon.ico ohnehin automatisch an.

Das Favicon-Minimalset von heute

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#0f766e">

Die dritte Zeile im Beispiel, theme-color, färbt die Browseroberfläche passend zu deiner Marke ein – etwa die Adressleiste in mobilen Browsern oder den Fensterrahmen installierter Web-Apps. Ein kleines Detail mit großer Wirkung auf den ersten Eindruck.

Zum Schluss ein Ausblick für mehrsprachige Projekte: Mit <link rel="alternate" hreflang="en" href="…"> teilst du Suchmaschinen mit, dass es dieselbe Seite auch auf Englisch gibt. Jede Sprachversion listet dabei alle Versionen auf – sich selbst eingeschlossen – plus ein hreflang="x-default" als Auffangadresse für alle übrigen Sprachen. Betreibst du nur deutschsprachige Seiten, brauchst du hreflang schlicht nicht.

Anti-Patterns: Was du getrost weglässt

Mindestens so wichtig wie das richtige Setzen von Metadaten ist das Weglassen der falschen. In alten Tutorials und Vorlagen geistern Elemente herum, die seit Jahren nichts mehr bewirken:

<meta name="keywords"> ist seit 2009 offiziell tot: Google hat damals bestätigt, das Feld komplett zu ignorieren – es wurde schlicht zu oft mit Spam gefüllt. Wer es heute pflegt, verrät der Konkurrenz höchstens die eigene Keyword-Strategie.
<meta name="author"> wird von keiner Suchmaschine ausgewertet. Autorenschaft gehört sichtbar auf die Seite, nicht unsichtbar in den head.
<meta name="revisit-after"> war nie ein Standard – kein Crawler der Welt richtet seinen Besuchsrhythmus danach.
Der generator-Eintrag („erstellt mit CMS X in Version Y“) hilft vor allem Angreifern bei der Suche nach verwundbaren Installationen – weglassen oder entfernen.
Endlose Favicon-Listen mit fünfzehn PNG-Größen: durch das SVG-Minimalset erledigt.

Zusammenfassung

<meta charset="utf-8"> gehört in die ersten 1024 Bytes – bewährte Reihenfolge: charset → viewport → title.
Der title ist das wichtigste SEO-Element: 50–60 Zeichen, Kernbegriff vorn, Marke hinten, jede Seite einzigartig.
Die meta description rankt nicht, verkauft aber: 150–160 Zeichen Anzeigentext für die Klickrate.
canonical bündelt Duplicate Content auf eine Wunsch-URL; noindex wirkt nur, wenn die Seite crawlbar bleibt – robots.txt regelt Crawling, nicht Indexierung.
Open Graph plus eine twitter:card-Zeile machen Links vorschautauglich; als Favicon genügen SVG + apple-touch-icon.
meta keywords, meta author und revisit-after kannst du ersatzlos streichen.

Der unsichtbare Teil deiner Seite sitzt – in der nächsten Lektion geht es um Menschen: „Barrierefreies HTML & ARIA“ zeigt dir, wie deine Seiten für alle bedienbar werden, von Screenreader-Nutzern bis zu Tastatur-Profis – und warum gutes HTML dabei schon 80 Prozent der Arbeit erledigt.

Weiter: Barrierefreies HTML & ARIA →