Share
Les balises de deux sites Web ne sont pas égales. En tant que tel, il peut être difficile pour les plateformes de médias sociaux telles que Facebook de trouver la bonne information dans le contenu à afficher lorsque la page est partagée sur le fil d'actualité..
C’est là que l’Open Graph Protocol (OGP) entre en jeu; une initiative développée par Facebook qui lui permet de reconnaître facilement le contenu Web et de l'afficher correctement sur sa plateforme..
Examiner les éléments suivants:
Page rendue dans le flux Facebook, sans balises méta Open GraphCela nous donne un aperçu du contenu décent sur le fil Facebook, avec le titre ainsi que l'extrait. Si nous regardons le contenu de notre page de démonstration, cependant, quelques éléments supplémentaires pourraient être utilisés; tels que l'image et le nom de l'auteur. Facebook ne va pas ramasser ces détails sans aide.
Voyons comment utiliser Open Graph pour améliorer la présentation de notre contenu sur Facebook..
Open Graph spécifie un certain nombre de balises méta définissant les méta-informations du contenu, similaires aux balises méta que nous transmettons aux moteurs de recherche dans les pratiques de référencement courantes. Avant d’ajouter ces balises méta, nous devrons définir l’espace de noms XML pour Open Graph dans le html.
La conception de l’espace de nommage en HTML est similaire à celle d’autres langages Web; cela évite toute ambiguïté sur la structure de données. Il fait référence aux vocabulaires sémantiques ou à la syntaxe à utiliser lorsque l'espace de nom est présent dans le document. Dans notre cas, le og L’espace de nom fait référence au protocole Open Graph, alors que le fb namespace fait référence à la spécification Open Graph propre à Facebook.
Alternativement, nous pouvons utiliser le préfixe attribut pour définir ces espaces de noms. Par exemple:
Facebook nécessite quelques balises pour être présent à tout moment.
Tout d’abord, le type de contenu, spécifié par le og: type propriété. Sur la page d'accueil, nous définissons généralement la valeur sur site Internet.
Et communément mis à article pour le contenu.
Un certain nombre d’autres valeurs possibles peuvent également être définies dans og: type meta tag qui comprend produit, endroit, video.movie, books.book, et beaucoup plus si votre contenu n'est pas un article typique comme un article de blog ou des nouvelles.
Par exemple:
L'URL du contenu, spécifié avec le og: url propriété, doit contenir une URL absolue de la page Web sans chaîne de requête ni hachage, similaire à la canonique lien. Sur la page d'accueil, l'URL est l'URL de la page d'accueil:
L'URL du contenu sera un peu plus détaillé:
Le méta titre, spécifié avec le og: titre propriété, définit le titre de l'aperçu. La valeur du titre peut ne pas toujours correspondre au titre défini dans le Titre étiquette; vous pouvez choisir de modifier ou abréger le titre pour le partage.
Par exemple, le contenu de notre page concerne les CSS et s'intitule, pour les médias sociaux, «Learn CSS: The Complete Guide». Cependant, le titre du document est en fait “Open Graph Protocol - Tuts +”, ainsi:
Il n'y a pas de limite de caractères définie pour le og: titre, mais Facebook est connu pour tronquer les titres à l'occasion, en particulier pour le contenu partagé dans le fil de commentaire où l'espace est étroit.
Facebook tronque le titre et la description du contenu partagé sur le mur Facebook La méta description, spécifiée avec le og: description tag, fournit l'extrait de contenu partagé.
Facebook ne définit pas de limite de caractères ou de mots définie pour la description. Pourtant, Facebook tronquera la description quand il le jugera utile, alors gardez-la courte et attrayante..
La méta image est définie avec og: image, vous permettant de représenter visuellement le contenu, et la valeur ne doit pas toujours être une image dans le contenu. Utilisez la meilleure image pour inciter les lecteurs à cliquer et éventuellement à lire le contenu..
En plus de l'URL, vous pouvez également ajouter des balises méta spécifiant la taille et le type MIME de l'image. Ces balises META sont facultatives, mais elles contribueront à alléger la charge de travail de Facebook en matière d'analyse et de mise en cache de l'image..
La taille d'image minimale est limitée à 200x200 pixels, mais Facebook recommande une taille d'image de 1200x630 pixels pour un résultat optimal..
Petite vs grande image dans le contenu partagé de Facebook.Vous voudrez peut-être aussi prendre en compte le format de votre image:
“Essayez de garder vos images aussi proches que possible du format de l'image de 1.91: 1 pour afficher la totalité de l'image dans le fil d'actualité sans aucune découpe.” - Facebook Developers
Dans Facebook, ajouter l'identifiant de l'application Facebook avec fb: app_id La méta-tag est fortement encouragée. L'identifiant de l'application permettra à Facebook de relier votre site Web et de générer un aperçu complet de la manière dont les utilisateurs interagissent avec votre site Web et son contenu..
Vous pouvez l'ignorer, s'il n'est pas nécessaire d'analyser votre site Web..
Quelques méta-tags sont optionnels, mais s'avéreront utiles dans certains cas.
Le nom du site est spécifié avec le og: nom_site balise méta. Il définit le nom du site Web, ou plus précisément la marque de votre site Web. La marque ou le nom du site Web peut ne pas toujours être votre nom de domaine. Tuts +, dans ce cas, est un bon exemple.
Selon nos directives en matière de marque, cela devrait être écrit comme Tuts + au lieu de Tutsplus, mais tutsplus.com est le nom de domaine puisqu'un domaine ne peut contenir le + caractère, d'où:
Facebook ne montre pas ce nom de site sur le contenu partagé. Au lieu de cela, vous le trouverez sur la notification lorsque vous avez installé un plug-in de réseau social tel que Facebook Comment sur votre site Web..
Il existe un certain nombre de balises META liées au type de contenu spécifié. Comme on peut le supposer, ces étiquettes diffèrent en fonction de la valeur spécifiée dans og: type balise méta. Ici nous avons un article. Un article peut être accompagné de quelques balises méta, telles que article: auteur, article: published_time, article: éditeur, article: section, et article: tag.
Avant d'inclure ces balises méta, nous devrons ajouter un nouvel espace de nom pointant vers la spécification Open Graph Article. Donc, à ce stade, nous avons trois espaces de noms à savoir og, fb, et article.
Selon Facebook, le article: auteur La balise META doit contenir l'URL d'un profil Facebook ou l'ID de l'auteur de l'article..
L'ajout de plusieurs URL ou ID est autorisé dans le cas où plusieurs auteurs ont contribué à l'article..
Pointe: si l'auteur n'a pas de compte Facebook, vous pouvez remplacer article: auteur avec ce qui suit auteur balise META.
Facebook affichera le nom de l'auteur sur l'aperçu, comme suit.
Bien que Facebook suggère d’inclure des balises d’article telles que article: published_date et article: section ils n’ajoutent aucune signification au moment de la rédaction. Autrement dit, à moins que vous n'utilisiez une page d'article instantanée.
Comme mentionné, ces balises dépendent en grande partie de votre type de contenu. Si le type de contenu est video.movie, des balises plus appropriées seraient vidéo: acteur, vidéo: réalisateur, et vidéo: durée à la place du articles: published_date.
Pour cette raison, je laisserai cette partie d'Open Graph à votre charge. Facebook a fourni un matériel de référence complet sur ces balises méta, ainsi que quelques exemples d'extraits de code..
Open Graph a depuis été adopté par d'autres plates-formes de médias sociaux telles que Twitter (bien que Twitter possède également son propre balisage exclusif appelé Twitter Cards), Pinterest, LinkedIn et Google+ sous une forme ou une autre. Dans ce didacticiel, nous avons examiné quelques méta-balises Open Graph et les avons utilisées pour rendre notre aperçu du contenu plus attrayant..
Enfin, si votre contenu n'est pas rendu comme prévu, utilisez le débogueur de partage Facebook pour savoir ce qui ne va pas avec le balisage..
Accentsconagua