création de site internet

flus RSS du blogsur Facebooksur Twitter
créateur de mot de passe

Générateur de mot de passe

Créez un mot de passe sécurisé

10
07

Personnaliser ses liens sur les réseaux sociaux

dans Outils

Avec la généralisation des réseaux sociaux Facebook et Twitter, il est important de considérer la visibilité et le traffic que peuvent vous apporter ces médias. La toute première étape consiste donc à définir votre communication sur ces réseaux en personnalisant l'affichage de liens vers vos pages, lorsqu'ils sont repris sur un mur Facebook ou dans un tweet.

L'intérêt est de pouvoir mettre en avant ces liens grâce à une image, un titre et du contenu personnalisé et enrichi. La publication attire ainsi plus facilement l'attention de l'internaute.

Facebook et l'Open Graph Protocol

Facebook utilise l'Open Graph Protocol pour enrichir l'intégration des liens dans ses services. Ainsi, lors qu'un internaute partage un lien vers une de vos pages, ou clique sur le bouton "J'aime" présent dessus, les informations affichées sur son mur seront celles qui auront été déclarées dans votre page. Si rien n'est déclarée, Facebook se basera sur les informations de votre document HTML.

La déclaration des différentes entitées permet de personnaliser certaines données telles que le titre de la page (og:title), le type de contenu (og:type), la description (og:description), le visuel associé (og:image), l'url (og:url), ... Elle se matérialise en intégrant des balises <meta> dans le <head> de votre structure HTML. Par exemple pour cette page voilà ce que je pourrais définir pour ces informations :

<meta property="og:title" content="Personnalisez ses liens sur les réseaux sociaux" />
<meta property="og:type" content="article" />
<meta property="og:description" content="Facebook et Twitter vous permettent de mettre en avant les liens vers vos pages qui sont publiés sur leurs services." />
<meta property="og:url" content="http://blog.alexis-ragot.com/personnaliser-liens-sur-facebook-twitter" />
<meta property="og:image" content="http://blog.alexis-ragot.com/images/generique.jpg" />

Facebook propose un utilitaire permettant de contrôler la bonne syntaxe de votre déclaration, le Facebook URL Linter. De manière détournée, cet outil permet également de rafraîchir les informations de votre page dans le cache Facebook.

De nombreuses autres propriétés sont paramétrables (localisation, coordonnées de contact, vidéo, ...). La liste complète est disponible dans la documentation sur l'Open Graph Protocol de la plate-forme Facebook Developers.

Les Twitter Card

Sur le même principe que Facebook, Twitter propose de personnaliser les liens vers vos pages repris dans les tweets. A l'affichage du tweet, les informations déclarées seront mises en avant.

Comme pour l'Open Graph de Facebook, il suffit de déclarer différentes balises <meta>. Il faut tout d'abord définir le type de Twitter Card : summary pour présenter un résumé du contenu de la page, photo pour afficher un visuel et player pour afficher un lecteur multimédia.

Concentrons-nous sur la Twitter Card au format summary :

<meta name="twitter:card" content="summary" />

Basiquement, on peut personnaliser le titre de la page (twitter:title), la description (twitter:description), le visuel associé (twitter:image) et l'url (twitter:url). Ainsi pour cette page nous aurions :

<meta property="twitter:title" content="Personnalisez ses liens sur les réseaux sociaux" />
<meta property="twitter:description" content="Facebook et Twitter vous permettent de mettre en avant les liens vers vos pages qui sont publiés sur leurs services." />
<meta property="twitter:url" content="http://blog.alexis-ragot.com/personnaliser-liens-sur-facebook-twitter" />
<meta property="twitter:image" content="http://blog.alexis-ragot.com/images/generique.jpg" />

Il est également possible d'indiquer le profil Twitter de l'auteur de la page :

<meta property="twitter:creator" content="@alexisragotcom" />

Toutes les propriétés disponibles et les autres formats de Twitter Card sont expliquées sur la page dédiée de la plate-forme Twitter Developers.

A noter que pour l'instant cette fonctionnalité n'est pas encore ouverte à tous et nécessite de s'inscrire en tant que partenaire du programme.

Partager :