Kodokon kodokon.com

Deine Seite fürs Web startklar machen

Feile am head deiner Seite: title, description, favicon und sichere externe Links.

9 Min. · 3 Fragen

Diese Lektion in Kodokon öffnen

Noch bevor Leute deine Seite besuchen, sehen sie sie anderswo: in einem Browser-Tab, in Suchergebnissen, in einem geteilten Link. All das passiert im head. Ein sorgfältig gestalteter head ist der Unterschied zwischen einer Amateurseite und einer professionellen.

HTML
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Quick Recipes | Lea's Kitchen</title>
  <meta
    name="description"
    content="30 recipes ready in 20 minutes flat,
             tested by our readers."
  >
</head>
Der minimale head einer Seite, die startklar für den Livegang ist.

Der title erscheint im Tab, in den Lesezeichen und in den Suchergebnissen: Mach ihn pro Seite einzigartig, beschreibend, mit dem Thema zuerst und rund 60 Zeichen lang. Die meta description ist der Text, der in Suchmaschinen unter dem Titel gezeigt wird: Ziele auf 150 Zeichen ab, die zum Klicken einladen.

Das Favicon ist das kleine Symbol, das im Tab und in den Lesezeichen erscheint. Die moderne Praxis: ein favicon.ico als Rückfalloption im Stammverzeichnis der Website, eine SVG-Version, die in jeder Größe scharf bleibt, und ein eigenes Symbol für Apple-Startbildschirme.

HTML
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-icon.png">
Drei Deklarationen, um jeden Kontext abzudecken.

Ein letzter Profi-Reflex: externe Links. Öffnest du einen Link in einem neuen Tab mit target="_blank", erhält die geöffnete Seite potenziell Zugriff auf window.opener und damit auf deine Seite. Füge rel="noopener noreferrer" hinzu, um diese Verbindung zu kappen und zu verhindern, dass die verweisende Adresse weitergegeben wird.

HTML
<a
  href="https://developer.mozilla.org"
  target="_blank"
  rel="noopener noreferrer"
>
  MDN documentation (new tab)
</a>
Ein externer Link, in einem neuen Tab geöffnet, abgesichert.

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

  1. Welche Rolle hat die meta description?
    • Das Ranking der Seite in Suchmaschinen direkt verbessern
    • Den Text bereitstellen, der in den Suchergebnissen unter dem Titel angezeigt wird
    • Die Hauptsprache des Dokuments festlegen
  2. Warum rel="noopener" zu einem Link mit target="_blank" hinzufügen?
    • Um zu verhindern, dass die geöffnete Seite über window.opener auf deine Seite zugreift
    • Um den Link zu zwingen, im selben Tab zu öffnen
    • Um das Laden der Zielseite zu beschleunigen
    • Um den Link vor Suchmaschinen zu verbergen
  3. Was macht einen guten Seitentitel aus?
    • Auf jeder Seite identisch, um die Marke zu stärken
    • So lang wie möglich, um so viele Schlüsselwörter wie möglich unterzubringen
    • Pro Seite einzigartig, beschreibend, mit dem Thema zuerst und rund 60 Zeichen lang