Dans cet article, nous examinerons un exemple précis de la façon d'implémenter le protocole Open Graph (micro-markup) pour les articles d'un site Web créé à l'aide du CMS Joomla 3. Nous parlerons des principales balises, préfixes et métadonnées de ce protocole, et parlons également des erreurs qui peuvent survenir pendant le processus de travail.
Balises de base du protocole Open Graph
Pour configurer le protocole Open Graph sur votre site Web, il vous suffit de connaître un petit ensemble de balises méta de base utilisées par ce protocole. À l'aide du protocole Open Graph, vous pouvez fournir une description d'un article, d'une musique, d'une vidéo et de certains autres objets. Mais avant de parler de divers objets, regardons à quoi peut ressembler un aperçu d'une page d'un site web sur les réseaux sociaux, notamment lors de la publication d'un post sur Facebook :
Regardons maintenant les principales balises utilisées dans la description de l'article, qui il faut ajouter exclusivement entre les balises d'en-tête du document:
- og:titre - grâce à cette balise nous pouvons transmettre le titre du post aux réseaux sociaux ;
- og:description - comme son nom l'indique, le tag sert à transmettre une brève description du message ; la longueur de la brève description ne doit pas dépasser 300 caractères ;
- og:type - indique le type d'objet, il peut s'agir d'un article, d'une musique, d'une vidéo, etc. Il n'y a pas tellement d'objets similaires dans le protocole Open Graph, et s'il y en a plusieurs sur une page, alors vous ne devez en indiquer qu'un seul, que vous considérez comme le principal ;
- og:url - l'adresse de la page qui servira d'identifiant permanent ;
- og:image - le tag est nécessaire pour indiquer l'image qui doit être prise lors de la création du post. Que doivent être les images, ou plutôt quelle taille est une question assez intéressante dont nous discuterons la prochaine fois ;
- og:nom_site - le nom du site (son nom) sur lequel sont affichées les mêmes informations sur l'objet.
Implémentation du protocole Open Graph dans Joomla 3
Passons maintenant à la pratique et essayons d'implémenter le protocole Open Graph dans notre site Web Joomla 3. Mais il y a un problème : toutes les pages du site sont générées dynamiquement, comme tout autre système de gestion de contenu, vous devez donc réfléchir à la manière de transférer les informations nécessaires vers le bloc de tête du document.
Comme toujours, l'option la plus simple pour résoudre ce problème, pour ainsi dire, consiste à utiliser des plugins spéciaux ( Graphique à ouverture facile , Graphique ouvert Phoca , Balises de graphique ouvert , Graphique ouvert mondial ). Mais pour être honnête, aucun des nombreux plugins que j'ai testés ne m'a impressionné, j'ai donc décidé de tout faire moi-même, ce que je vous conseille de faire.
Comment ajouter des données au bloc d'en-tête d'un document Joomla 3 ? La classe standard JDocument nous y aidera, avec l'aide de laquelle nous pouvons implémenter tout ce que nous voulons dans le bloc d'en-tête du document. Afin de ne pas tourner autour du pot, regardons tout de suite le code qu'il faut ajouter dans le fichier correspondant à la mise en page de l'article /components/com_content/views/article/tmpl/default.php , mais je vous conseille d'abord de créer un override (copier ce fichier dans le dossier /templates/template_name/html/com_content/article ). Vous trouverez plus d'informations à ce sujet dans l'article « Remplacer dans Joomla 3 ».
// Protocole Open Graph $document =& JFactory::getDocument(); if($this->item->metadesc == "") ($desc = strip_tags($this->item->introtext);) else ($desc = $this->item-> $document -> addCustomTag(" escape ($ this -> item -> title)."" /> image_fulltext."" /> article->créé."" /> élément->modifié."" /> ");
Le code n'est pas compliqué, dans un premier temps on déclare qu'on va utiliser la classe JDocument, puis en utilisant la méthode addCustomTag nous pouvons ajouter n'importe quoi à la section d'en-tête du document, dans notre cas, ce seront des balises méta Open Graph.
Je voudrais attirer une attention particulière sur la façon dont la description de la publication est formée, ici nous utilisons une certaine condition pour vérifier la présence de texte dans la balise méta description ; s'il n'y est pas, alors le texte d'introduction du matériel sera utilisé comme brève description de la page. La ligne de code suivante en est responsable :
If($this->item->metadesc == "") ($desc = strip_tags($this->item->introtext);) else ($desc = $this->item->metadesc;) //Description publications
Puis en utilisant la méthode addCustomTag Nous commençons à ajouter les informations nécessaires au protocole Open Graph en en-tête du document - titre, description, type d'objet, image, ainsi que la date de publication et de modification de l'article. De plus, faites attention à la propriété fb:app_id, il s'agit de l'identifiant de votre application (site, groupe) sur le réseau social Facebook, vous pouvez obtenir cet identifiant sur la page Outils et Support -> Mes Applications -> Ajouter une nouvelle application.
Vérification du balisage Open Graph
Une fois le micro-balisage Open Graph rempli et transféré dans la section d'en-tête du document, il est temps de vérifier l'exactitude de son fonctionnement. À ces fins, vous pouvez utiliser le validateur de micro-balisage de Yandex ou le débogueur de republication de Facebook.
Commençons par le « book face », insérons l'adresse de la page du site que nous souhaitons vérifier dans le champ approprié et cliquez sur le bouton « Debug ». Si tout est fait correctement, il ne devrait y avoir aucune erreur et le résultat devrait ressembler à ceci :
Faisons maintenant la même chose dans le validateur de micro-balisage de Yandex, mais ici, il s'est avéré que tout n'était pas si merveilleux, et J'ai une erreur qui dit :
ERREUR : préfixe article est inconnu du validateur, spécifiez-le explicitement avec un attribut préfixe
Cette chose ressemble à ceci :
De quel type d'attribut s'agit-il et pourquoi n'est-il pas connu du validateur ? Il s'est avéré que tout était simple, pour se débarrasser d'une telle erreur, il suffit d'indiquer explicitement à Yandex que nous utilisons le micromarquage Open Graph (protocole). Pour ce faire, vous devez trouver la balise HTML d'ouverture dans le fichier index de notre modèle :
Et remplacez-le par la ligne suivante :
Après cela, l'erreur dans le validateur Yandex disparaîtra. À propos, il peut y avoir des cas où Yandex n'aime pas le préfixe fb au lieu de l'article, auquel cas une ligne supplémentaire doit être ajoutée à la balise html fb : http://ogp.me/ns/fb# et ainsi de suite:
Problèmes avec les balises Open Graph en double
Si vous utilisez certains plugins sur un site Joomla 3, alors il y a une forte probabilité qu'ils insèrent leurs propres métadonnées du protocole Open Graph dans l'en-tête du document, même s'ils n'ont rien à voir avec ce protocole.
En particulier, j'ai pu découvrir que le plugin mAvik Thumbnails pour créer des aperçus d'images ajoute par défaut la balise og:image à l'en-tête du document, et la toute première image du corps de l'article, et sa copie réduite, est prise comme valeur. Vous pouvez le vérifier en regardant la capture d'écran des résultats de la vérification du micro-balisage dans le validateur Yandex (capture d'écran ci-dessus). De plus, personne ne semble lui demander d'ajouter cette même balise, mais il le fait néanmoins.
Bien sûr, ce n'est pas une erreur de la part du développeur du plugin, car cela sera peut-être utile à quelqu'un, mais je préfère quand même m'en débarrasser. Ainsi, pour supprimer la balise méta og:image répétée, il vous suffit d'apporter de petites modifications aux paramètres du plugin mAvik Thumbnails. Pour ce faire, dans l'onglet « Contexte », vous devez définir le commutateur « Ajouter une balise méta og:image » sur la position « Ne pas ajouter », après quoi la balise méta og:image en double sera supprimée :
Ceci termine le balisage de la page (en particulier le matériel Joomla) à l'aide du protocole Open Graph. Comme vous pouvez le constater, il n'y a rien de compliqué ici et il n'est pas nécessaire d'utiliser des plugins supplémentaires dont on ne sait pas encore ce qu'ils peuvent ajouter au code des pages.
Le réseau social VKontakte n'accepte pas une brève description (description)
Une fois Open Graph implémenté, tout le monde remarquera probablement une fonctionnalité désagréable lors de la publication de publications sur le réseau social VKontakte. Le fait est que ce réseau particulier, lors de la création d'un aperçu (extrait), refuse obstinément d'inclure dans la brève description de l'article spécifié dans le champ de description. Tous les autres réseaux sociaux les réseaux le font, mais VKontakte refuse.
Pour comprendre la raison de ce phénomène, j'ai décidé de poser une question au service support, à laquelle j'ai reçu une réponse tout à fait intelligible :
Depuis l’automne de l’année dernière, les extraits de code n’ont plus de description. Il s'agit d'une décision consciente de la part des développeurs ; évidemment lié à des compromis en matière de conception Web et de problèmes d'interface. À leur avis, aucun texte significatif n’y était presque jamais placé ; une telle description n’avait aucun sens.
Il s'avère que VKontakte a délibérément cessé de prendre de courtes descriptions dans ses extraits depuis l'automne 2016. C'est bien sûr dommage, mais que faire ? Alors si vous constatez un problème similaire, sachez que ce n'est pas de votre faute, mais de certaines interdictions de la part du réseau social.
En conclusion, je voudrais souligner qu'en plus du protocole Open Graph, il existe de nombreux autres formats de microdonnées, notamment Schema.org, dont nous avons parlé dans l'article «
Facebook est l'un des principaux outils de retour d'information des visiteurs du site et, bien sûr, un outil de promotion de toute ressource. Boutons "Partager" Et "Comme" vital pour votre ressource. Mais le type d’informations que le robot doit collecter n’est pas clair. Chaque site est différent dans sa structure et que serait un robot Facebook Je n'ai pas analysé le matériel au hasard, il y a un protocole Ouvrir graphique. De quoi s’agit-il et en quoi facilite-t-il la vie des robots et des webmasters ?
Je vais vous montrer un exemple clair pour expliquer pourquoi vous devez mettre Ouvrir graphique Pour Facebook dans la section tête Joomla. Voici à quoi ressemble le matériel sans entrées spéciales :
Et voici à quoi cela ressemble avec tous les enregistrements de méta-propriétés nécessaires. Comme il existe de nombreux enregistrements, certaines des balises de protocole de méta-propriété répertoriées Ouvrir graphique qui seront dans cet article ne sont pas vraiment nécessaires pour Facebook, mais ils sont obligatoires pour les autres réseaux sociaux.
La structure du balisage de sortie d'un composant est très simple :
/templates/html/component_name/view_name/markup_filename.php Regardons des exemples. Si nous voulons écraser le balisage par défaut pour la sortie de l'article, nous devons d'abord copier ce fichier : /components/com_content/views/article/tmpl/default.php à cet emplacement, en créant les répertoires appropriés au cas où ils n'existeraient pas déjà : /templates/template_name/html/com_content/article/default.php Dans le fichier default.php après ce bloc : /** * @package Joomla.Site * @subpackage com_content * * @copyright Copyright (C) 2005 - 2015 Open Source Questions, Inc. Tous droits réservés. * @license Licence publique générale GNU version 2 ou ultérieure ; voir LICENSE.txt */ défini("_JEXEC") ou mourir ; JHtml::addIncludePath(JPATH_COMPONENT . "/helpers"); // Crée des raccourcis vers certains paramètres. $params = $this->item->params ; $images = json_decode($this->item->images); $urls = json_decode($this->item->urls); $canEdit = $params->get("access-edit"); $user = JFactory::getUser(); $info = $params->get("info_block_position", 0); JHtml::_("behaviour.caption");
Ajoutez le code suivant :
//OpenGraph start $datepubl = $this->item->created; if (isset($images -> image_intro) et !empty($images -> image_intro)) ( $timage = htmlspecialchars(JURI:: root().$images -> image_intro); ) elseif (isset($images -> image_fulltext) et !empty($images -> image_fulltext)) ( $timage = htmlspecialchars(JURI:: root().$images -> image_fulltext); ) else ( $timage = "default_logo.jpg"; ) $document =& JFactory::getDocument(); if($this->item->metadesc == "") ($mmd = strip_tags($this->item->introtext);) else ($mmd = $this->item->metadesc;) $document - > addCustomTag(" escape($this -> item -> title).""/> "); //Fin d'OpenGraph
Comme vous pouvez le constater, tout est simple. Les images sont affichées selon le principe suivant : s'il n'y a pas d'image pour la partie d'introduction du matériel, une image du matériel complet est affichée, s'il n'y en a pas, alors la photo par défaut est prise. Il faut l'indiquer en le remplaçant par le vôtre dans la ligne
$timage = "logo_default.jpg";
La balise principale « og:description » est générée comme suit : s'il n'y a pas de balises méta description complétées pour l'article, alors le texte d'introduction du matériel est pris.
Après toutes ces opérations, nous pouvons vérifier si nous avons tout fait correctement, l'outil nous y aidera
Solution de protocole Open Graph for Joomla est un composant pionnier de Joomla, qui permet un contrôle total sur le contenu des sites Joomla, pour tous les types de paramètres Open Graph Protocol.
Pour le moment, la version d'extension vous permet de travailler avec Joomla 2.5 et 3.6x.
Travailler avec le contenu de divers sites est une priorité pour tous les propriétaires. Ignorer ce point ne vous permettra pas d'augmenter le classement des moteurs de recherche dans divers environnements, ce qui peut affecter négativement le trafic du site, ainsi que l'aspect financier du problème. Si vous souhaitez connaître les problèmes existants de votre site, vous pouvez rechercher des erreurs sur le site afin de les détecter et de les éliminer en temps opportun.
Depuis que le volume de données sur les sites sociaux et les sites Web2.0 a commencé à augmenter, la technologie Open Graph Protocol a occupé l'une des places importantes dans la gestion. Open Graph Protocol (OGP) permet au développeur ou aux propriétaires de sites Web d'intégrer leur site/pages/publications au trafic social. Grâce à OGP, une grande quantité d'informations peut être transférée, comme le titre, la description, l'image, les balises de géolocalisation, l'auteur, etc. OGP est devenu une entité importante pour rendre vos pages plus conviviales pour les réseaux sociaux.
Open Graph Protocol Solution, une fois installée, ajoute une icône OGP au bas de l'éditeur d'articles dans le backend Joomla, où vous pouvez saisir les balises OGP. Ce composant offre également la possibilité de lister tous les articles pour une meilleure gestion des balises d'articles OGP.
Nous listons les principales capacités d'extension :
options de base
- Possibilité de supprimer les fenêtres pop-up ;
- Supprimer RSS ;
- Prise en charge de la fonction de suppression Ajax.
Composants pris en charge :
- ComContent (gestionnaire d'articles) ;
- K2 (Comk2);
- Contenu flexible (ComFlexicontent) ;
- Marché virtuel (ComVirtuemart) ;
- Catalogue DJ (Catalogue Comdj);
- Zoo (ComZoo);
- Activation ou désactivation de tout composant par l'administrateur ou d'une partie du frontend séparément ;
- Possibilité de configurer les fonctions d'administration pour les balises ouvertes par défaut.
Malheureusement, il existe très peu d'informations sur cette question sur Internet, notamment sur RuNet. Tout ce que Google peut nous offrir pour résoudre le problème de l'insertion du protocole open graph dans Joomla ? Ce sont quelques plugins qui vous permettent d'insérer vos propres balises méta et head. L'un des plus populaires est ITP Meta. Le principe de fonctionnement de sa version gratuite est étrange, c’est un euphémisme. Après avoir créé un article, vous devez écrire des balises méta séparément pour chaque matériau. Ne voulant pas supporter un travail aussi routinier, je vous propose d'utiliser ma méthode.
Donc, tout d'abord, pour expliquer clairement pourquoi vous devez installer le protocole Open Graph pour Facebook dans la tête de Joomla. Voilà à quoi ressemble le matériau sans notes particulières.
Et voici à quoi cela ressemble avec toutes les entrées nécessaires. Par essentiel, j'entends basique. Comme il existe de nombreux enregistrements, certaines des étiquettes de viande répertoriées du protocole Open Graph qui figureront dans cet article ne sont pas vraiment nécessaires à Facebook, mais elles sont requises, par exemple, pour Pinterest.
Ajout du protocole Open Graph à Joomla
- Allons ici : /components/com_content/views/article/tmpl
- Ouvrez le fichier : par défaut.php
- Ensuite, recherchez la 14ème ligne avec le commentaire : // Crée des raccourcis vers certains paramètres.
- Ensuite, vous devez définir une variable pour la date de création de l'article. Pour ce faire, ajoutez la ligne suivante n'importe où dans la liste des variables. En conséquence, une nouvelle variable devrait apparaître $datepubl. Par exemple, voici comment cela fonctionne pour moi.
Comme vous pouvez le constater, tout est simple. Quant aux images, l'ordre suivant suit : s'il n'y a pas d'image pour la partie introductive du matériel, une photo de l'ensemble du matériel est prise, si elle n'est pas disponible, alors le logo du site est pris. Bien entendu, vous devez l'indiquer en le remplaçant par le vôtre dans la ligne "http://komarovdesign.com/images/logo_12x.png"
Ensuite, vous devez également rédiger manuellement la description de votre site dans la ligne « og:site_name ». Précisez l'auteur de l'article "article:auteur". Dans la ligne "fb:admins", vous devez saisir l'identifiant de votre profil Facebook.
Si vous le lisez attentivement, vous remarquerez qu'il n'y a pas de balise principale « og:description » ; elle est ajoutée dans un autre fichier.
- Allons ici : bibliothèques/joomla/document/html/renderer/
- Ouvrez le fichier : head.php
- Nous recherchons environ la 106ème ligne avec le commentaire : // N'ajoute pas de descriptions vides
- Et après le principal description insérez la balise méta du protocole Open Graph. Le résultat devrait être le suivant.
Malheureusement, il existe très peu d'informations sur cette question sur Internet, notamment sur RuNet. Tout ce que Google peut nous offrir pour résoudre le problème de l'insertion du protocole open graph dans Joomla ? Ce sont quelques plugins qui vous permettent d'insérer vos propres balises méta et head. L'un des plus populaires est ITP Meta. Le principe de fonctionnement de sa version gratuite est étrange, c’est un euphémisme. Après avoir créé un article, vous devez écrire des balises méta séparément pour chaque matériau. Ne voulant pas supporter un travail aussi routinier, je vous propose d'utiliser ma méthode.
Donc, tout d'abord, pour expliquer clairement pourquoi vous devez installer le protocole Open Graph pour Facebook dans la tête de Joomla. Voilà à quoi ressemble le matériau sans notes particulières.
Et voici à quoi cela ressemble avec toutes les entrées nécessaires. Par essentiel, j'entends basique. Comme il existe de nombreux enregistrements, certaines des étiquettes de viande répertoriées du protocole Open Graph qui figureront dans cet article ne sont pas vraiment nécessaires à Facebook, mais elles sont requises, par exemple, pour Pinterest.
Ajout du protocole Open Graph à Joomla
- Allons ici : /components/com_content/views/article/tmpl
- Ouvrez le fichier : par défaut.php
- Ensuite, recherchez la 14ème ligne avec le commentaire : // Crée des raccourcis vers certains paramètres.
- Ensuite, vous devez définir une variable pour la date de création de l'article. Pour ce faire, ajoutez la ligne suivante n'importe où dans la liste des variables. En conséquence, une nouvelle variable devrait apparaître $datepubl. Par exemple, voici comment cela fonctionne pour moi.
Comme vous pouvez le constater, tout est simple. Quant aux images, l'ordre suivant suit : s'il n'y a pas d'image pour la partie introductive du matériel, une photo de l'ensemble du matériel est prise, si elle n'est pas disponible, alors le logo du site est pris. Bien entendu, vous devez l'indiquer en le remplaçant par le vôtre dans la ligne "http://komarovdesign.com/images/logo_12x.png"
Ensuite, vous devez également rédiger manuellement la description de votre site dans la ligne « og:site_name ». Précisez l'auteur de l'article "article:auteur". Dans la ligne "fb:admins", vous devez saisir l'identifiant de votre profil Facebook.
Si vous le lisez attentivement, vous remarquerez qu'il n'y a pas de balise principale « og:description » ; elle est ajoutée dans un autre fichier.
- Allons ici : bibliothèques/joomla/document/html/renderer/
- Ouvrez le fichier : head.php
- Nous recherchons environ la 106ème ligne avec le commentaire : // N'ajoute pas de descriptions vides
- Et après le principal description insérez la balise méta du protocole Open Graph. Le résultat devrait être le suivant.