Das HTML content-Attribut
Das HTML content-Attribut legt den Wert eines Meta-Tags fest, der mit name oder http-equiv gepaart ist. Häufige Werte für SEO, viewport und mehr.
Das content-Attribut enthält den Wert einer Metadaten-Deklaration. Es ist allein bedeutungslos — es bildet stets eine Hälfte eines Schlüssel-Wert-Paares und liefert die Daten für das, was das name- oder http-equiv-Attribut des meta-Tags benennt.
Das content-Attribut kann nur beim <meta>-Element verwendet werden, das sich im <head> des Dokuments befindet. Stellen Sie sich name/http-equiv als den Schlüssel und content als den Wert vor:
name+content— Metadaten auf Dokumentebene für Browser, Suchmaschinen und soziale Plattformen (Beschreibung, Keywords, viewport usw.).http-equiv+content— eine Pragma-Direktive, die einen HTTP-Antwort-Header simuliert (zum Beispiel eine Seitenaktualisierung oder einen Inhaltstyp).
Wenn Sie ein <meta>-Tag mit name oder http-equiv, aber ohne content schreiben, hat die Deklaration keine Wirkung.
Syntax
<meta name="description" content="A description of the document">Häufige name-Werte und ihr content
Der content-Wert wird entsprechend dem name interpretiert, mit dem er gepaart ist. Dies sind die am häufigsten verwendeten:
name | Was content enthält |
|---|---|
viewport | Wie die Seite auf den Gerätebildschirm abgebildet wird. Der Standardwert ist width=device-width, initial-scale=1, der eine Seite auf Mobilgeräten responsiv rendert. |
description | Eine kurze Zusammenfassung der Seite. Suchmaschinen zeigen sie häufig als Snippet unter Ihrem Ergebnis an, daher sollte sie ~160 Zeichen nicht überschreiten. |
keywords | Eine durch Kommas getrennte Liste von Keywords. Von modernen Suchmaschinen weitgehend ignoriert, aber in Legacy-Markup noch verbreitet. |
robots | Anweisungen für Suchmaschinen-Crawler (siehe die Aufschlüsselung unten). |
author | Der Name des Seitenautors. |
Das viewport-Meta ist das wichtigste, das man sich merken sollte — ohne es nehmen mobile Browser ein Desktop-breites Layout an und zoomen heraus:
<meta name="viewport" content="width=device-width, initial-scale=1">Die robots-Direktiv-Werte
Der content-Wert eines robots-Meta ist eine durch Kommas getrennte Liste von Direktiven, die Crawlern mitteilen, was sie mit der Seite tun dürfen. Die zwei am häufigsten missverstandenen — noindex und nofollow — steuern unterschiedliche Dinge:
| Wert | Was dem Crawler mitgeteilt wird |
|---|---|
index | Die Seite darf in den Suchergebnissen erscheinen. Dies ist der Standard, daher muss dieser Wert selten explizit angegeben werden. |
follow | Der Crawler darf den Links auf der Seite folgen, um weitere Seiten zu entdecken. Ebenfalls der Standard. |
noindex | Diese Seite nicht in den Suchergebnissen anzeigen — auch wenn der Crawler sie lesen und ihren Links folgen kann. |
nofollow | Den Links auf dieser Seite nicht folgen. Die Seite selbst kann dennoch indexiert werden. |
Da sie unabhängig voneinander sind, werden sie häufig kombiniert. Um beispielsweise eine Seite aus der Suche auszublenden und zu verhindern, dass Crawler ihren Links folgen:
<meta name="robots" content="noindex, nofollow">Open Graph und Metadaten zum sozialen Teilen
Wenn eine Seite auf sozialen Plattformen (Facebook, LinkedIn, Slack usw.) geteilt wird, liest die Plattform Open Graph-Meta-Tags, um die Vorschaukarte zu erstellen. Open Graph verwendet das property-Attribut (anstelle von name) zusammen mit content:
<meta property="og:title" content="HTML content Attribute - W3docs" />
<meta property="og:description" content="Learn how the HTML content attribute pairs with a meta tag's name or http-equiv to set page metadata." />
<meta property="og:image" content="https://www.w3docs.com/assets/preview.png" />og:title— die Überschrift auf der Teilungskarte (fällt auf den Seitentitel zurück, wenn weggelassen).og:description— der Zusammenfassungstext unter dem Titel.og:image— eine absolute URL zum Vorschaubild. Verwenden Sie hier immer eine vollständigehttps://-URL; relative Pfade werden auf anderen Seiten nicht aufgelöst.
Dies sind einige der häufigsten realen Verwendungen von content, daher lohnt es sich, sie neben Ihrem description-Meta hinzuzufügen.
Häufige http-equiv-Werte und ihr content
Das http-equiv-Attribut ermöglicht es einem <meta>-Tag, einen HTTP-Header zu ersetzen. Das content-Attribut trägt dann den Wert dieses Headers:
http-equiv | Was content enthält |
|---|---|
refresh | Eine Anzahl von Sekunden, bevor die Seite neu geladen wird. Fügen Sie ;url=... hinzu, um stattdessen weiterzuleiten — z. B. content="5;url=https://www.w3docs.com". Siehe den Hinweis zur Barrierefreiheit unten. |
content-type | Der MIME-Typ und der Zeichensatz des Dokuments, z. B. text/html; charset=UTF-8. In HTML5 wird das kürzere <meta charset="UTF-8"> bevorzugt. |
Der X-UA-Compatible-Wert (z. B. IE=edge) hat ausschließlich den Rendering-Modus des Internet Explorers beeinflusst. Der Internet Explorer hat sein Lebensende erreicht, daher ist diese Direktive veraltet und kann bei neuen Seiten weggelassen werden.
Die Verwendung von <meta http-equiv="refresh"> zur Weiterleitung auf eine andere Seite ist aus Gründen der Barrierefreiheit nicht empfohlen. Es handelt sich um einen dokumentierten WCAG 2.2-Fehler (Erfolgskriterien 2.2.1 und 3.2.5): Es gibt dem Benutzer keine Kontrolle über das Timing und kann Menschen, die Screenreader verwenden oder mehr Zeit zum Lesen benötigen, desorientieren. Bevorzugen Sie eine echte serverseitige HTTP-Weiterleitung (eine 301/302-Antwort). Wenn Sie vom Client aus weiterleiten müssen, setzen Sie die Verzögerung auf 0, damit sie sofort erfolgt, oder stellen Sie einen sichtbaren Link bereit, den der Benutzer selbst aktivieren kann.
Beispiel des HTML content-Attributs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Free hands-on tutorials and references on HTML, CSS, JavaScript, PHP and Git, with runnable examples to learn web development step by step." />
<meta name="keywords" content="HTML,CSS,JavaScript,PHP, Git" />
<meta http-equiv="refresh" content="30" />
</head>
<body>
<h1>Example of the HTML "content" attribute</h1>
<p>Lorem ipsum, or lorem ipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Hier ist, was jeder content-Wert im obigen Beispiel bewirkt:
width=device-width, initial-scale=1weist den Browser an, das Layout an die Bildschirmbreite des Geräts anzupassen und bei 100 % Zoom zu starten.- Der
description-Wert ("Free hands-on tutorials and references on HTML, CSS, JavaScript, PHP and Git…") ist die Seitenzusammenfassung, die eine Suchmaschine als Ergebnis-Snippet anzeigen kann. "HTML,CSS,JavaScript,PHP, Git"ist die durch Kommas getrennte Keyword-Liste."30"bei derrefresh-Direktive lädt die Seite alle 30 Sekunden neu. Verwenden Sie die automatische Aktualisierung sparsam — lesen Sie den Hinweis zur Barrierefreiheit oben, bevor Sie sich darauf verlassen.