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

Suite à notre demande, WebAcappella à mis à jour les options dans les propriétés des pages. Depuis avril 2018, vous pouvez voir un champ « Balises meta personnalisées » juste au dessus du champ « Code HTML personnalisé ». Attention à ne pas confondre les deux !

 

Les balises meta

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

Ce qui donne ceci :

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 permettent 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.

Google+ : 497 x 373 pixel
Twitter : 400 x 160 pixel
Facebook : 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.

 

Importation des images

Une fois que vos images sont prêtes. Cliquez sur le bouton « Ajouter un fichier attaché » puis importez votre/vos images. Ces images se retrouveront dans le dossier Fichiers sur le tableau de bord de WebAcappella. Une fois l’image importée, WebAcappella vous affiche le chemin distant. C’est toujours wa_files/ puis le nom de votre image.

 

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 !

3 Commentaires

  1. Bonjour lorsque vous dites : Une fois l’image importée, WebAcappella vous affiche le chemin distant. C’est toujours wa_files/ puis le nom de votre image.
    Je n’arrive pas a trouver l’information de WA sur l’adresse du chemin distant
    Pouvez-vous m »éclairer ?
    merci d’avance
    Cordialement

  2. Bonjour,
    Sur la dernière version de WARC (1.4.35) pour Mac OSX, la possibilité de saisir des balises META personnalisées n’est pas proposée dans les paramètres du site. Y a t’il une alternative ?
    Merci de votre réponse

  3. Bonjour,

    Avec WA4, j’avais fait un site avec quelques tours de magie, mais certaines en .FLV n’allaient pas.

    Là, j’essaie avec WAR mais je n’arrive pas à insérer une vidéo, et surtout sous quel format !

    Voudriez-vous me dire comment faire ?

    Merci d’avance.

    Cordialement.
    Jean-Luc

Laisser un commentaire

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

Publier un commentaire