HTMLMetaElement.name — Eigenschaft · JavaScript-Referenz

Signatur

HTMLMetaElement.name

Beschreibung

Die Eigenschaft name von HTMLMetaElement spiegelt das HTML-Attribut name eines <meta>-Elements wider. Sie gibt an, welche Art von Metadaten das Element beschreibt, zum Beispiel description, viewport, theme-color, robots oder author. Den eigentlichen Wert enthält die Eigenschaft HTMLMetaElement.content.

In der Praxis braucht man name vor allem in Single-Page-Anwendungen, wenn Metadaten beim Wechsel der Route angepasst werden sollen, etwa Seitenbeschreibung oder Designfarbe. Außerdem hilft die Eigenschaft beim Auslesen vorhandener Metadaten, zum Beispiel für Analyse-Werkzeuge oder Browser-Erweiterungen.

Die Eigenschaft ist ein reflektierter String: Beim Lesen erhält man den Attributwert oder einen leeren String, wenn das Attribut fehlt. Beim Schreiben wird das Attribut im DOM gesetzt. Laut HTML-Spezifikation schließen sich name, http-equiv, charset und itemprop auf einem <meta>-Element gegenseitig aus.

Rückgabewert

Typ

string

Beschreibung

Der Wert des name-Attributs, z. B. "description". Fehlt das Attribut, ist es ein leerer String "". Beim Setzen wird der Wert in einen String umgewandelt.

Beispiele

Alle benannten Meta-Tags auslesen

// Gibt alle <meta name="...">-Paare als Objekt zurück
const metaDaten = Object.fromEntries(
  [...document.querySelectorAll('meta[name]')]
    .map((meta) => [meta.name, meta.content])
);

console.log(metaDaten);

{ viewport: "width=device-width, initial-scale=1", description: "Meine Startseite" }

Beschreibung in einer SPA aktualisieren oder anlegen

const setzeMeta = (name, content) => {
  let meta = document.querySelector(`meta[name="${CSS.escape(name)}"]`);
  if (!meta) {
    meta = document.createElement('meta');
    meta.name = name; // setzt das name-Attribut
    document.head.append(meta);
  }
  meta.content = content;
  return meta;
};

const meta = setzeMeta('description', 'Produktdetails zu Artikel 4711');
console.log(meta.outerHTML);

Designfarbe (theme-color) passend zum Farbschema wechseln

const themeMeta = [...document.getElementsByTagName('meta')]
  .find((m) => m.name === 'theme-color');

const dunkel = window.matchMedia('(prefers-color-scheme: dark)');
const aktualisiere = () => {
  if (themeMeta) themeMeta.content = dunkel.matches ? '#121212' : '#ffffff';
};

aktualisiere();
dunkel.addEventListener('change', aktualisiere);
console.log(themeMeta?.name, themeMeta?.content);

theme-color #ffffff

Leerer String bei fehlendem Attribut

const charsetMeta = document.querySelector('meta[charset]');
console.log(JSON.stringify(charsetMeta?.name));

""

// Wichtig · Fallstricke

Groß-/Kleinschreibung: Browser und Suchmaschinen behandeln Werte wie description in der Regel ohne Beachtung der Groß-/Kleinschreibung. Der Selektor meta[name="description"] und der Vergleich meta.name === 'description' unterscheiden aber zwischen Groß- und Kleinbuchstaben. Für robuste Vergleiche sollte man meta.name.toLowerCase() verwenden.
Crawler: Metadaten, die per JavaScript geändert werden, werden nicht von allen Suchmaschinen und Social-Media-Vorschauen erkannt. Open-Graph-Tags nutzen außerdem property und nicht name. Für eine verlässliche SEO sind serverseitiges Rendering oder statische Tags besser.
Späte Änderungen: Manche Werte wie viewport oder referrer werden vom Browser zu einem bestimmten Zeitpunkt ausgewertet. Spätere Änderungen wirken dann möglicherweise gar nicht oder nur eingeschränkt.
Sicherheit: Wer den Namen aus Benutzereingaben in einen Selektor einsetzt, sollte ihn mit CSS.escape() absichern, damit keine ungültigen Selektoren entstehen.
Browser-Unterstützung: Die Eigenschaft wird seit vielen Jahren von allen Browsern unterstützt.

Siehe auch

DeviceOrientationEvent.gamma HTMLAreaElement.shape HTMLMetaElement.scheme HTMLMetaElement.media HTMLMetaElement.content