4.1.5 Attribute zum Header-Element meta

Ein wichtiges Element des HTML-Headers ist <meta ...> mit seinen sehr unterschiedlichen Attributen. In der Tabelle sind einige wichtige Attribute und zugehörige typische Werte angegeben. Hier zuerst ein Beispiel für die Angabe der Zeichenkodierung einer Webseite: <meta charset="utf-8">.

  • <meta charset="utf-8"> - Verwendung der Zeichenkodierung UTF-8. Dies ist wichtig, damit Umlaute korrekt dargestellt werden.

  • <meta http-equiv="..." content="..."> - Das Attribut http-equiv bedeutet, dass damit das HTTP-Protokoll beeinflusst wird und somit die Kommunikation zwischen Server und Browser. Ob der Browser sich danach wirklich richtet, hängt von vielen Faktoren ab (Servereinstellungen, Browsereinstellungen etc.), die in den späteren Kapiteln HTTP und Webserver genauer erläutert werden.

    • <meta http-equiv="expires" content="3600"> - In den HTTP-Header wird die Zeile Expires: 3600 eingetragen, die dem Browser mitteilt, dass der Inhalt nach 3600 Sekunden (= 1 Stunde) als veraltet angesehen werden soll und somit danach nicht mehr aus dem Browsercache abgerufen werden soll.
    • <meta http-equiv="refresh" content="8; URL=http://thomaschewski.de"> - Nach 8 Sekunden soll der Browser die angegebene Webseite aufrufen. Es handelt sich somit um eine automatische Weiterleitung.
    • <meta http-equiv="refresh" content="5"> - Nach 5 Sekunden soll der Browser die aktuelle Seite erneut aufrufen.

  • <meta name="..." content="..."> - Mit den Attributen name und content werden Zusatzinformationen zum Inhalt der Webseite gegeben. Die Werte des Attributs content können ganz normale Texte sein, die nach den Regeln für HTML-Texte erstellt werden. Diese Regeln werden Sie in den späteren Unterkapiteln behandeln.

    • <meta name="author" content="Jörg Thomaschewski"> - Autor
    • <meta name="date" content="2024-06-02T10:37:05+01:00"> - Datum
    • <meta name="description" content="Modul für ..."> - Beschreibung
    • <meta name="keywords" content="HTML 5, CSS ..."> - Schlagwörter, die durch ein Komma voneinander abgetrennt werden.

  • <meta name="robots" content="index, follow"> - Diese Anweisung an Suchmaschinen-Crawler gibt an, dass die Seite indexiert und die Links darauf gefolgt werden sollen. Andere Werte können sein: noindex, nofollow, noarchive, etc.

  • <meta name="theme-color" content="#4285f4"> - Setzt die Farbgestaltung des Browsers auf mobilen Geräten, um eine einheitlichere Darstellung zu gewährleisten.

  • <meta property="og:title" content="Der Titel der Seite"> - Open Graph Meta-Tags, die hauptsächlich für soziale Netzwerke wie Facebook verwendet werden, um die Darstellung der geteilten Links zu verbessern. Weitere Beispiele sind og:description, og:image, und og:url.

  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> - Der Viewport ist der Bereich im Browserfenster, der für die Darstellung der Webseite zur Verfügung steht. Die Angabe zum Viewport soll verhindern, dass eine Webseite komplett in einer kleinen Ansicht auf einem mobilen Gerät dargestellt wird. Details zum Viewport werden im Kapitel CSS besprochen.

Die Standards für die Metadaten sind im Detail beim W3C nachzulesen. Ein oft eingesetztes Element findet sich nicht in diesen Standards, soll hier aber trotzdem behandelt werden.

Hier als Beispiel der erweiterte HTML-Sourcecode: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="de">
<head>
    <title>Mein Titel</title>
    <meta charset="utf-8">
    <meta name="author" content="Thomaschewski">
    <!-- Zusätzliche Meta-Informationen -->
    <meta http-equiv="expires" content="3600">
    <meta name="date" content="2024-06-02T10:37:05+01:00">
    <meta name="description" content="Modul für Internet-Grundlagen">
    <meta name="keywords" content="Linux, Mediennetze, HTML, CSS">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="index, follow">
    <meta name="theme-color" content="#4285f4">
    <meta property="og:title" content="Mein Titel">
    <meta property="og:description" content="Beschreibung der Seite">
    <meta property="og:image" content="http://example.com/image.jpg">
    <meta property="og:url" content="http://example.com">
</head>
<body>
    ...
</body>
</html>