TutorielsLes balises meta indispensables pour le partage sur les réseaux sociaux

Les balises meta indispensables pour le partage sur les réseaux sociaux

Lorsque quelqu’un partage l’une de vos pages sur Facebook, twitter ou encore Google+, par défaut, le réseaux social ne charge pas toujours les bonnes informations, et surtout il partage la première image qu’il trouve sur la page. Cette image partagée est souvent votre logo, la petite flèche que vous avez mis pour indiquer au visiteurs de descendre sur la page, ou encore l’image d’entête. Quoi qu’il en soit, ce n’est pas la bonne image.

Chaque réseaux social a besoin de balises meta spécifiques pour lire et afficher les informations. Nous allons donc voir ensemble comment optimiser les titres, descriptions et images de chaque page afin d’apparaître de manière correctement formatée dans les flux sociaux.

Cela aide également le SEO puisque les bonnes données, associés à des images optimisées, permettent au contenu d’être partagé plus facilement, ce qui augmente le nombre de liens et de mentions vers les pages de contenu.

Ce qui va suivre doit être fait pour toutes les pages que vous souhaitez optimiser. Inutile de faire cela sur la page des mentions légales donc, c’est compris Régis ?

 

Les balises meta indispensables pour le partage sur les réseaux sociaux

Introduction

Normalement, les balises meta devraient être placées directement dans le fichier html, juste après celles générées automatiquement par WebAcappella Responsive lorsque vous remplissez les champs SEO prévus à cet effet. Le problème est que si vous faites cela et qu’après vous modifiez votre site puis que vous republiez, les balises meta ajoutées disparaitrons.

Il y a donc 2 solutions, soit votre site, une fois terminé ne bougera plus, et donc il est préférable d’insérer les balises meta directement dans le fichier html. Soit vous (ou votre client) allez apporter des modifications et republier le site plusieurs fois. Il faudra alors placer ces balises meta dans le « code html personnalisé » des propriétés de la page.

 

Les balises meta

Nous avons donc les balises meta suivantes pour Google+, Twitter et Facebook.

Pour Google+:

  • renseignez le titre de la page
  • et la description

Pour Twitter :

  • renseignez, à la ligne 8, votre nom d’utilisateur Twitter (ça commence par un @) chez nous par exemple c’est @Tontondu_web
  • Le titre de la page
  • La description de la page

Pour Facebook :

  • Renseignez le titre de la page
  • L’url de la page
  • La description de la page
  • Et le nom du site

Ces informations doivent être les mêmes que celles renseignées dans les champs SEO de WebAcappella Responsive. Finalement ce n’est que du copier/coller.

 

Tailles et formats des images

Les images partagées dans les balises méta ne sont pas forcément celles qui se trouves dans la page mais elles doivent représenter le contenu de manière correcte. Elles vous perment de contrôler ce que les gens voient lorsqu’ils partagent et cliquent sur vos liens donc il est important d’utiliser des images de qualité et au format adapté à chaque réseaux social.

Chaque réseau social utilise des tailles d’images différentes (sinon c’est pas drôle) mais en règle générale, si votre image est de bonne qualité et d’une taille assez grande, cela conviendra très bien.

Pour Google+ : 497 x 373 pixel
Pour Twitter : 400 x 160 pixel
Pour Facebook, elle fait 1200 x 630 pixel

Privilégiez le format png pour vos images. Si vous utilisez Photoshop : Fichier => Exportation => Enregistrer pour le web.

Si vous ne voulez pas vous embêter à faire plusieurs images, je vous invite à n’utiliser que l’image Facebook, elle sera automatiquement recadrée sur tout les réseaux sociaux.

Une fois que vos images sont prêtes. Connectez vous à votre serveur via votre client FTP préféré et allez dans le dossier racine. (Chez OVH, c’est le dossier www, chez la plus part des autres hébergeurs c’est public_html). Créez un nouveau dossier que vous appellerez plugins. Ceux qui ont déjà installé des plugins sur leur site peuvent utiliser le dossier plugins déjà présent.

Dans ce dossier plugins, créez un nouveau dossier que vous appellerez img et déposez-y vos images.

 

Les outils de test et validation

Lorsque votre site sera publié, il vous faudra vérifier que les réseaux sociaux prennent bien en compte vos nouvelles balises meta. Chaque réseaux social à son outils.

Pour Google+, l’outil n’est vraiment pas top, la meilleur façon de tester est de partager votre lien sur votre page Google+.
Pour Twitter, utilisez l’outil Twitter Card Validator
Pour Facebook, utilisez l’outil Facebook Debugger. Attention, il se peut que vous deviez « re-collecter » plusieurs fois avant de voir apparaitre la prévisualisation correctement.

 

Conclusion

Cette technique va vous permettre d’optimiser votre référencement SEO et de contrôler comment vos pages sont partagées sur les réseaux sociaux.
De plus, si vous utilisez déjà un de nos templates avec « l’effet blog » et boutons de partage, il vous sera indispensable d’utiliser ces balises meta pour que le partage se fasse correctement.

Bisous les neveux !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée Champs requis marqués avec *

Publier des commentaires