Ajouter la meta description à la fin de l'affichage du contenu avec javascript ! [Résolu]

Signaler
Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021
-
 Totox -
Bonjour,

Dans le header de ma page j'ai le code de meta description suivant :

<meta name="description" content="" />


En bas de la page, dans le contenu du site, je souhaite ajouter le contenu de la description, j'ai donc fais ça mais ça ne marche pas lorsque je regarde le code source de la page :


<script>
var $meta = $('meta[name=description]').attr('content', '<?php echo $description; ?>');
$('body').text($meta.attr('content'));
</script>


Merci pour votre aide :)


Configuration: Windows / Chrome 90.0.4430.212

8 réponses

Messages postés
32933
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 juin 2021
3 553
Aucun souci avec ce code
<!DOCTYPE html>
<html>
  <head>
    <title>TEST</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"></script>

  </head>
  <body>

    <script>
      $('meta[name=description]').remove();
      $('head').append( '<meta name="description" content="Nouveau Contenu">' );
    </script>
  </body>
</html>


Si ça ne marche pas chez toi, commence par vider le cache de ton navigateur... et/ou essaye avec un autre navigateur.

Messages postés
32933
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 juin 2021
3 553
Bonjour,

essaye avec ça
   //On supprime le meta existant
    $('meta[name=description]').remove();
   // on créé le nouveau avec le nouveau contenu
    $('head').append( '<meta name="description" content="Nouveau Contenu">' );


Essaye déjà comme ça sans le PHP ....


Par contre, vu que tu sembles avoir les données disponibles en php .. pourquoi ne les charges tu pas directement dans les meta au lieu de passer par du js ?

Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021

Merci jordane45, je vais tester, sinon, pour votre question, car j'ai un seul header.php inclus dans toutes mes pages, du coup, je compte ajouter la descriptions par le js dont le contenu est récupérer différemment dans chaque page.
Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021

@jordane45
J'ai ajouté ce code :
<script> 
$('meta[name=description]').remove();
$('head').append( '<meta name="description" content="Nouveau Contenu">' );
</script>

ça ne donne rien, sachant que dans head j'ai :
<meta name="description" content="" />
que même en la supprimant manuellement ça change rien :(

Messages postés
32933
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 juin 2021
3 553
Tu n'as rien qui s'affiche dans la console comme un éventuel message d'erreur ?
Messages postés
32933
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 juin 2021
3 553 >
Messages postés
32933
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 juin 2021

Tu as bien charger la librairie jQuery puisque c'est cette syntaxe que tu utilises ?
Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021

Aucune erreur coté console, et mes codes s'affichent bien dans le code source :


<html>

<head>
<title>Mon nouveau site</title>
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" type="text/css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/bootstrap/styleperso.css" type="text/css" />
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$('meta[name=description]').remove();
$('head').append( '<meta name="description" content="Nouveau Contenu">' );
</script>
......


Messages postés
32933
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 juin 2021
3 553
Et tu charges bien la librairie jQuery ??
Je ne la vois pas dans le bout de code que tu nous montres...
Pourrais-tu nous partager le code source complet d'une page histoire qu'on puisse s'assurer que tout est bien placé est bien chargé ?
Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021

Désolé j'ai oublié de copier le code en dessous de title, c'est bon j'ai modifié mon code ci-dessus
Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021

Je viens d'insérer votre code dans une nouvelle page vierge, dans le code source de la page une fois ouverte on ne voit pas la description !


Messages postés
32933
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 juin 2021
3 553
Regarde dans l'inspecteur.
Tu verras qu'il y est.

NB:

The main difference is the “View Source” shows the HTML that was delivered from the web server to your browser. Inspect elements is a developer tool to look at the state of the DOM tree after the browser has applied its error correction and after any Javascript have manipulated the DOM
Messages postés
107
Date d'inscription
mardi 1 septembre 2015
Statut
Membre
Dernière intervention
5 juin 2021

ah d'accord :D google le compte sans problème comme ça ?
Messages postés
32933
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 juin 2021
3 553
Oui Google analyse le code de la page une fois qu'elle a terminé de se charger
Salut,
c'est faux ça il me semble:
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1">


L'attribut content est mal fermé dans la première balise meta(une virgule à la place de l'apostrophe double et content englobe charset)

N'oubliez pas que les balises meta doivent être en XML et non en HTML5(au moins pour l'encodage du document, les autres je ne suis pas sûr mais comme jsutement elles sont hors du document HTML je voit pas pourquoi ça ne répondrait pas à la même logique).
Le XML est beaucoup plus rigoureux que le HTML5 donc on ne peut pas se passer des guillemets(double quote) pour les remplacer par des simple quotes sur chaque attribut(ou s'en passer comme on peut le faire en HTML5) et les balises auto-fermantes doivent être fermées correctement.
Donc en XML:

<!-- est faux car non respectueux de la syntaxe XML: -->
<autofermante attribut="valeur">
<!-- juste car respecte la syntaxe XML: -->
<autofermante attribut="valeur" />