Braucht man den Doctype noch?

Ja. Ohne ihn schaltet der Browser in einen Kompatibilitätsmodus, der Abstände und Größen anders berechnet als jeder moderne Standard. Es ist eine Zeile, und sie erspart schwer auffindbare Layoutfehler.

Wie lang darf ein Title sein?

Google schneidet in den Suchergebnissen nach ungefähr 580 Pixel Breite ab, das entspricht grob 55 bis 60 Zeichen. Ein längerer Title ist kein Fehler, aber der wichtige Teil sollte vorne stehen. Umgekehrt gilt: Zu kurz verschenkt Fläche.

Ist die Meta-Description ein Rankingfaktor?

Nein, das hat Google mehrfach bestätigt. Sie beeinflusst aber, ob jemand auf Ihren Treffer klickt, und ist damit indirekt wertvoll. Google ersetzt sie außerdem häufig durch einen Textausschnitt der Seite, wenn dieser besser zur Suchanfrage passt.

Was ist ein Canonical und wann brauche ich es?

Ein Canonical sagt der Suchmaschine, welche Adresse die maßgebliche ist, wenn derselbe Inhalt unter mehreren erreichbar ist – etwa mit und ohne www, mit und ohne Parameter. Am einfachsten setzt jede Seite ein Canonical auf sich selbst, in exakt der Schreibweise, die der Server ausliefert.

HTML-Grundgerüst: der Kopfbereich, den jede Seite braucht

Jede HTML-Seite beginnt mit denselben zwölf bis fünfzehn Zeilen. Sie sind schnell abgeschrieben und werden deshalb selten verstanden – dabei entscheidet dieser Block darüber, ob die Seite auf dem Handy richtig aussieht, wie sie in der Suche erscheint und was beim Teilen eines Links angezeigt wird.

Das Gerüst

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Seitentitel – Name der Website</title>
  <meta name="description" content="Ein Satz, der beschreibt, was auf dieser Seite steht.">
  <link rel="canonical" href="https://www.beispiel.de/seite/">

  <meta property="og:title" content="Seitentitel">
  <meta property="og:description" content="Derselbe Satz, ggf. etwas anders.">
  <meta property="og:image" content="https://www.beispiel.de/bilder/vorschau.jpg">
  <meta property="og:url" content="https://www.beispiel.de/seite/">
  <meta property="og:type" content="website">

  <link rel="icon" href="/favicon.ico" sizes="any">
</head>
<body>
  <!-- Inhalt -->
</body>
</html>

Zeile für Zeile

`<!doctype html>`

Sagt dem Browser: Das ist HTML5, rechne nach den aktuellen Regeln. Fehlt die Zeile, schaltet der Browser in einen Modus, der Abstände und Boxgrößen anders berechnet – die Ursache für Layoutfehler, die man stundenlang an der falschen Stelle sucht.

`<html lang="de">`

Die Sprachangabe. Screenreader wählen danach die Aussprache aus – ein englischer Screenreader liest deutschen Text ohne diese Angabe unverständlich vor. Browser entscheiden anhand der Angabe außerdem über Silbentrennung und Anführungszeichen, und Suchmaschinen nutzen sie als Signal.

`<meta charset="utf-8">`

Der Zeichensatz. Ohne ihn werden Umlaute zu Zeichensalat. Die Angabe muss innerhalb der ersten 1024 Bytes stehen, deshalb kommt sie ganz nach vorn.

`<meta name="viewport" ...>`

Ohne diese Zeile tut ein Handy so, als wäre es ein Desktop-Bildschirm, und zeigt die Seite verkleinert an. Jedes responsive Layout hängt daran. Setzen Sie kein maximum-scale=1 oder user-scalable=no – das verhindert das Vergrößern und ist für Menschen mit eingeschränkter Sehkraft ein ernstes Problem.

`<title>`

Erscheint im Browser-Tab, im Lesezeichen und als Überschrift des Suchtreffers. Die brauchbare Form ist konkret zuerst, Marke hinten:

Gut: Bilder komprimieren ohne Upload – websitefun.de
Schlecht: Startseite | Willkommen | Firma XY GmbH

Jede Seite braucht einen eigenen Title. Doppelte Titles sind einer der häufigsten Befunde in jedem SEO-Audit.

`<meta name="description">`

Kein Rankingfaktor, aber der Text, den Google unter dem Treffer anzeigt – wenn er zur Suchanfrage passt. Ein Satz, der beschreibt, was die Seite liefert, in 120 bis 160 Zeichen. Keine Aufzählung von Suchbegriffen.

`<link rel="canonical">`

Sagt, welche Adresse für diesen Inhalt gilt. Nötig wird das, sobald dieselbe Seite unter mehreren Adressen erreichbar ist: mit und ohne www, mit und ohne abschließenden Schrägstrich, mit angehängten Parametern aus einer Kampagne.

Der Fallstrick: Das Canonical muss auf genau die Variante zeigen, die der Server nach seinen Weiterleitungsregeln wirklich ausliefert. Wer per Weiterleitung auf www zwingt, das Canonical aber ohne www setzt, sendet zwei widersprüchliche Signale.

Die Open-Graph-Angaben

Sie bestimmen, wie ein geteilter Link in WhatsApp, LinkedIn, Facebook und Slack aussieht. Ohne sie sucht sich die jeweilige Plattform irgendein Bild von der Seite – oder zeigt gar keins.

Das Bild sollte 1200 × 630 Pixel haben. Die Adresse muss absolut sein, mit https:// und Domain; ein relativer Pfad funktioniert hier nicht. Auf das passende Maß bringt es Bilder zuschneiden mit dem voreingestellten Verhältnis 1,91 zu 1.

Das Favicon

Details dazu stehen unter Favicon richtig einbinden; erzeugen lässt es sich mit dem Favicon-Generator.

Was nicht mehr hineingehört

Aus alten Vorlagen wandern regelmäßig Zeilen mit, die nichts mehr bewirken:

<meta name="keywords"> – wird von Google seit 2009 ignoriert.
<meta name="revisit-after"> – hat nie eine Suchmaschine ausgewertet.
<meta name="author"> als SEO-Maßnahme – für die Suche ohne Wirkung.
<meta http-equiv="X-UA-Compatible"> – betraf den Internet Explorer.
Der Kommentar <!--[if lt IE 9]> – ebenso.

Sie schaden nicht, aber sie machen den Kopfbereich unübersichtlich und suggerieren eine Sorgfalt, die woanders fehlt.

Der Körper: eine Struktur, die trägt

Für den Inhaltsbereich gelten drei Regeln, die den meisten Ärger vermeiden:

Genau ein <h1> pro Seite, und zwar die Überschrift, die den Seiteninhalt benennt. Darunter <h2> und <h3> in ihrer logischen Reihenfolge, ohne Stufen zu überspringen.
Die Bereiche auszeichnen: <header>, <nav>, <main>, <footer>. Screenreader bieten darüber eine Sprungnavigation an.
Jedes Bild bekommt alt, width und height. Warum, steht unter Bilder für die Website optimieren.

Wenn die Seite steht, geht es weiter mit Website bei Google anmelden.

Das HTML-Grundgerüst