Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Die Rolle des Dokumentkopfs | HTML-Dokumentstruktur
Ultimatives HTML

book
Die Rolle des Dokumentkopfs

Der Dokumentkopf kann Meta-Tags enthalten, von denen viele nicht sichtbar für den Benutzer im Browserfenster sind. Daher wird in den folgenden Beispielen kein sichtbarer Inhalt angezeigt. Diese Tags speichern Metadateninformationen über die Seite.

Seitentitel

Der Text im <title>-Tag wird im Browser-Tab angezeigt. Der Titel sollte eine prägnante Seitenbeschreibung sein und maximal 60 Zeichen umfassen.

html

index.html

copy
<html lang="en">
<head>
<!-- Metadata -->
<title>Web Development</title>
</head>
<body>
<!-- Page content -->
</body>
</html>

Mit Hilfe dieses Codes können Sie ein solches Erscheinungsbild auf der Website erzielen. Im Browser-Tab wird exakt der Text angezeigt, der sich im <title>-Tag befindet (weißer Rahmen im Bild).

Metadaten

Das <meta>-Tag enthält Informationen für Browser und Suchmaschinen: Dokumentencodierung, Datenübertragung und vieles mehr. Die Meta-Tags können viele Attribute besitzen, da sie jeweils unterschiedliche Informationen übermitteln. Am wichtigsten ist die Seitenkodierung. Sie hilft dem Browser, den Text korrekt darzustellen. Wird encoding nicht angegeben, kann der Browser anstelle der Zeichen sogenannte Mojibake anzeigen.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata -->
<meta charset="utf-8" />
<title>Web Development</title>
</head>
<body>
<!-- Page content -->
</body>
</html>

Bedeutung der Attribute des meta-Tags

  • name : Der Name einer Eigenschaft kann jedes beliebige Wort oder jede beliebige Phrase sein, Webbrowser erwarten jedoch in der Regel einen Wert, den sie erkennen und zur Ausführung einer Aktion verwenden können. Ein Beispiel wäre <meta name="author" content="name"> , um den Autor der Seite anzugeben;

  • content : Gibt den Wert der Eigenschaft an. Ein Beispiel wäre <meta name="language" content="english"> , um die Sprache des Seiteninhalts festzulegen;

  • http-equiv : Steht für HTTP-Äquivalent und wird verwendet, um HTTP-Antwort-Header zu simulieren. Dies ist selten zu sehen. Ein Beispiel wäre <meta http-equiv="refresh" content="30"> , um dem Browser mitzuteilen, die Seite alle 30 Minuten zu aktualisieren.

Grundlegende meta-Tags zur SEO-Verbesserung

  • <meta name="description"/> : Gibt eine kurze Beschreibung der Webseite an;

  • <meta name="author" /> : Gibt den Autor der Webseite an;

  • <meta name="language"/> : Gibt die Sprache der Webseite an;

  • <meta name="robots"/> : Gibt Suchmaschinen Anweisungen, wie die Webseite gecrawlt oder indexiert werden soll;

  • <meta name="googlebot" content="notranslate"/> : Informiert Google, keine automatische Übersetzung der Webseite anzubieten;

  • <meta name="copyright" content="Copyright 2024"/> : Gibt das Urheberrecht der Webseite an.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata -->
<meta charset="utf-8" />
<meta name="description" content="Explore the web development process." />
<meta name="author" content="Jennifer Shiki" />
<meta name="language" content="English" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="translate" />
<meta name="copyright" content="Copyright 2024 Jennifer Shiki" />
<title>Web Development Guide</title>
</head>
<body>
<!-- Page content -->
</body>
</html>

1. Wo sollte das <meta>-Tag platziert werden?

2. Welcher Tag-Inhalt wird auf dem Benutzer-Tab angezeigt?

3. Was kann getan werden, um dem Browser beim Indexieren der Seite zu helfen?

question mark

Wo sollte das <meta>-Tag platziert werden?

Select the correct answer

question mark

Welcher Tag-Inhalt wird auf dem Benutzer-Tab angezeigt?

Select the correct answer

question mark

Was kann getan werden, um dem Browser beim Indexieren der Seite zu helfen?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 3

Fragen Sie AI

expand
ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

some-alt