jQuery / Ler valores de tags meta
Selecione a tag meta e chame .attr("content"). Para descrição: $('head meta[name="description"]').attr("content"). Selecione og:title do Open Graph por property, não name.
Identificar a tag e o atributo de valor
O elemento meta fornece metadados sobre o documento. name="description" identifica o tipo e content contém o valor. Não é um parágrafo com texto interno: use .attr("content") em vez de .text() ou da função de formulário .val().
Open Graph usa property="og:title". name="og:title" busca outro atributo e não corresponde. A codificação é lida do próprio charset. Examine o HTML sem presumir content em toda meta.
Aspas simples na string JavaScript e duplas nos valores tornam seletores fixos legíveis. Não é necessário criar seletor arbitrário a partir de entrada externa.
Exemplo completo no navegador
Salve tudo em UTF-8 como meta-demo.html e abra no navegador. A Internet carrega o arquivo oficial do jQuery 4.0.0. Não exige servidor nem pacotes. Leitura, duplicatas, releitura após mudanças e reinício foram executados no Edge para Windows com 3.7.1 e 4.0.0.
demo-empty e demo-no-content mostram intencionalmente vazio e atributo ausente. Uma meta name sem content não é padrão válido para publicação. og:title sozinho também não é uma configuração 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>Saída inicial: content="" é string vazia. Atributo content ou elemento ausente resulta em undefined; length confere existência separadamente.
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 lê novamente. Inicialmente description é Original page summary, count=1.
- Add duplicate cria duas descrições. O getter continua lendo Original page summary; a lista completa é ["Original page summary","Second summary"].
- Update existing description muda todas as correspondências para Updated <em>summary</em>. .text() não cria em.
- Remove description resulta em count=0, description=undefined e all descriptions=[]. Update não cria a tag ausente.
- Reset restaura uma descrição original e preserva charset, viewport, og:title e outros metadados.
Vazio, ausência e duplicatas
if(value) confunde string vazia e undefined. Confira $meta.length para o elemento, value === undefined para atributo ausente e value === "" para vazio intencional. Não armazene a string "undefined"; String() apenas torna o diagnóstico visível.
.attr("content") lê a primeira correspondência, sem mesclar duplicatas ou escolher a mais recente. .each() reúne todas com quantidade e ordem. Procure a causa de duplicatas em modelos ou ajustes SEO, em vez de considerar correta a primeira leitura.
O setter .attr("content", value) altera todas as correspondências. Update demonstra a leitura do DOM atual. Para ler, omita o segundo argumento. Não sobrescreva arbitrariamente metadados de temas ou plugins SEO em um site real.
Espaços permanecem na string. Defina seu significado antes de normalizar. Mostre valores com .text(), sem interpretá-los como HTML em outro lugar.
DOM atual e fonte do servidor
Lê-se o DOM, Document Object Model, em execução. Se outro script altera content, aparece o novo valor; a resposta original do servidor não muda. Com inserção assíncrona, leia após terminar ou no ponto de atualização. DOM pronto não significa todas as tarefas concluídas.
Compare head em Elements das ferramentas com o código-fonte. Ler ou mudar não comprova resultados de busca ou prévias atualizados. A documentação JavaScript SEO do Google separa rastreamento, renderização e indexação; confira a coleta real com ferramentas do serviço.
Um seletor do documento atual não solicita outra URL. Examinar outra página exige procedimento permitido separado para obter HTML. Este exemplo não lê sites alheios arbitrariamente.
