Aller au contenu
Support de Zwii
  • 0
Marie-Anne

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

Question

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

Messages recommandés

  • 0

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

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
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
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
  • 0

Extrait de la dernière 8.3.14 :

	/**
	 * Affiche le meta titre
	 */
	public function showMetaTitle() {
		echo '<title>' . $this->core->output['metaTitle'] . '</title>';
		echo '<meta property="og:title" content="' . $this->core->output['metaTitle'] . '" />';
	}

	/**
	 * Affiche la meta description
	 */
	public function showMetaDescription() {
		echo '<meta name="description" content="' . $this->core->output['metaDescription'] . '" />';
		echo '<meta property="og:description" content="' . $this->core->output['metaDescription'] . '" />';
	}

	/**
	 * Affiche le type
	 */
	public function showMetaType() {
		echo '<meta property="og:type" content="website" />';
	}

Je pense que ce n'est pas la bonne méthode, je te rappelle qu'il manque encore d'autres balises, comment feras-tu ? Tu ajoutes une 2ème méthode, puis une 3ème pour Og:site_name ? (par ex.)

A mon sens le mieux est de regrouper ces meta balises dans une seule méthode, comme ceci :

	/**
	 * Affiche le meta titre
	 */
	public function showMetaTitle() {
		echo '<title>' . $this->core->output['metaTitle'] . '</title>';
	}

	/**
	 * Affiche la meta description
	 */
	public function showMetaDescription() {
		echo '<meta name="description" content="' . $this->core->output['metaDescription'] . '">';
	}

	/**
	 * Affiche les meta balises pour l'open graph
	 */  
	public function showOGmeta() {
	echo '<meta property="og:title" content="' . $this->core->output['metaTitle'] . '">';
	echo '<meta property="og:description" content="' . $this->core->output['metaDescription'] . '">';
	echo '<meta property="og:type" content="website">';
	}

Méthode à laquelle il faudra ajouter l'image et éventuellement le nom du site.

Puis renseigner les fichiers correspondants dans layout avec :
 

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

 

Ce sera plus clair, ça permettra à qui le veut d'ajouter manuellement d'autres balises OG sans trop se perdre dans le code source entre <head> et </head> tout en libérant les balises html obligatoires, et ça laissera la possibilité de choisir de mettre son site en relation avec Facebook, ou pas. C'est plus qu'une option, c'est une liberté.

 

 

 

 

 

 

 

 

 

 

 

 

 

Partager ce message


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

ça avance à grand pas

Ben tiens, justement vu que tu passes dans le coin, que penses-tu de cette avancée, en l'état des débats ?

  • Merci 1

Partager ce message


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

Ben tiens, justement vu que tu passes dans le coin, que penses-tu de cette avancée, en l'état des débats ?

Je trouve cela à la fois instructif car ça me remet en route sur l'apprentissage du codage et aussi que sa lancée de nouveaux défis pour Zwii. 

L'optimisation et toujours d'actualité :)

Comme je l'ai déjà dis, Zwii à un très bon support. 

Demain matin je mettrais tout ça à jour :innocent:

Modifié par Marie-Anne
  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0

Merci Cybertaf, je modifie juste les fichiers à la main sur la version stable, cela n'engendre rien comme ça.
Avec les sauvegardes pas de soucis.
En attente d'une future mise à jour ^^ les balises Open Graph FB et Tweet servent surtout pour partager le contenu de site professionnel, un petit plus ^^
Mais il est vrai qu'un module Open Graph serait plus utile comme ça les personnes choisiront si ça leur sert ou pas.

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
Il y a 1 heure, Marie-Anne a dit :

Mais il est vrai qu'un module Open Graph serait plus utile comme ça les personnes choisiront si ça leur sert ou pas.

 

Tout à fait, @Marie-Anne ! Il va d'ailleurs falloir que je me renseigne sur ce truc – histoire de ne pas mourir ignare. :$

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
il y a 53 minutes, PeterRabbit a dit :

 

Tout à fait, @Marie-Anne ! Il va d'ailleurs falloir que je me renseigne sur ce truc – histoire de ne pas mourir ignare. :$

A chaque fois qu'un site ou une page est partagé, ces balises permettent de rendre le partage correctement formaté avec une capture d'écran, etc...

On peut donc dire qu'elles sont intrinsèquement indispensables pour tout partage sur un réseau social effectué par un visiteur.

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0

C'est bien ce que je pensais. Je ne partage que du concret (des carottes ou l'équivalent) et je ne fréquente absolument pas les réseaux sociaux. Donc, pour moi, ce serait mieux sous la forme d'un module. Mais bon...

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
il y a 42 minutes, PeterRabbit a dit :

C'est bien ce que je pensais. Je ne partage que du concret (des carottes ou l'équivalent) et je ne fréquente absolument pas les réseaux sociaux. Donc, pour moi, ce serait mieux sous la forme d'un module. Mais bon...

 

Imagine que l'un de tes visiteurs partage ta page... au lieu d'avoir un lien tout pourri, le site s'affiche proprement.

 

De toute façon, ça n'enlève rien à l'usage courant, mais ça importe pour les développeurs Web qui cherchent du trafic.

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
il y a 1 minute, PeterRabbit a dit :

OK, @cybertaf, je suis convaincu même si je n'ai qu'une très vague idée du partage dont tu parles. Pour résumer, même si on vit au fond de son terrier, il faut prendre en compte du train où le monde va. :mrgreen:

 

En effet :)

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0

J'ai mis en ligne une version dev 8.3.14g qui prend en compte le dernier tag celui de la copie d'écran du site.
Ça fonctionne comme ça : lorsqu'on accède aux paramètres du site, si le script ne trouve pas l'image screenshot.png dans le dossier site, il génère une copie d'écran dans le bon format. Cette copie d'écran est réalisée sur la base d'un appel à un utilitaire Google.

Pour rafraîchir cette copie d'écran on l'efface et on accède à la page des paramètres, j'avais ajouté un bouton mais un truc cloche que je n'ai pas identifié.
Enjoy...
 

 

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
Il y a 1 heure, Marie-Anne a dit :

Hello

Eh ben ^^ je vais m'amuser avec ça aussi :mrgreen:

Super, n'oublie pas que c'est une version de test, réalise bien une copie de sauvegarde du dossier site.

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0

Encore moi, je viens de faire une modif, j'ai révoqué la clé API, le numéro de version est toujours le même.

 

Tu peux aussi remplacer le core.php parce que la version de cette nuit ne va plus fonctionner.

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à cette question…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


  • Contenu similaire

    • Par Fred
      Comme promis :
       
      Bientôt je vous parlerai de deux éditeurs php, vscodium et brackets avec les infos de config.
    • Par Fred
      Cette archive contient le serveur Web Laragon avec
      Apache 2.4.39 Php 7.3.2 Les avantages :
      Portable il fonctionne sans aucune installation, sur disque ou clé externe ou interne
      On peut passer d'une version de php à l'autre facilement
      Configuration stricte de l'affichage des erreurs, idéal pour le dév
      Utilisation :
      Décompressez
      Placez le dossier Laragon dans le bon lecteur
      Cliquez sur Laragon.exe
      Validez les fenêtres du pare-feu
      Cliquez sur web pour afficher Localhost
      Cliquez sur Dossier www pour le dossier web
    • Par Fred
      Serveur Web Laragon
      Voir le fichier Cette archive contient le serveur Web Laragon avec
      Apache 2.4.39 Php 7.3.2 Les avantages :
      Portable il fonctionne sans aucune installation, sur disque ou clé externe ou interne
      On peut passer d'une version de php à l'autre facilement
      Configuration stricte de l'affichage des erreurs, idéal pour le dév
      Utilisation :
      Décompressez
      Placez le dossier Laragon dans le bon lecteur
      Cliquez sur Laragon.exe
      Validez les fenêtres du pare-feu
      Cliquez sur web pour afficher Localhost
      Cliquez sur Dossier www pour le dossier web
      Contributeur Fred Soumis 02/07/2019 Catégorie Modifications et astuces  
×
×
  • Créer...