jQuery / Lire les valeurs des balises meta
Sélectionnez la balise meta puis appelez .attr("content"). Pour la description : $('head meta[name="description"]').attr("content"). Sélectionnez og:title d’Open Graph par property, pas name.
Identifier la balise et son attribut de valeur
L’élément meta fournit des métadonnées sur le document. name="description" identifie la nature, content contient la valeur. Ce n’est pas un paragraphe avec du texte interne : utilisez .attr("content") plutôt que .text() ou la méthode de formulaire .val().
Open Graph emploie property="og:title". name="og:title" cherche un autre attribut et ne correspond pas. Une déclaration d’encodage se lit dans charset même. Inspectez le HTML au lieu de supposer content partout.
Des apostrophes autour de la chaîne JavaScript et des guillemets autour des valeurs rendent les sélecteurs fixes lisibles. Inutile de fabriquer un sélecteur arbitraire à partir d’une entrée externe.
Exemple complet dans le navigateur
Enregistrez tout en UTF-8 sous meta-demo.html et ouvrez-le dans le navigateur. Internet charge le fichier officiel jQuery 4.0.0. Aucun serveur ou paquet n’est nécessaire. Lecture, doublons, relecture après modification et réinitialisation ont été exécutés dans Edge sous Windows avec 3.7.1 et 4.0.0.
demo-empty et demo-no-content exposent volontairement vide et absence d’attribut. Une meta name sans content n’est pas un modèle valide pour publication. og:title seul ne constitue pas non plus une configuration Open Graph complète.
<!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>Sortie initiale : content="" est une chaîne vide. Attribut content ou élément absent donne undefined ; length vérifie séparément l’existence de l’élément.
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 relit le document. description vaut initialement Original page summary, count=1.
- Add duplicate crée deux descriptions. Le getter lit toujours Original page summary ; le tableau complet vaut ["Original page summary","Second summary"].
- Update existing description remplace toutes les correspondances par Updated <em>summary</em>. .text() ne crée aucun élément em.
- Remove description donne count=0, description=undefined et all descriptions=[]. Update ne crée pas la balise manquante.
- Reset restaure une description initiale et conserve charset, viewport, og:title et les autres métadonnées.
Vide, absence et doublons
if(value) confond chaîne vide et undefined. Vérifiez $meta.length pour l’élément, value === undefined pour l’attribut absent et value === "" pour le vide voulu. Ne stockez pas la chaîne "undefined" ; String() rend ici le diagnostic visible.
.attr("content") ne lit que le premier résultat. Il ne fusionne pas les doublons et ne choisit pas la description la plus récente. .each() collecte tous les contenus avec leur nombre et ordre. Recherchez la cause des doublons dans modèles ou réglages SEO, au lieu de considérer la première valeur lisible comme correcte.
Le setter .attr("content", value) modifie tous les résultats. Update illustre seulement la lecture du DOM actuel. Omettez le second argument pour lire. Sur un vrai site, n’écrasez pas arbitrairement les métadonnées gérées par thème ou extension SEO.
Les espaces restent dans la chaîne. Définissez leur sens avant normalisation. Affichez les valeurs avec .text(), sans les interpréter ailleurs comme HTML.
DOM actuel et source serveur
Le code lit le DOM, Document Object Model, en cours d’exécution. Après modification par un script, il voit la nouvelle valeur ; la réponse serveur initiale ne change pas. Avec des ajouts asynchrones, lisez après leur fin ou au point de mise à jour. DOM prêt ne signifie pas toutes les tâches terminées.
Comparez head dans Elements des outils de développement avec la source. Lire ou modifier ne prouve pas une mise à jour des résultats de recherche ou aperçus. La documentation JavaScript SEO de Google distingue exploration, rendu et indexation ; vérifiez la collecte réelle avec les outils du service.
Un sélecteur du document actuel ne demande aucune autre URL. Examiner une autre page nécessite une procédure autorisée distincte pour obtenir son HTML. Cet exemple ne lit pas arbitrairement les sites tiers.
