meta charset viewport author und description
Fügen Sie wichtige Meta-Tags für Darstellung und Auffindbarkeit hinzu
meta charset viewport author und description ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Das meta-Element
Das <meta>-Element stellt Metadaten über die Seite bereit. Es ist ein Void-Element — es besitzt kein schließendes Tag:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Learn HTML5 from scratch.">
<meta name="author" content="Jane Smith">
</head>meta charset
Gibt die Zeichenkodierung an:
<meta charset="UTF-8">
<!-- Must be:
- Inside <head>
- Within the first 1024 bytes of the file
- Best: the first tag inside <head>
- Always use UTF-8 for web pages
-->meta viewport
Das viewport-Meta-Tag steuert die Darstellung auf Mobilgeräten:
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Without this, mobile browsers render at desktop width (900-980px)
then scale down — everything looks tiny -->
<!-- width=device-width: viewport width = device width -->
<!-- initial-scale=1: start at 1:1 zoom -->
<!-- This is REQUIRED for responsive design to work -->Werte für viewport-Inhalte
Weitere viewport-Werte, die Ihnen begegnen können:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<!-- maximum-scale: max zoom level users can reach -->
<!-- minimum-scale: min zoom level -->
<!-- AVOID: user-scalable=no
It prevents users from zooming, which is a WCAG 1.4.4 violation -->
<!-- <meta name="viewport" content="user-scalable=no"> BAD -->meta description
Das description-Meta-Tag stellt eine Zusammenfassung für Suchergebnisse bereit:
<meta name="description" content="
Learn HTML5 semantic elements, forms, accessibility,
and modern web APIs. Practical lessons for real-world developers.
">
<!-- Recommended: 150-160 characters -->
<!-- Google may show this in the SERP snippet -->
<!-- Not a direct ranking factor, but affects click-through rate -->
<!-- Make every page's description unique and compelling -->meta author
Das author-Meta-Tag gibt den Autor der Seite an:
<meta name="author" content="Jane Smith">
<!-- Rarely used by search engines today -->
<!-- Schema.org Person is more semantic for author attribution -->
<!-- Still good practice for internal content management -->meta keywords (veraltet)
Das keywords-Meta-Tag war früher wichtig, wird heute jedoch ignoriert:
<!-- Old and ignored by Google since 2009: -->
<meta name="keywords" content="html5, web development, tutorial">
<!-- Don't waste time on this -->
<!-- Focus on quality content and real on-page keywords instead -->meta http-equiv
Das http-equiv-Attribut simuliert HTTP-Antwort-Header:
<!-- Redirect after 5 seconds: -->
<meta http-equiv="refresh" content="5; url=/new-page">
<!-- Set Content Security Policy: -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Cache control (mostly superseded by real HTTP headers): -->
<meta http-equiv="cache-control" content="no-cache">meta robots
Das robots-Meta-Tag steuert das Crawling durch Suchmaschinen:
<meta name="robots" content="index, follow">
<!-- index: allow indexing (default) -->
<!-- follow: follow links (default) -->
<!-- noindex: don't add to search index -->
<!-- nofollow: don't follow links -->
<!-- noarchive: don't show cached version -->
<!-- Page you don't want indexed: -->
<meta name="robots" content="noindex">Open-Graph-Vorschau von Metadaten
Ein gut konfigurierter head-Bereich:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Forms Guide — CoddyKit</title>
<meta name="description" content="Master HTML5 forms: inputs, validation, and accessibility.">
<meta name="author" content="CoddyKit Team">
<link rel="canonical" href="https://coddykit.com/html/forms">
</head>meta generator
Das generator-Meta-Tag gibt das Werkzeug an, mit dem die Seite erstellt wurde:
<!-- WordPress adds: -->
<meta name="generator" content="WordPress 6.4">
<!-- Jekyll adds: -->
<meta name="generator" content="Jekyll v4.3.2">
<!-- You can add your own: -->
<meta name="generator" content="MySSG v1.0">
<!-- Security note: this reveals your CMS version to attackers
Some recommend removing it -->Schnelltest
Welches Meta-Tag ist für responsives Design auf Mobilgeräten unverzichtbar?
Zusammenfassung: Meta-Tags
Die wichtigsten Meta-Tags:
<meta charset="UTF-8">— immer an erster Stelle in head<meta name="viewport" ...>— für responsives Design erforderlich<meta name="description">— 150–160 Zeichen für das SERP-Snippet<meta name="author">— Urheberschaft der Inhalte- keywords ist veraltet; robots steuert Crawler
Häufig gestellte Fragen
Ist die Lektion „meta charset viewport author und description“ kostenlos?
Ja — der vollständige Text von „meta charset viewport author und description“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „meta charset viewport author und description“?
Fügen Sie wichtige Meta-Tags für Darstellung und Auffindbarkeit hinzu Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „meta charset viewport author und description“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- title und seine Bedeutung für SEO
- meta charset viewport author und description
- Kanonische URLs und robots-Metaangaben
- Favicon und Apple Touch Icon