jQuery / Leer valores de etiquetas meta
Seleccione la etiqueta meta y llame a .attr("content"). Para descripción: $('head meta[name="description"]').attr("content"). Seleccione og:title de Open Graph por property, no name.
Identificar etiqueta y atributo de valor
El elemento meta aporta metadatos del documento. name="description" identifica la clase de información y content contiene el valor. No es un párrafo con texto interior: use .attr("content") en vez de .text() o la función de formulario .val().
Open Graph usa property="og:title". name="og:title" busca otro atributo y no coincide. La codificación se lee del propio charset. Examine el HTML sin suponer que toda meta tiene content.
Comillas simples alrededor de la cadena JavaScript y dobles en valores facilitan leer selectores fijos. No hace falta crear un selector arbitrario con entradas externas.
Ejemplo completo en el navegador
Guarde todo en UTF-8 como meta-demo.html y ábralo en el navegador. Internet carga el archivo oficial de jQuery 4.0.0. No requiere servidor ni paquetes. Lectura, duplicados, relectura tras cambios y reinicio se ejecutaron en Edge para Windows con 3.7.1 y 4.0.0.
demo-empty y demo-no-content muestran intencionadamente vacío y atributo ausente. Una meta name sin content no es un patrón válido de publicación. og:title solo tampoco es una configuración Open Graph completa.
<!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>Salida inicial: content="" es cadena vacía. Atributo content o elemento ausente da undefined; length comprueba la existencia por separado.
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 vuelve a leer. Inicialmente description es Original page summary, count=1.
- Add duplicate crea dos descripciones. El getter sigue leyendo Original page summary; la lista completa es ["Original page summary","Second summary"].
- Update existing description cambia todas las coincidencias a Updated <em>summary</em>. .text() no crea em.
- Remove description da count=0, description=undefined y all descriptions=[]. Update no crea la etiqueta ausente.
- Reset restaura una descripción original y conserva charset, viewport, og:title y otros metadatos.
Vacío, ausencia y duplicados
if(value) confunde cadena vacía y undefined. Compruebe $meta.length para el elemento, value === undefined para atributo ausente y value === "" para vacío intencionado. No almacene la cadena "undefined"; String() solo hace visible el diagnóstico.
.attr("content") lee la primera coincidencia, sin fusionar duplicados ni elegir la descripción más reciente. .each() recoge todas con cantidad y orden. Busque la causa de duplicados en plantillas o ajustes SEO, en lugar de dar por correcta la primera lectura.
El setter .attr("content", value) cambia todas las coincidencias. Update demuestra la lectura del DOM actual. Para leer omita el segundo argumento. No sobrescriba arbitrariamente metadatos de temas o plugins SEO en un sitio real.
Los espacios se mantienen. Decida su significado antes de normalizarlos. Muestre valores con .text(), sin interpretarlos como HTML en otra parte.
DOM actual y fuente del servidor
Se lee el DOM, Document Object Model, en ejecución. Si otro script cambia content, aparece el nuevo valor; no cambia la respuesta original del servidor. Con incorporación asíncrona, lea al terminar o al actualizar. DOM listo no significa todas las tareas acabadas.
Compare head en Elements de herramientas con Ver código fuente. Leer o cambiar no demuestra resultados de búsqueda o vistas previas actualizados. La documentación JavaScript SEO de Google separa rastreo, renderizado e indexación; verifique la recopilación real con herramientas del servicio.
Un selector del documento actual no solicita otra URL. Examinar otra página requiere un procedimiento permitido aparte para obtener HTML. Este ejemplo no lee sitios ajenos arbitrariamente.
