Sprache, Favicon und Viewport

Vier Angaben, die auf keiner Seite fehlen sollten und die zusammen etwa fünf Zeilen kosten.

01 / 03Der vollständige Kopf

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linsensuppe in 30 Minuten | Mein Kochblog</title>
    <meta name="description" content="Ein Rezept, das unter der Woche klappt.">
    <link rel="icon" href="/favicon.ico" sizes="any">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  </head>
  <body>
    <h1>Linsensuppe in 30 Minuten</h1>
  </body>
</html>

lang am html. Es sagt, in welcher Sprache die Seite geschrieben ist. Screenreader wählen danach die Aussprache: Eine deutsche Seite, die als englisch ausgezeichnet ist, klingt für Betroffene wie Kauderwelsch. Außerdem entscheidet lang über die Anführungszeichen bei q, über Silbentrennung und über das Übersetzungsangebot des Browsers.

charset. Kennst du aus dem Grundgerüst in Lektion 1.3: ohne UTF-8 werden Umlaute zu Zeichensalat. Diese Zeile schreibst du als Erstes in den head, noch vor den Titel, weil der Browser wissen muss, wie er den Rest lesen soll.

viewport. Ohne diese Zeile tut das Handy so, als wäre es ein Desktop-Bildschirm: Es rendert die Seite rund 980 Pixel breit und zoomt dann heraus. Alles ist winzig und muss vergrößert werden. width=device-width sagt „nimm die echte Gerätebreite“, initial-scale=1.0 setzt die Startvergrößerung auf normal. Das ist eine Zeile, die man einmal lernt und danach immer schreibt.

Ausprobieren lässt sie sich hier allerdings nicht. Die Seite läuft in einem Rahmen innerhalb dieser Seite, und für so einen Rahmen gilt die Angabe nicht: Die Seite darin bekommt einfach die Breite des Rahmens, mit oder ohne viewport-Zeile. Auf einem echten Telefon siehst du den Unterschied sofort, und er ist drastisch.

Favicon. Das kleine Symbol im Tab und im Lesezeichen. Es kommt über link rel="icon". Im Beispiel stehen drei Zeilen: eine .ico als Rückfall für alte Browser, eine SVG-Variante, die auf jedem Bildschirm scharf ist, und ein PNG für den Startbildschirm auf iOS. Ein einzelnes link rel="icon" reicht für den Anfang völlig aus. In alten Anleitungen steht dort oft rel="shortcut icon". Das funktioniert weiterhin, gemeint ist dasselbe, heute schreibt man nur noch icon.

Am Reiter „Browser“ wirst du es nicht finden, obwohl dort der Titel steht: Ein Rahmen holt sich kein Favicon, es wird also gar nicht erst angefragt. Auch im Reiter „Netzwerk“ steht deshalb keine Zeile dafür.

link ist wie meta ein Void-Element. rel sagt, in welcher Beziehung die verlinkte Datei zur Seite steht, href nennt den Pfad. Genau dieses Muster brauchst du in der nächsten Lektion für das Stylesheet wieder.

02 / 03Die Vorschaukarte beim Teilen

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linsensuppe in 30 Minuten | Mein Kochblog</title>

    <meta property="og:title" content="Linsensuppe in 30 Minuten">
    <meta property="og:description" content="Ein Rezept, das unter der Woche klappt.">
    <meta property="og:image" content="https://example.com/bilder/linsensuppe-1200x630.jpg">
    <meta property="og:url" content="https://example.com/rezepte/linsensuppe">
    <meta property="og:type" content="article">
  </head>
  <body>
    <h1>Linsensuppe in 30 Minuten</h1>
  </body>
</html>

Wenn jemand deinen Link in einem Messenger oder in einem sozialen Netz teilt, erscheint dort eine Karte mit Bild, Überschrift und Text. Woher die Angaben kommen, entscheidest du.

Das Verfahren heißt Open Graph. Es sind wieder meta-Elemente, nur mit property statt name. Die fünf wichtigsten:

• og:title ist die Überschrift der Karte. Ohne sie greift der Dienst auf den title zurück.
• og:description ist der Text darunter.
• og:image ist das Vorschaubild. Es braucht eine vollständige Adresse mit https://, ein relativer Pfad funktioniert hier nicht. Bewährt sind 1200 mal 630 Pixel.
• og:url ist die endgültige Adresse der Seite.
• og:type ist die Art des Inhalts, meist website oder article.

Ohne diese Angaben suchen sich die Dienste irgendetwas von deiner Seite zusammen, oft das erste Bild im Text und den Anfang des ersten Absatzes. Das Ergebnis ist selten das, was du zeigen wolltest.

03 / 03Sprache innerhalb der Seite

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Linsensuppe</title>
  </head>
  <body>
    <h1>Linsensuppe</h1>
    <p>Das Rezept stammt aus einem englischen Kochbuch.</p>
    <blockquote lang="en">
      <p>Simmer gently until the lentils fall apart.</p>
    </blockquote>
  </body>
</html>

lang ist nicht auf das html-Element beschränkt. Steht mitten in einem deutschen Text ein englisches Zitat, bekommt genau dieses Element sein eigenes lang="en".

Der Screenreader wechselt dann für diese Passage die Aussprache und liest den englischen Satz englisch statt deutsch buchstabiert. Bei einzelnen Fremdwörtern lohnt sich das nicht, bei ganzen Zitaten und Absätzen schon.