HTMLMetaElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLMetaElement extends HTMLElement

Beschreibung

Das Interface HTMLMetaElement steht für ein <meta>-Element im <head> eines Dokuments. Solche Elemente enthalten Metadaten, die sich nicht mit anderen Elementen wie <title>, <base>, <link> oder <style> ausdrücken lassen, zum Beispiel Beschreibung, Viewport-Einstellungen, Theme-Farbe, Zeichensatz oder Open-Graph-Angaben.

Zusätzlich zu den geerbten Eigenschaften von HTMLElement bietet es diese Eigenschaften:

name: Name der Metadaten, z. B. "description", "viewport" oder "theme-color". Spiegelt das HTML-Attribut name.
content: der Wert der Metadaten.
httpEquiv: spiegelt das Attribut http-equiv, etwa "refresh" oder "content-security-policy".
media: eine Media Query, für die die Angabe gilt. Wirkt vor allem bei theme-color.
scheme (veraltet): Schema zur Deutung des Inhalts.

Das Attribut charset hat keine eigene DOM-Eigenschaft. Man liest es mit getAttribute("charset"), einfacher ist aber document.characterSet. Typische Einsatzfälle für JavaScript: Metadaten lesen (etwa Konfigurationswerte oder CSRF-Token, die der Server ausgibt), in Single-Page-Anwendungen Titelbeschreibung oder Theme-Farbe beim Seitenwechsel anpassen oder den Viewport dynamisch ändern.

Rückgabewert

Typ

HTMLMetaElement

Beschreibung

Instanzen erhält man über document.createElement("meta") oder über Abfragen wie document.querySelector('meta[name="description"]'). Einen öffentlichen Konstruktor gibt es nicht.

Beispiele

Meta-Element erzeugen und in den head einfügen

// Theme-Farbe setzen, oder ein vorhandenes Element aktualisieren
const setThemeColor = (color) => {
  let meta = document.querySelector('meta[name="theme-color"]');
  if (!meta) {
    meta = document.createElement('meta');
    meta.name = 'theme-color';
    document.head.append(meta);
  }
  meta.content = color;
  return meta;
};

const el = setThemeColor('#0a7cff');
console.log(el instanceof HTMLMetaElement, el.outerHTML);

true <meta name="theme-color" content="#0a7cff">

CSRF-Token aus einem Meta-Tag lesen und mit fetch senden

// Im HTML: <meta name="csrf-token" content="abc123">
const token = document.querySelector('meta[name="csrf-token"]')?.content ?? '';

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

console.log('Token:', token);

Token: abc123

Beschreibung bei SPA-Routenwechsel aktualisieren

const updateMeta = ({ title, description }) => {
  document.title = title;
  const desc = document.querySelector('meta[name="description"]')
    ?? document.head.appendChild(Object.assign(document.createElement('meta'), { name: 'description' }));
  desc.content = description;
};

updateMeta({ title: 'Produkte', description: 'Alle Produkte im Überblick.' });
console.log(document.querySelector('meta[name="description"]').content);

Alle Produkte im Überblick.

Alle Meta-Angaben auflisten, auch http-equiv und media

const metas = [...document.querySelectorAll('meta')].map((m) => ({
  name: m.name || m.getAttribute('property') || m.httpEquiv || (m.getAttribute('charset') ? 'charset' : ''),
  content: m.content || m.getAttribute('charset'),
  media: m.media
}));
console.table(metas);

Tabelle mit allen Meta-Einträgen des Dokuments

// Wichtig · Fallstricke

Nachträgliche Änderungen wirken oft nicht: charset und die meisten http-equiv-Angaben wertet der Browser nur beim Parsen aus. Eine per JavaScript eingefügte Content-Security-Policy gilt zwar ab dem Einfügen, lässt sich aber nicht wieder lockern. Wird das Element entfernt oder geändert, bleibt die Richtlinie trotzdem bestehen. Sicherheitsrelevante Richtlinien gehören daher in HTTP-Header.
SEO: Suchmaschinen-Crawler und Vorschau-Generatoren sozialer Netzwerke (Open Graph, Twitter Cards) führen oft kein JavaScript aus. Per Skript gesetzte Meta-Tags sehen sie dann nicht. Hier hilft serverseitiges Rendern.
Open Graph nutzt das Attribut property statt name. Dafür gibt es keine DOM-Eigenschaft, also getAttribute('property') verwenden.
Kompatibilität: media wird erst seit etwa 2021–2023 in allen Browsern unterstützt. scheme ist veraltet und sollte nicht mehr verwendet werden.
Werte aus content sind nicht vertrauenswürdig, wenn sie Nutzereingaben enthalten. Nicht ungeprüft per innerHTML einfügen, sonst droht XSS.

Siehe auch

HTMLDataElement HTMLMediaElement HTMLMenuElement HTMLMeterElement HTMLAreaElement