Les métabalises essentielles pour les médias sociaux
De nos jours, presque tous les sites Web encouragent les visiteurs à partager leurs pages sur les médias sociaux. Nous avons tous vu les icônes Facebook et Twitter omniprésentes, entre autres, qui ne demandent qu’à être cliquées. Cela n’a rien de surprenant, car le partage via les médias sociaux, l’incarnation sur internet du bouche-à-oreille, est l’un des moyens les plus efficaces pour les entreprises et les particuliers de se faire connaître.
Lorsque les utilisateurs choisissent de partager ces liens, il revient au développeur web de s’assurer que les pages web associées sont correctement préparées, ce que nous allons examiner maintenant. Facebook et Twitter sont, de loin, les plateformes de médias sociaux les plus populaires, alors concentrons-nous sur ces deux-là.
Le partage sur Facebook et Twitter
Facebook offre aux développeurs diverses options sur la façon dont une page web partagée apparaît dans sa timeline en fonction du contenu du site web. Sauf indication contraire, chaque site web est par défaut du type appelé, comme il se doit, « site web », qui est l’exemple que nous utiliserons.
Disons que quelqu’un a partagé la page d’accueil d’une société de voyage fictive – Facebook l’affiche comme ceci :
Twitter, également, a plusieurs façons de mettre en forme les pages web partagées qui apparaissent dans son flux, mais nous allons nous intéresser à celle qui est assez similaire à l’exemple ci-dessus de Facebook, que Twitter appelle la « carte de résumé avec grande image » :
Comme on peut le voir, chacune présente plusieurs attributs de la page Web partagée :
- une image et un titre proéminents
- une description
- le nom de domaine
Propriété <meta> Tags
Comment spécifier ces attributs ? Avec les balises <meta>. Lorsqu’un lien est partagé, Facebook et Twitter scrape la page Web associée et lit ses balises <meta> pour afficher les informations appropriées.
Facebook utilise les balises <meta> en tirant parti du protocole Open Graph, un système de classification des pages Web qui va au-delà des balises <meta> déjà définies dans HTML5. Une liste complète des balises <meta> disponibles se trouve sur le site Web Open Graph. Il y en a tellement parmi lesquelles choisir que cela peut être quelque peu intimidant, mais seulement quatre sont réellement nécessaires :
<meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm">Twitter a ses propres balises <meta> qui sont similaires au protocole Open Graph, mais utilise le préfixe « twitter » au lieu de « og ». Comme pour Facebook, seules quelques balises sont nécessaires. Le type de format d’affichage que nous demandons à Twitter est également précisé :
<meta name="twitter:title" content="European Travel Destinations "><meta name="twitter:description" content=" Offering tour packages for individuals or groups."><meta name="twitter:image" content=" http://euro-travel-example.com/thumbnail.jpg"><meta name="twitter:card" content="summary_large_image">Facebook et Twitter proposent tous deux des directives sur la manière d’utiliser les balises <meta> ci-dessus. Elles sont assez similaires les unes aux autres, même si leur interprétation peut être quelque peu subjective. Notez que, pour nos besoins, Facebook fait référence à la page Web partagée lorsqu’il utilise le terme « objet » :
| Titre | Le titre, titre ou nom de l’objet. | Un titre concis pour le contenu associé. |
| Description | Une courte description ou un résumé de l’objet. | Une description qui résume de manière concise le contenu comme il convient pour la présentation dans un Tweet. Vous ne devez pas réutiliser le titre comme description ou utiliser ce champ pour décrire les services généraux fournis par le site Web. |
| Image | L’URL de l’image de votre objet. Elle doit être d’au moins 600×315 pixels, mais 1200×630 ou plus est préférable (jusqu’à 5 Mo). Restez proche d’un rapport d’aspect de 1,91:1 pour éviter le recadrage. | Une URL vers une image unique représentant le contenu de la page. Vous ne devez pas utiliser une image générique telle que le logo de votre site Web, la photo de l’auteur ou une autre image qui s’étend sur plusieurs pages. Les images pour cette carte doivent avoir au moins 280px de largeur, et au moins 150px de hauteur. La taille de l’image doit être inférieure à 1 Mo. |
| URL | L’URL canonique de votre page. Il doit s’agir de l’URL non décorée, sans variables de session, paramètres d’identification de l’utilisateur ou compteurs. |
Puisque ces balises propriétaires <meta> font, en fin de compte, référence aux mêmes éléments, il serait idéal s’il existait en quelque sorte un moyen de concilier les deux. Heureusement, il y en a un.
Concilier les balises <meta>
Il n’y a aucun mal à avoir plusieurs balises <meta> qui semblent redondantes. Trop d’informations n’ont jamais fait de mal à personne, sauf en ajoutant quelques octets supplémentaires au fichier HTML.
Mais pour nos besoins, et dans un souci de concision, nous pouvons tirer parti du fait que Twitter nous permet de substituer les balises Open Graph <meta> aux siennes. Au final, à l’exception de la nécessité de spécifier un format d’affichage, aucune des balises <meta> personnalisées de Twitter n’est nécessaire. Cela nous donne ce qui suit, qui pourrait être considéré comme le strict minimum de balises <meta> nécessaires pour qu’une page Web se prête au partage sur les médias sociaux :
<meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm"><meta name="twitter:card" content="summary_large_image">Reconcilier les directives pour l’image est simple : suivre la recommandation de Facebook d’une dimension minimale de 1200×630 pixels et d’un rapport d’aspect de 1.91:1, mais adhérer à l’exigence de Twitter en matière de taille de fichier, à savoir moins de 1 Mo.
Validation de <meta> Balises
En cas de doute sur la légitimité de la paration à ces cinq balises, nous pouvons utiliser les utiles Facebook Sharing Debugger et Twitter Card Validator. Ces deux outils analyseront n’importe quelle page Web hébergée sur un serveur public à la recherche de balises <meta> pertinentes et afficheront l’aspect qu’elle aurait si elle était partagée. Il répertoriera également les erreurs éventuelles et fournira des suggestions. Comment nous en sommes-nous tirés avec notre exemple particulier ? Twitter semble s’accommoder des choses, mais Facebook, en revanche, liste un élément comme un avertissement :
Cela nous fournit une parfaite transition pour parler de…
Analyse des médias sociaux
Ce que Facebook indique, c’est que si vous voulez utiliser leur outil d’analyse, qu’ils appellent Domain Insights, vous devez fournir le numéro d’identification unique associé à votre compte. La balise <meta> ressemblerait alors à quelque chose comme ceci:
<meta property="fb:app_id" content="your_app_id" />Twitter a quelque chose de similaire qu’ils appellent Twitter Card Analytics. Pour tirer le meilleur parti de cet outil, Twitter recommande d’utiliser la balise suivante <meta> qui contient le nom d’utilisateur Twitter que vous voulez associer à la page Web partagée :
<meta name="twitter:site" content="@website-username">N’oubliez pas, cependant, que si vous n’avez aucun intérêt particulier à utiliser ces outils analytiques, l’omission des deux balises <meta> ci-dessus n’a aucun effet sur la façon dont une page Web partagée apparaît sur une timeline Facebook ou un fil Twitter.
Autre chose?
La documentation de Facebook recommande une balise supplémentaire <meta>, bien qu’elle ne soit pas obligatoire. Une balise <meta> qui désigne le nom du site Web dans lequel réside la page partagée :
<meta property="og:site_name" content="European Travel, Inc.">Twitter suggère également une autre balise <meta> qui est recommandée, mais pas obligatoire :
<meta name="twitter:image:alt" content="Alt text for image">Ceci fournit une description alternative de l’image pour les personnes malvoyantes.
Marquage final
Cela devrait suffire. Pour réitérer, lorsque vous regardez la documentation de Facebook et Twitter pour le partage de pages Web, il existe de nombreuses autres balises <meta> disponibles qui peuvent être utilisées pour spécifier différents types de contenu. Mais, en général, ce qui suit suffira:
<!-- Essential META Tags --><meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm"><meta name="twitter:card" content="summary_large_image"><!-- Non-Essential, But Recommended --><meta property="og:site_name" content="European Travel, Inc."><meta name="twitter:image:alt" content="Alt text for image"><!-- Non-Essential, But Required for Analytics --><meta property="fb:app_id" content="your_app_id" /><meta name="twitter:site" content="@website-username">.