jQuery / Werte von meta-Tags auslesen
Wählen Sie das meta-Tag und lesen Sie .attr("content"). Für Beschreibungen etwa $('head meta[name="description"]').attr("content"). Open Graph og:title wird über property statt name ausgewählt.
Kennzeichnung und Wert unterscheiden
Das meta-Element liefert Metadaten über das Dokument. name="description" bezeichnet die Art, content den Wert. Es besitzt keinen Absatztext; verwenden Sie .attr("content") statt .text() oder der Formularmethode .val().
Open Graph nutzt property="og:title". name="og:title" sucht ein anderes Attribut und passt nicht. Die Zeichencodierung steht in charset selbst. Prüfen Sie echtes HTML, statt überall content vorauszusetzen.
Einfache Anführungszeichen um die JavaScript-Zeichenfolge und doppelte um Attributwerte machen feste Selektoren lesbar. Beliebige Selektoren aus externen Eingaben sind dafür unnötig.
Vollständiges Browserbeispiel
Speichern Sie alles als UTF-8 meta-demo.html und öffnen Sie es im Browser. Internet lädt die offizielle jQuery-Datei 4.0.0. Server oder Installation sind unnötig. Lesen, Duplikate, erneutes Lesen nach Änderungen und Reset wurden in Windows Edge mit 3.7.1 und 4.0.0 ausgeführt.
demo-empty und demo-no-content zeigen absichtlich leere und fehlende Attribute. Ein name-meta ohne content ist kein gültiges Produktionsmuster. Auch og:title allein ist keine vollständige Open-Graph-Konfiguration.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Original page summary">
<meta property="og:title" content="Meta demo">
<meta name="demo-empty" content="">
<meta name="demo-no-content">
<title>Read meta attributes</title>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<style>
body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 20px; }
button { font: inherit; margin: 4px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<h1>Read the current document's metadata</h1>
<button type="button" id="read">Read current DOM</button>
<button type="button" id="update">Update existing description</button>
<button type="button" id="duplicate">Add duplicate</button>
<button type="button" id="remove">Remove description</button>
<button type="button" id="reset">Reset</button>
<pre id="result" aria-live="polite"></pre>
<script>
$(function () {
function descriptions() { return $('head meta[name="description"]'); }
function report() {
const $description = descriptions(), allValues = [];
$description.each(function () { allValues.push($(this).attr("content")); });
const $absent = $('head meta[name="does-not-exist"]');
$("#result").text([
"description=" + String($description.attr("content")),
"description count=" + $description.length,
"all descriptions=" + JSON.stringify(allValues),
"og:title=" + $('head meta[property="og:title"]').attr("content"),
"empty=" + JSON.stringify($('head meta[name="demo-empty"]').attr("content")),
"missing content=" + String($('head meta[name="demo-no-content"]').attr("content")),
"absent count=" + $absent.length + "; content=" + String($absent.attr("content")),
"charset=" + $('head meta[charset]').attr("charset")
].join("\n"));
}
$("#read").on("click", report);
$("#update").on("click", function () {
descriptions().attr("content", "Updated <em>summary</em>"); report();
});
$("#duplicate").on("click", function () {
$("<meta>").attr({ name: "description", content: "Second summary" }).appendTo("head");
$(this).prop("disabled", true); report();
});
$("#remove").on("click", function () { descriptions().remove(); report(); });
$("#reset").on("click", function () {
descriptions().remove();
$("<meta>").attr({ name: "description", content: "Original page summary" }).appendTo("head");
$("#duplicate").prop("disabled", false); report();
});
report();
});
</script>
</body>
</html>Anfangsausgabe: content="" ist eine leere Zeichenfolge. Fehlendes content oder fehlendes Element ergibt undefined; length prüft das Element gesondert.
description=Original page summary
description count=1
all descriptions=["Original page summary"]
og:title=Meta demo
empty=""
missing content=undefined
absent count=0; content=undefined
charset=utf-8- Read current DOM liest erneut. Anfangs steht description auf Original page summary, count=1.
- Add duplicate erzeugt zwei Beschreibungen. Der Getter bleibt bei Original page summary, das ganze Array lautet ["Original page summary","Second summary"].
- Update existing description setzt alle Treffer auf Updated <em>summary</em>. .text() erzeugt kein em-Element.
- Remove description ergibt count=0, description=undefined, all descriptions=[]. Update erstellt danach kein fehlendes Tag.
- Reset stellt eine ursprüngliche Beschreibung wieder her und erhält charset, viewport, og:title und weitere Metadaten.
Leere, fehlende und doppelte Werte
if(value) wirft leere Zeichenfolge und undefined zusammen. Prüfen Sie $meta.length für das Element, value === undefined für fehlendes Attribut und value === "" für leer. Speichern Sie nicht die Zeichenfolge "undefined"; String() macht hier nur Diagnosen sichtbar.
.attr("content") liest den ersten Treffer, führt nichts zusammen und sucht keine neueste Beschreibung. .each() sammelt im Beispiel alle Werte samt Anzahl und Reihenfolge. Suchen Sie Duplikatursachen in Vorlagen oder SEO-Einstellungen, statt den ersten lesbaren Wert für korrekt zu halten.
Der Setter .attr("content", value) ändert alle Treffer. Update demonstriert nur das Lesen des aktuellen DOM. Zum Lesen bleibt das zweite Argument weg. Überschreiben Sie auf echten Seiten nicht beliebig Metadaten von Themes oder SEO-Plugins.
Leerraum bleibt Bestandteil des Wertes. Entscheiden Sie vor einer Normalisierung über seine Bedeutung. Zeigen Sie Werte mit .text() an und interpretieren Sie sie nicht anderswo als HTML.
Aktuelles DOM und Serverquelle
Gelesen wird das laufende DOM, Document Object Model. Nach einer Skriptänderung erscheint der neue Wert; die ursprüngliche Serverantwort ändert sich nicht. Bei asynchronen Ergänzungen lesen Sie nach Abschluss oder am Aktualisierungspunkt erneut. DOM-Bereitschaft beendet nicht alle asynchronen Arbeiten.
Vergleichen Sie head in Elements der Entwicklertools mit dem Seitenquelltext. Lesen oder Ändern beweist keine aktualisierten Suchergebnisse oder Vorschauen. Googles JavaScript-SEO-Dokumentation unterscheidet Crawling, Rendering und Indexierung; prüfen Sie die tatsächliche Erfassung mit Dienstdaten.
Ein Selektor des aktuellen Dokuments sendet keine Anfrage an andere URLs. Andere Seiten erfordern einen getrennten erlaubten HTML-Abruf. Das Beispiel liest nicht beliebige fremde Websites aus.
