Zum Inhalt springen
IBAW Web Engineer

HTML-Head und Metadaten

Zu normalem Modus wechseln

Grundlegende Head-Struktur

Abschnitt betitelt „Grundlegende Head-Struktur“

Der <head>-Bereich enthält wichtige Metainformationen über die Webseite und lädt kritische Ressourcen. Er wird nicht direkt auf der Seite angezeigt, legt aber die Grundlage für die gesamte Webseite.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Seitentitel</title>
    <meta
      name="description"
      content="Kurze Beschreibung der Webseite (150-160 Zeichen)"
    />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <!-- Seiteninhalt -->
  </body>
</html>
  • <!DOCTYPE html>: Deklariert den Dokumenttyp als HTML5
  • <html lang="de">: Das Wurzelelement mit Sprachattribut für Barrierefreiheit und SEO
  • <title>: Definiert den Titel der Seite, der in Browser-Tabs angezeigt wird
  • <meta charset="UTF-8">: Legt die Zeichenkodierung fest
  • <meta name="viewport">: Steuert die Darstellung auf mobilen Geräten
  • <meta name="description">: Kurze Beschreibung für Suchmaschinen
  • <link rel="stylesheet">: Bindet CSS-Dateien ein
  • <script>: Bindet JavaScript-Dateien ein

Wichtige Meta-Tags

Abschnitt betitelt „Wichtige Meta-Tags“

Meta-Tags geben Browsern, Suchmaschinen und anderen Web-Diensten wichtige Informationen über die Seite.

<!-- Zeichensatz -->
<meta charset="UTF-8" />


<!-- Viewport für responsive Darstellung -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />


<!-- Beschreibung für Suchmaschinen -->
<meta
  name="description"
  content="Beschreibung der Webseite für Suchmaschinen"
/>


<!-- Keywords (weniger wichtig für SEO, aber manchmal noch verwendet) -->
<meta name="keywords" content="HTML, CSS, JavaScript, Tutorial" />


<!-- Autor -->
<meta name="author" content="Max Mustermann" />


<!-- Robots-Anweisungen für Suchmaschinen -->
<meta name="robots" content="index, follow" />
<!-- oder -->
<meta name="robots" content="noindex, nofollow" />


<!-- Farbschema für mobile Browser -->
<meta name="theme-color" content="#3498db" />
  • charset: Definiert die Zeichenkodierung, fast immer UTF-8 für internationale Inhalte
  • viewport: Essentiell für responsive Websites; stellt sicher, dass die Seite korrekt auf mobilen Geräten skaliert
  • description: Wichtig für SEO; erscheint oft in Suchergebnissen
  • keywords: Früher wichtig für SEO, heute weniger relevant
  • author: Gibt den Autor der Seite an
  • robots: Weist Suchmaschinen an, wie die Seite indexiert werden soll
  • theme-color: Bestimmt die Farbgebung in der Adressleiste mobiler Browser

Social Media Meta-Tags

Abschnitt betitelt „Social Media Meta-Tags“

Diese speziellen Meta-Tags optimieren, wie Ihre Seite beim Teilen auf sozialen Plattformen dargestellt wird.

<!-- Open Graph für Facebook und andere -->
<meta property="og:title" content="Seitentitel" />
<meta property="og:description" content="Beschreibung der Seite" />
<meta property="og:image" content="https://www.example.com/bild.jpg" />
<meta property="og:url" content="https://www.example.com/seite" />
<meta property="og:type" content="website" />


<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@benutzername" />
<meta name="twitter:title" content="Seitentitel" />
<meta name="twitter:description" content="Beschreibung der Seite" />
<meta name="twitter:image" content="https://www.example.com/bild.jpg" />

Open Graph (og): Von Facebook entwickelt, aber von vielen Plattformen unterstützt

  • og:title: Titel, der beim Teilen angezeigt wird
  • og:description: Beschreibung beim Teilen
  • og:image: Bild, das beim Teilen angezeigt wird (idealerweise 1200x630px)
  • og:url: Kanonische URL der Seite
  • og:type: Art des Inhalts (website, article, etc.)

Twitter Card: Optimiert die Darstellung beim Teilen auf Twitter

  • twitter:card: Art der Karte (summary, summary_large_image, etc.)
  • twitter:site: Twitter-Handle der Website oder des Unternehmens
  • twitter:title, twitter:description, twitter:image: Ähnlich wie die Open Graph-Entsprechungen

Favicon und App-Icons

Abschnitt betitelt „Favicon und App-Icons“

Diese Icons repräsentieren Ihre Website in Browser-Tabs, Lesezeichen und auf mobilen Startbildschirmen.

<!-- Standard-Favicon -->
<link rel="icon" href="favicon.ico" />


<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />


<!-- Verschiedene Favicon-Grössen -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />


<!-- Web App Manifest für PWAs -->
<link rel="manifest" href="site.webmanifest" />
  • favicon.ico: Traditionelles Icon-Format, das von allen Browsern unterstützt wird
  • apple-touch-icon: Spezielles Icon für iOS-Geräte, wenn die Website zum Startbildschirm hinzugefügt wird
  • PNG-Favicons: Modernere Formate mit verschiedenen Grössen für unterschiedliche Anwendungsfälle
  • manifest: Verknüpfung zum Web App Manifest für Progressive Web Apps

Es gibt online viele Favicon-Generatoren wie z.B: RealFaviconGenerator

Stylesheets und Skripte

Abschnitt betitelt „Stylesheets und Skripte“

Diese Elemente binden CSS für das Styling und JavaScript für die Funktionalität der Seite ein.

<!-- Externe CSS-Datei einbinden -->
<link rel="stylesheet" href="styles.css" />


<!-- Alternative Stylesheets -->
<link rel="alternate stylesheet" href="darkmode.css" title="Dark Mode" />


<!-- Schriftarten einbinden -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
  rel="stylesheet"
/>


<!-- JavaScript einbinden -->
<script src="script.js"></script>


<!-- JavaScript mit defer (lädt parallel, führt nach HTML-Parsing aus) -->
<script src="script.js" defer></script>


<!-- JavaScript mit async (lädt parallel, führt sofort nach Laden aus) -->
<script src="analytics.js" async></script>


<!-- Inline-JavaScript -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    console.log("Seite geladen!");
  });
</script>
  • link rel="stylesheet": Bindet externe CSS-Dateien ein
  • alternate stylesheet: Bietet alternative Stile an, die der Benutzer wählen kann
  • Google Fonts Integration: Zeigt, wie man Webschriften einbindet
  • JavaScript-Einbindung:
  • Ohne Attribute: Blockiert das Parsing, bis das Skript geladen und ausgeführt ist
  • defer: Lädt parallel zum Parsing und führt erst nach dem Parsing aus (behält Reihenfolge bei)
  • async: Lädt parallel und führt sofort nach dem Laden aus (keine garantierte Reihenfolge)
  • Inline-JavaScript: Direkt im HTML-Dokument definierter Code

Web App Manifest

Abschnitt betitelt „Web App Manifest“

Das Web App Manifest ist eine JSON-Datei, die Informationen zu einer Website bereitstellt, die als Progressive Web App (PWA) installiert werden kann. Es definiert, wie die App auf dem Startbildschirm erscheinen soll, welche Seite beim Start geöffnet wird und wie die Darstellung sein soll.

Beispiel für ein einfaches Web App Manifest (site.webmanifest):

Abschnitt betitelt „Beispiel für ein einfaches Web App Manifest (site.webmanifest):“
{
  "name": "Meine PWA App",
  "short_name": "PWA App",
  "description": "Beschreibung meiner Progressive Web App",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4285f4",
  "icons": [
    {
      "src": "images/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Wichtige Eigenschaften:

Abschnitt betitelt „Wichtige Eigenschaften:“
  • name: Vollständiger Name der Anwendung
  • short_name: Kurzer Name für Startbildschirme mit begrenztem Platz
  • description: Beschreibung der App
  • start_url: URL, die beim Öffnen der installierten App geladen wird
  • display: Anzeigemodus (options: fullscreen, standalone, minimal-ui, browser)
  • background_color: Hintergrundfarbe beim Laden der App
  • theme_color: Primäre Themenfarbe der App (beeinflusst oft die Browser-UI)
  • icons: Array von Icon-Objekten mit verschiedenen Grössen

Das Manifest ermöglicht es Benutzern, Ihre Website wie eine native App zu installieren und zu verwenden, was für wiederkehrende Benutzer ein verbessertes Erlebnis bietet.

Übung: Metadaten für SEO

Abschnitt betitelt „Übung: Metadaten für SEO“

Weiterführende Ressourcen zum Web App Manifest:

Abschnitt betitelt „Weiterführende Ressourcen zum Web App Manifest:“
War diese Seite hilfreich?