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

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

Chaque réseaux social a besoin de balises Open Graph 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.

Lorsque quelqu’un partage l’une de vos pages sur Facebook, Twitter, Linkedin ou encore Google+ Pinterest, 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.

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 Open Graph 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 !

Ce qui donne ceci pour WebAcappella Grid (à gauche) et WebAcappella FX (à droite) :

Les balises meta Open Graph

Les balises Open Graph

Nous avons donc les balises meta suivantes pour Facebook et Linkedin.

<!-- Open Graph meta pour Facebook -->
<meta property="og:title" content="Titre de la page" />
<meta property="og:url" content="http://www.exemple.com/" />
<meta property="og:image" content="https://exemple.com/wa_files/image-fb.png" />
<meta property="og:description" content="Description de la page" />
<meta property="og:site_name" content="Nom du site" />
<meta property="og:type" content="article" />
  • Renseignez le titre de la page
  • L’url de la page
  • L’image partagée (on vous explique plus bas comment faire)
  • La description de la page
  • Le nom du site
  • Le type de contenu. Si c’est une page de votre site, alors il vous faudra renseigner : website. Si c’est un article : article. Et si c’est un produit : product

Si votre page contient une vidéo, vous pouvez rajouter la balise suivante :

<meta property="og:video" content="https://www.youtube.com/watch?v=cxItBewmmh8" />

Si il s’agit d’une vidéo hébergée sur YouTube, mettre le lien de la video (format : https://www.youtube.com/watch?v=CODEDELAVIDEO, exemple :https://www.youtube.com/watch?v=cxItBewmmh8) – pour  une vidéo hébergée sur votre site, mettre le lien du fichier vidéo.

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

 

Twitter Cards Open Graph

<!-- Card meta pour Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@nomtwitter">
<meta name="twitter:title" content="Titre de la page" />
<meta name="twitter:description" content="Description de la page : moins de 200 caractères" />
<!-- Twitter summary card avec image large de 280x150px -->
<meta name="twitter:image:src" content="https://www.exemple.com/wa_files/image-twitter.png" />
  • renseignez, à la ligne 3, 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
  • L’image partagée (on vous explique plus bas comment faire)

 

Pinterest Open Graph – Rich Pins

<!-- Epingle Pinterest -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Titre de la page" />
<meta property="og:description" content="Description de la page" />
<meta property="og:url" content="http://www.exemple.com/" />
<meta property="og:site_name" content="Nom du site" />
  • Type de contenu
  • Le titre de la page
  • La description de la page
  • L’url de la page
  • Le nom du site

 

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.

Facebook, Linkedin et Pinterest : 1200 x 630 pixel (le fichier ne doit pas dépasser 8 Mo)
Twitter : 1200 x 630 pixel (le fichier ne doit pas dépasser 5 Mo)
Google+ : 497 x 373 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.

Voici un petit outil en ligne très sympa qui vous donnera toutes les tailles d’images pour tout les réseaux sociaux ! Il y a différents format de fichiers à télécharger selon le logiciel de retouche d’image que vous utilisez.

Il s’agit du site SocialSizes.io

 

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 Grid. Une fois l’image importée, WebAcappella Grid vous affiche le chemin distant. C’est toujours wa_files/ puis le nom de votre image.

Attention ! Cette fonctionnalité n’est pas disponible sur WebAcappella FX. Il vous faut renseigner le chemin complet de l’image.

Les balises meta Open Graph

 

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 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.
Pour Twitter, utilisez l’outil Twitter Card Validator
Pour Linkedin, utilisez l’outil Post inspector
Pour Google+, l’outil n’est vraiment pas top, la meilleur façon de tester est de partager votre lien sur votre page Google+.

 

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.

Si vous vous intéressez eu SEO, cet article peut aussi vous plair ! Passer son site en https

Bisous les neveux !

 

Pour en apprendre plus sur le référencement SEO, notre formation vidéo peut vous être utile !

4 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 *

Poster commentaire