HTMLMetaElement.content — Eigenschaft · JavaScript-Referenz

Signatur

HTMLMetaElement.content

Beschreibung

Die Eigenschaft content spiegelt das gleichnamige HTML-Attribut eines <meta>-Elements wider. Sie enthält den eigentlichen Wert der Metainformation. Welche Bedeutung der Wert hat, legt erst das zugehörige Attribut fest: name (z. B. description, viewport, theme-color) über HTMLMetaElement.name oder eine Pragma-Direktive über http-equiv (HTMLMetaElement.httpEquiv).

Typische Einsätze sind das Auslesen von Konfigurationswerten, die der Server in die Seite schreibt (etwa ein CSRF-Token in <meta name="csrf-token">), das dynamische Ändern von theme-color für den Dark Mode oder das Anpassen von description und Open-Graph-Tags in Single-Page-Anwendungen.

Der Wert ist immer ein string. Fehlt das Attribut, liefert der Getter einen leeren String. Beim Setzen wird das Attribut direkt im DOM aktualisiert, identisch zu setAttribute("content", wert).

Parameter

Name	Typ	Default	Beschreibung
$wert	string		Nur beim Setzen: neuer Inhalt des `content`-Attributs. Andere Typen werden in einen String umgewandelt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des content-Attributs bzw. ein leerer String, wenn es fehlt.

Beispiele

CSRF-Token aus einem Meta-Tag für fetch auslesen

// <meta name="csrf-token" content="a1b2c3"> im <head>
const token = document.querySelector('meta[name="csrf-token"]')?.content ?? '';

const speichern = async (daten) => {
  const res = await fetch('/api/profil', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-Token': token
    },
    body: JSON.stringify(daten)
  });
  return res.ok;
};

console.log(token);

a1b2c3

theme-color passend zum Farbschema umschalten

const themeMeta = document.querySelector('meta[name="theme-color"]')
  ?? Object.assign(document.createElement('meta'), { name: 'theme-color' });

if (!themeMeta.isConnected) document.head.append(themeMeta);

const mq = window.matchMedia('(prefers-color-scheme: dark)');
const anwenden = () => {
  themeMeta.content = mq.matches ? '#121212' : '#ffffff';
  console.log('theme-color:', themeMeta.content);
};

mq.addEventListener('change', anwenden);
anwenden();

theme-color: #ffffff

description in einer SPA beim Routenwechsel setzen

const setzeBeschreibung = (text) => {
  let meta = document.querySelector('meta[name="description"]');
  if (!meta) {
    meta = document.createElement('meta');
    meta.name = 'description';
    document.head.append(meta);
  }
  meta.content = text;
};

setzeBeschreibung('Produktübersicht mit Filter und Suche');
console.log(document.querySelector('meta[name="description"]').outerHTML);

Alle Meta-Daten als Objekt sammeln

const metaDaten = Object.fromEntries(
  [...document.querySelectorAll('meta[name], meta[property]')]
    .map((m) => [m.name || m.getAttribute('property'), m.content])
);
console.log(metaDaten);

{ viewport: 'width=device-width, initial-scale=1', description: '…', 'og:title': '…' }

// Wichtig · Fallstricke

Späte Änderungen wirken nicht immer: Pragma-Direktiven wie http-equiv="Content-Security-Policy", refresh oder charset werden vom Browser nur beim Parsen ausgewertet. Ein nachträgliches Ändern von content per JavaScript hat darauf keine Wirkung (eine CSP kann auf diesem Weg auch nicht gelockert werden). viewport und theme-color reagieren dagegen in den meisten Browsern auf Änderungen.
SEO und Social Media: Viele Crawler und Link-Vorschauen (Open Graph, Twitter Cards) führen kein JavaScript aus. Clientseitig gesetzte Werte sind für sie oft unsichtbar, deshalb besser serverseitig rendern.
Open-Graph-Tags nutzen property statt name. Dafür gibt es keine eigene DOM-Eigenschaft, also getAttribute('property') verwenden.
querySelector liefert null, wenn das Tag fehlt. Optionale Verkettung (?.) verhindert einen TypeError.
Sicherheit: Token in Meta-Tags kann jedes Skript auf der Seite lesen. Bei einer XSS-Lücke sind sie also nicht geschützt.
Die Eigenschaft wird in allen modernen Browsern unterstützt.

Siehe auch

HTMLMetaElement.httpEquiv HTMLMetaElement.name HTMLMetaElement.scheme HTMLMetaElement.media HTMLMediaElement.controls