• 0
Marie-Anne

Récupération des infos des balises title et description

Question

Marie-Anne    6

Bonjour,

Je cherche la façon de récupérer le contenu des balises titre et description pour pouvoir remplir automatiquement les balises Open Graph selon la page où on se trouve.

<meta property="og:title" content="??" >
<meta property="og:description" content="??">

Merci d'avance.

Partager ce message


Lien à poster
Partager sur d’autres sites

47 réponses à cette question

Messages recommandés

  • 0
CroqueWeb    101

Je vois que tu as ajouté une série de balises pour Twitter, je suppose sur le même principe :

<meta property="og:title" content="Les nouvelles de la ferme - La ferme Du-Pâquis Fleury"><meta property="og:description" content="Exploitation maraîchère bio de légumes, aromates et fruits dans les respects de la nature et des animaux."><meta property="og:type" content="website" >
<meta property="og:site_name" content="La ferme Du-Pâquis Fleury" >
<meta name="twitter:title" content="Les nouvelles de la ferme - La ferme Du-Pâquis Fleury"><meta name="twitter:description" content="Exploitation maraîchère bio de légumes, aromates et fruits dans les respects de la nature et des animaux.">

ça présente tout de même l'inconvénient d'alourdir le code des pages, donc leurs poids.

Les rézosocios pourraient aussi bien utiliser les informations contenues dans les balises html disponibles, c'est un avis personnel, mais je trouve cette obligation d'ajout de balises propriétaires, bien que dites "open", abusive.

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
Marie-Anne    6
il y a 13 minutes, CroqueWeb a dit :

Je vois que tu as ajouté une série de balises pour Twitter, je suppose sur le même principe :


<meta property="og:title" content="Les nouvelles de la ferme - La ferme Du-Pâquis Fleury"><meta property="og:description" content="Exploitation maraîchère bio de légumes, aromates et fruits dans les respects de la nature et des animaux."><meta property="og:type" content="website" >
<meta property="og:site_name" content="La ferme Du-Pâquis Fleury" >
<meta name="twitter:title" content="Les nouvelles de la ferme - La ferme Du-Pâquis Fleury"><meta name="twitter:description" content="Exploitation maraîchère bio de légumes, aromates et fruits dans les respects de la nature et des animaux.">

ça présente tout de même l'inconvénient d'alourdir le code des pages, donc leurs poids.

Les rézosocios pourraient aussi bien utiliser les informations contenues dans les balises html disponibles, c'est un avis personnel, mais je trouve cette obligation d'ajout de balises propriétaires, bien que dites "open", abusive.

 

Oui j'ai testé ^^ 

Je suis d'accord avec toi sur la façon d'obliger l'utilisation de balises propriétaires.

Pour le début je garde mais par la suite j’allégerais le code :lol: 

 

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    101

Il y a une balise mal renseignée sur ton site :

<link rel="prefetch" href="https://www.lafermedupaquisfleury.fr">

Le pré-chargement ne peut se faire que sur un fichier précis, tq une page, une feuille de style, une image ou un fichier JavaScript, cette mise en cache ne peut pas fonctionner avec une adresse globale de répertoire, ici la racine de ton site

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
Marie-Anne    6
Il y a 8 heures, CroqueWeb a dit :

Il y a une balise mal renseignée sur ton site :


<link rel="prefetch" href="https://www.lafermedupaquisfleury.fr">

Le pré-chargement ne peut se faire que sur un fichier précis, tq une page, une feuille de style, une image ou un fichier JavaScript, cette mise en cache ne peut pas fonctionner avec une adresse globale de répertoire, ici la racine de ton site

Oups bien vu ^^ je suis en train de tester le prefetch sur ma page galerie :) je suis en cours de travail dessus.

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
cybertaf    89

La version dev 8.3.14e (dispo à l'essai) prend en compte la modification des deux méthodes déjà incluses dans le core.php comme indiqué par Rémi

 

Il y a 19 heures, CroqueWeb a dit :
  • Edite ensuite core/layout/main.php et ajoute ceci ligne 11

<?php $layout->showOGmeta(); ?>

Tu auras alors les meta balises og renseignées avec le meta titre et la meta description de chacune de tes pages

 

N'est pas suffisant la balise d'ouverture <html> doit également être modifiée comme suit :
 

<html xmlns:og="http://ogp.me/ns#">

Et il y avait 3 CSS à modifier : blank ; light et main

 

Problème résolu...

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
PeterRabbit    324
il y a 43 minutes, Rémi a dit :

 

Héhé, je donne seulement des indications aux nouveaux devs :smile:.

 

Je l'avais bien compris, je cherchais juste à te motiver un peu. xD

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    101
Il y a 1 heure, cybertaf a dit :

modification des deux méthodes déjà incluses dans le core.php comme indiqué par Rémi

Il me semble plus pertinent d'ajouter une méthode, tel que je l"ai proposé, pour la clarté du code source d'une part, et pour éventuellement pouvoir supprimer cette obligation de se conformer aux réseaux sociaux en général, et à Facebook en particulier. De plus il manque les balises propriétaires de Twitter, et si encore un autre réseau social nous impose ses balises il nous faudra également les ajouter ?

 

Il y a 1 heure, cybertaf a dit :
Il y a 21 heures, CroqueWeb a dit :
  • Edite ensuite core/layout/main.php et ajoute ceci ligne 11


<?php $layout->showOGmeta(); ?>

Tu auras alors les meta balises og renseignées avec le meta titre et la meta description de chacune de tes pages

 

N'est pas suffisant la balise d'ouverture <html> doit également être modifiée comme suit :
 


<html xmlns:og="http://ogp.me/ns#">

Et il y avait 3 CSS à modifier : blank ; light et main

 

Problème résolu...

 

Ce n'est toujours pas suffisant, en plus des balises Twitter, il manque la balise og image et la balise og type

Voici un exemple précis d'insertion de données Open Graph:

<html xmlns:og="http://ogp.me/ns#">
<head>
<title>Article sur l'Open Graph</title>
<meta property="og:title" content="Article sur l'Open Graph par Yakaferci" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.yakaferci.com/open-graph/" />
<meta property="og:image" content="http://www.yakaferci.com/images/yakaferci_small.jpg" />
...
</head>
...
</html>

(https://www.yakaferci.com/open-graph/)

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    101

Je pense que l'ajout de l'Open Graph Protocol devrait faire l'objet d'un plugin, plutôt que d'une implémentation définitive dans Zwii, et ainsi laisser le choix à l'utilisateur de ZwiiCMS d'utiliser, ou pas, les réseaux sociaux.

 

Modifié par CroqueWeb

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    101

En complément :

Les principales balises OpenGraph

Les balises obligatoires:

Og:titre
C’est le titre de votre page pour l’Open Graph. Il n’y a pas de recommandations spécifiques si ce n’est que vous ne devez pas dépasser les 65 caractères si vous ne voulez pas que votre titre soit tronqué. Cela marche de la même façon pour la balise méta du titre et si Facebook ne trouve pas le og:titre, il utilisera seulement la balise titre. Souvenez vous que celui-ci doit être attirant afin d’optimiser votre taux de clic.

exemple: <meta properiété=”og:titre” contenu=”Votre titre attirant ici” />

Og:type
Cette balise spécifie le type de votre page (site web, article, video, musique) et décrit le sujet principal de votre page. La liste des possibilités est très longue donc vous pouvez la consulter ici.
exemple : <meta properiété=”og:type” contenu=”siteweb” />
Og:image
C’est l’URL de votre image qui sera affichée dans l’OpenGraph. C’est très utile puisque vous pouvez choisir quelle miniature afficher et éviter ainsi les visuels qui ne sont pas en rapport. De plus, cela aide à augmenter votre taux de conversion. En effet, le marketing d’image est quelque chose que vous devez prendre en considération puisqu’une bonne image vaut 1,000 mots.
Habituellement, une bonne résolution pour une og image est de 1200 pixels x 627 pixels pour une taille de 5MB.
Si vous installez le plugin adapté dans votre CMS, la bonne image sera automatiquement affichée.
exemple : <proprieté meta=”og:image” contenu=”http://www.votresiteweb.com/image-nom.jpg”/>

Og:url
C’est l’URL canonique de votre page. La plupart du temps, c’est seulement l’URL affichée sur votre page mais cela peut être utile si plusieurs URLs dynamiques renvoient à la même page.
exemple : <propriété meta=”og:url” contenu=”http://www.votresitewebcom” />

Les balises non obligatoires :

Og:description
C’est le snippet de votre page qui devrait contenir entre 150 et 200 caractères (Facebook peut en afficher jusqu’à 300) et décrire le contenu de votre page. Cela marche de la même manière que pour la balise description meta mais cela n’affectera pas votre SEO, donc ne perdez pas de temps à optimiser vos mots-clés et essayez d’écrire quelque chose de convaincant.
example : <propriete meta=”og:description” contenu=”Votre super description qui décrit parfaitement ce dont vous allez parler.” />

Og:video
Si vous avez une vidéo sur votre page, c’est ici que vous devriez placer son URL.
Og:local
Cela indique la langue de votre page
Og:site_name
C’est le nom de votre site
Fb:app_id
Relier votre objet à une application Facebook (par exemple les commentaires Facebook).
Pour vous aider, Facebook a développé un outil appelé Open Graph Object Debugger qui possède deux fonctionnalités:

  • Il dresse un résumé précis des erreurs possibles ou vous pouvez tout simplement vérifier à quoi ressemblent vos partages
  • Il enlève le cache de Facebook. C’est très utile si vous apercevez une faute dans votre miniature d’image par exemple. Même si vous l’avez changé dans vos balises og, elle restera pareil à cause du cache. Cet outil va rafraîchir le cache après tout ajustements réalisés. Gardez cela en tête!

(https://fr.oncrawl.com/referencement/tout-ce-que-vous-devez-savoir-sur-lopen-graph/)

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
cybertaf    89
il y a une heure, CroqueWeb a dit :

 

Ce n'est toujours pas suffisant, en plus des balises Twitter, il manque la balise og image et la balise og type

Voici un exemple précis d'insertion de données Open Graph:

En effet ce sont les 4 balises  obligatoires... dans un premier temps la demande formulée par @Marie-Anne sera satisfaite dans la prochaine version cependant il est clair que pour être carré, il faut remplir les autres conditions.
Je peux prendre en compte immédiatement le type (website), mais pour l'image, je sèche, vous mettriez quoi ? la bannière ??

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
cybertaf    89
il y a une heure, cybertaf a dit :

En effet ce sont les 4 balises  obligatoires... dans un premier temps la demande formulée par @Marie-Anne sera satisfaite dans la prochaine version cependant il est clair que pour être carré, il faut remplir les autres conditions.
Je peux prendre en compte immédiatement le type (website), mais pour l'image, je sèche, vous mettriez quoi ? la bannière ??

Je m'auto cite...

Évidemment c'est une copie d'écran du site, je pense avoir une solution pour ça...

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • Contenu similaire

    • Par PeterRabbit
      Ce serait parfois pratique d'intégrer un bout de code PHP directement dans une page de son site. Mais comment faire ?
      Utiliser le bouton " {;} " affiche le code, mais il ne s'exécute pas. Quand on intègre du PHP dans le source (<>), TinyMCE le supprime avant même qu'on enregistre la page. Les solutions présentées sur le net, comme celle-ci, ne semblent pas fonctionner, contrairement à ce qui est affirmé.  
      Et pourtant, c'est possible :
       

       
       
      L'autre jour, j'ai eu une idée bête : et si on faisait un détour ? Peut-être que Tiny n’interpréterait plus le code ?
      Bingo ! Un détour par les templates, et ça marche... 
       
      Tutoriel 
      Créez un nouveau fichier dans "core/vendor/tinymce/templates" et nommez-le "phpinfo.php". Éditez-le pour ajouter le code PHP : <?php phpinfo(); ?> Éditez le fichier de configuration de Tiny "core/vendor/tinymce/init.js" et ajoutez le nouveau template à la ligne 86 (par exemple). { title: "Php info", url: baseUrl + "core/vendor/tinymce/templates/phpinfo.php", description: "Affiche la configuration de PHP." }, Éditez votre page et placez-le à l'endroit voulu (+ > Modèle) – il faudra sans doute vider le cache du navigateur (CRTL MAJ Suppr sur Chrome ou Firefox entre autres) pour qu'il s'affiche dans la liste déroulante des thèmes :   

       
       
      Et voilà ! vous savez tout de la configuration de votre PHP directement depuis votre site ! 
       
      PS : Quand j'ai présenté le plugin "template" de TinyMCE l'an dernier en vantant son intérêt, je ne pensais pas que ça irait aussi loin. Et il doit y avoir encore pas mal de choses à découvrir...
    • Par Marie-Anne
      Salut à tous  
       
      je suis en train de travailler sur mon dernier point : l'optimisation du chargement des fichier javascript.
      Dans le fichier core.php si je rajoute l'attribut "async" a ce niveau : 
      // Détermine le type d'import en fonction de l'extension de la librairie $vendorFiles = json_decode(file_get_contents($vendorPath . 'inc.json')); foreach($vendorFiles as $vendorFile) { switch(pathinfo($vendorFile, PATHINFO_EXTENSION)) { case 'css': echo '<link rel="stylesheet" href="' . helper::baseUrl(false) . $vendorPath . $vendorFile . '">'; break; case 'js': echo '<script async src="' . helper::baseUrl(false) . $vendorPath . $vendorFile . '" ></script>'; break; Tout fonctionne bien, ma page fonctionne normalement sur mobile et gagne en temps d'affichage, mais un problème se pose, mon éditeur tinymce ne se charge plus 
      Quelqu'un aurait il une solution ? 
      j'utilise la version de CroqueWeb : TinyMCE plus complet
       
      Merci d'avance 
       
    • Par dangee
      Si comme moi, vous avez besoin de rajouter des balises "non conventionnelles" (comme itemtype ou itemprop ;)), vous ne pourrez pas avec la configuration de base de TInyMce.
      Pour modifier cela, ouvrez le fichier init.js dans le répertoire /core/vendor/tinymce et ajoutez le code suivant après la langue.
      //valid extended_valid_elements: "*[*]", verify_html : false, cleanup : false, et voilà :))