Social sharing - Silex Documentation

Lorsque quelqu'un partage votre page sur Facebook, LinkedIn, Twitter ou une application de messagerie, ces plateformes extraient un titre, une description et une image de votre page pour construire une carte de prévisualisation. Si vous ne définissez pas ces valeurs, les plateformes devinent -- et elles devinent généralement mal.

Deux choses à garder en tête :

Les métadonnées de partage social sont séparées des métadonnées SEO. Votre titre et votre description pour les moteurs de recherche servent un objectif différent de votre titre et votre description pour les réseaux sociaux. Optimisez chacun pour son contexte.
L'image fait ou défait la prévisualisation. Un lien avec une grande image bien dimensionnée obtient considérablement plus de clics qu'un lien avec une petite vignette ou pas d'image du tout.

Qu'est-ce qu'Open Graph¶

Open Graph est un protocole créé par Facebook qui vous permet de contrôler l'apparence de votre page lorsqu'elle est partagée sur les plateformes sociales. Il utilise des balises <meta> dans le <head> de votre page avec l'attribut property défini sur des valeurs comme og:title, og:description et og:image.

La plupart des grandes plateformes prennent en charge Open Graph : Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram, Pinterest et d'autres. Twitter lit également les balises Open Graph en remplacement (son propre système, Twitter Cards, est prioritaire lorsqu'il est présent).

La boîte de dialogue Paramètres gère tout cela pour vous. Vous saisissez du texte dans des champs, et les balises méta correctes sont générées lors de la publication.

Où trouver les paramètres sociaux¶

Ouvrez la boîte de dialogue Paramètres (icône d'engrenage dans la barre latérale gauche) et sélectionnez l'onglet Social. Vous verrez trois champs : Titre, Description et Image.

Comme pour tous les paramètres, vous pouvez définir des valeurs par défaut au niveau du site dans les Paramètres du site et les surcharger par page dans les Paramètres de page. Consultez Paramètres du site pour comprendre le fonctionnement du système de surcharge.

Titre¶

Le titre social est affiché comme le titre de la carte de prévisualisation. Il apparaît en gras, généralement au-dessus de la description et en dessous de l'image.

Écrivez pour capter l'attention, pas pour les moteurs de recherche. Les titres SEO incluent des noms de marque et des mots-clés. Les titres sociaux devraient faire arrêter le défilement. "Apprenez tout sur le tournage" est plus convaincant que "Cours de poterie - Atelier Terre des Montagnes".

Restez entre 60 et 90 caractères. Les plateformes tronquent différemment, mais cette plage fonctionne bien sur Facebook, LinkedIn et Twitter.

N'incluez pas la marque. La plateforme affiche déjà votre nom de domaine. Utiliser le titre pour votre nom de marque gaspille de l'espace que vous pourriez utiliser pour décrire le contenu.

Comparez votre titre social avec votre titre SEO. Ils s'adressent à des publics différents. Votre titre SEO (défini dans l'onglet SEO) cible quelqu'un qui cherche activement. Votre titre social cible quelqu'un qui fait défiler un fil d'actualité. Adaptez le ton en conséquence.

Description¶

La description sociale apparaît sous le titre dans la carte de prévisualisation. Elle fournit du contexte et une raison de cliquer.

Comment rédiger une bonne description sociale¶

Faites-en un appel à l'action ou une accroche. "Le guide complet de Sam sur les techniques d'émaillage, avec des démos vidéo pour chaque étape" invite au clic. "Ceci est notre site web sur la poterie" non.

Restez entre 60 et 90 caractères. Certaines plateformes en affichent plus, mais cette longueur garantit que rien d'essentiel n'est coupé.

Ne répétez pas le titre. Le titre et la description apparaissent ensemble. Utilisez la description pour ajouter des informations que le titre n'a pas couvertes.

Image¶

L'image sociale est l'élément le plus important d'un lien partagé. Elle détermine si la carte de prévisualisation est grande et accrocheuse ou petite et ignorable.

Exigences pour l'image¶

Taille optimale : 1200 x 627 pixels. À cette taille, Facebook, LinkedIn et Twitter affichent tous une grande carte de prévisualisation. C'est le ratio d'aspect que vous devez viser.

Taille minimale : 400 x 209 pixels. En dessous de ce seuil, les plateformes affichent une vignette beaucoup plus petite sur le côté gauche de la carte au lieu d'une grande image au-dessus du texte. La différence d'impact visuel est significative.

Taille maximale du fichier : 5 Mo. Gardez les images bien en dessous de cette limite pour un chargement rapide. Visez 200 à 500 Ko en utilisant la compression JPEG ou du PNG optimisé.

Utilisez l'URL complète. Le champ image nécessite une URL absolue, pas un chemin relatif. Entrez l'adresse complète : https://www.example.com/images/share-image.jpg. Les plateformes récupèrent cette image depuis votre serveur lorsque quelqu'un partage le lien, donc les chemins relatifs ne seront pas résolus.

Conseils pour une bonne image sociale¶

Concevez spécifiquement pour le partage. Ne réutilisez pas une photo au hasard de votre page. Créez une image qui rend bien en carte de prévisualisation avec du texte en grand superposé si nécessaire.
Évitez les images chargées en texte. Certaines plateformes recadrent légèrement les images. Gardez le contenu important loin des bords.
Utilisez un contraste élevé. Les fils d'actualité sont bruyants. Une image vive et claire se démarque dans un mur de publications textuelles.
Testez avec différents arrière-plans. Facebook a un fond de fil blanc, Twitter a le blanc ou le mode sombre, LinkedIn est gris clair. Assurez-vous que votre image est belle sur tous.

Valeurs par défaut du site¶

Ouvrez Paramètres du site (icône d'engrenage) > onglet Social.
Entrez un Titre -- quelque chose de convaincant qui représente votre site globalement.
Entrez une Description -- un court argumentaire pour votre site.
Entrez une URL d'Image -- votre meilleure image, la plus représentative, en 1200x627.
Cliquez sur Appliquer.

Surcharges par page¶

Ouvrez les Paramètres de page pour la page que vous souhaitez personnaliser.
Allez à l'onglet Social.
Entrez des valeurs spécifiques à cette page. Tout champ que vous laissez vide se rabat sur la valeur par défaut du site.
Cliquez sur Appliquer.

Quelles pages nécessitent des surcharges ? Toute page que quelqu'un pourrait partager directement : votre page d'accueil, les articles de blog, les pages produits, les pages de destination et les pièces de portfolio. Une page "Conditions d'utilisation" n'a probablement pas besoin d'une image sociale personnalisée.

Tester vos cartes sociales¶

Après publication, utilisez ces outils pour voir exactement comment votre page apparaîtra lorsqu'elle sera partagée :

Facebook : Sharing Debugger -- entrez votre URL, voyez l'aperçu et videz le cache de Facebook si vous avez mis à jour vos balises.
Twitter : Card Validator -- prévisualisez votre carte Twitter.
LinkedIn : Post Inspector -- prévisualisez et rafraîchissez le cache de LinkedIn.

Ces outils vous montrent également les erreurs ou avertissements concernant vos balises Open Graph.

Important : Les plateformes sociales mettent en cache vos métadonnées de manière agressive. Si vous mettez à jour votre titre social, votre description ou votre image, utilisez ces outils de débogage pour forcer un rafraîchissement du cache. Sinon, les plateformes peuvent afficher vos anciennes métadonnées pendant des heures voire des jours.

Il vaut la peine d'être explicite sur la différence, car la boîte de dialogue Paramètres a à la fois un onglet SEO et un onglet Social avec des champs similaires.

	SEO (titre, description)	Social (og:title, og:description, og:image)
Où ça apparaît	Résultats des moteurs de recherche, onglets du navigateur	Cartes de prévisualisation sur les réseaux sociaux
Public	Quelqu'un qui cherche activement	Quelqu'un qui fait défiler un fil d'actualité
Ton	Informatif, orienté mots-clés	Accrocheur, conversationnel
Longueur	Titre : ~70 car. Description : 150-160 car.	Titre : 60-90 car. Description : 60-90 car.
Image	Non applicable (favicon uniquement)	Essentielle -- 1200x627 recommandé

Vous pouvez utiliser le même texte pour les deux si cela convient aux deux contextes. Mais vos taux de clic seront meilleurs si vous adaptez chacun à son public.

Erreurs courantes¶

Pas d'image sociale. Les liens partagés sans image obtiennent beaucoup moins de clics. Définissez toujours au moins une image par défaut au niveau du site.
Image trop petite. En dessous de 400x209 pixels, les plateformes affichent une petite vignette au lieu d'un grand aperçu. Utilisez 1200x627.
URL d'image relative. Les plateformes sociales récupèrent l'image depuis votre serveur en utilisant l'URL que vous fournissez. Un chemin relatif comme /images/share.jpg ne fonctionnera pas. Utilisez l'URL complète : https://www.example.com/images/share.jpg.
Mêmes métadonnées sur chaque page. Si toutes vos pages partagent le même titre et la même description, chaque lien partagé semble identique. Surchargez par page pour les pages susceptibles d'être partagées.
Oublier de vider le cache. Après avoir mis à jour les métadonnées sociales, utilisez les outils de débogage ci-dessus pour rafraîchir le cache de la plateforme. Sinon, les anciennes valeurs peuvent persister.

Avancé : balises Open Graph en HTML et Twitter Cards

Ce qui est généré¶

Lorsque vous remplissez l'onglet Social et publiez, les balises méta suivantes sont ajoutées au <head> de votre page :

<meta property="og:title" content="Your Social Title">
<meta property="og:description" content="Your Social Description">
<meta property="og:image" content="https://www.example.com/image.jpg">

Ce sont des balises standard du protocole Open Graph reconnues par toutes les grandes plateformes sociales.

Twitter Cards¶

Twitter prend en charge Open Graph en remplacement, mais préfère ses propres balises méta twitter:. Si vous souhaitez un contrôle total sur votre carte Twitter, ajoutez ceci dans l'éditeur de head du Code personnalisé :

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Twitter Title">
<meta name="twitter:description" content="Your Twitter Description">
<meta name="twitter:image" content="https://www.example.com/image.jpg">

Le type de carte summary_large_image affiche une grande image au-dessus du titre et de la description. Sans la balise twitter:card, Twitter utilise par défaut summary, qui affiche une petite vignette carrée.

Balises Open Graph supplémentaires¶

Pour plus de contrôle, vous pouvez ajouter des balises OG supplémentaires via l'éditeur de head du Code personnalisé :

<meta property="og:type" content="website">
<meta property="og:url" content="https://www.example.com/page">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:locale" content="en_US">

Celles-ci sont optionnelles mais peuvent améliorer la façon dont les plateformes affichent votre contenu.

Spécifique à Pinterest¶

Pinterest lit les balises Open Graph mais prend également en charge une balise pinterest:description. Plus important, Pinterest respecte une balise méta spéciale qui empêche les gens d'épingler des images depuis votre site :

<meta name="pinterest" content="nopin">

Ajoutez ceci dans l'éditeur de head du Code personnalisé si nécessaire.

Quiz¶

Q1 : Vous définissez une image sociale de 300x150 pixels. Que se passe-t-il lorsque quelqu'un partage votre page sur Facebook ?

A) Facebook rejette l'image et n'affiche pas d'aperçu
B) Facebook affiche une petite vignette à gauche du texte au lieu d'une grande image au-dessus
C) Facebook étire l'image pour remplir la grande carte d'aperçu

Réponse

B) Facebook affiche une petite vignette à gauche du texte. Les images en dessous de 400x209 pixels déclenchent la mise en page en petite carte. Utilisez 1200x627 pour la grande carte accrocheuse.

Q2 : Vous avez mis à jour votre image sociale hier, mais lorsque vous partagez le lien sur LinkedIn, il affiche toujours l'ancienne image. Que devriez-vous faire ?

A) Attendre quelques semaines que LinkedIn se mette à jour automatiquement
B) Utiliser le LinkedIn Post Inspector pour vider le cache et récupérer les nouvelles métadonnées
C) Supprimer l'ancienne image de votre serveur

Réponse

B) Utiliser le LinkedIn Post Inspector. Les plateformes sociales mettent les métadonnées en cache de manière agressive. Les outils de débogage vous permettent de forcer un rafraîchissement pour que la nouvelle image apparaisse immédiatement.

Q3 : Votre titre SEO est "Bols et tasses en céramique artisanale - Atelier Terre des Montagnes". Votre titre social devrait-il être le même ?

A) Oui, la cohérence est importante
B) Pas nécessairement -- le titre social devrait être plus accrocheur, comme "De magnifiques bols façonnés à la main sur le tour de potier"
C) Le titre social devrait être plus court, comme "Atelier Terre"

Réponse

B) Pas nécessairement. Les titres SEO ciblent les personnes qui cherchent activement (informatif, riche en mots-clés). Les titres sociaux ciblent les personnes qui font défiler un fil (accrocheur, conversationnel). Adapter chacun à son contexte améliore les taux de clic.

Q4 : Vous avez saisi images/share.jpg dans le champ d'image sociale. L'image n'apparaît pas dans les cartes d'aperçu. Pourquoi ?

A) L'image est trop volumineuse
B) Les plateformes sociales ont besoin d'une URL complète commençant par https://, pas d'un chemin relatif
C) Le format de l'image n'est pas pris en charge

Réponse

B) Les plateformes sociales ont besoin d'une URL complète. Elles récupèrent l'image depuis votre serveur en utilisant l'URL que vous fournissez. Un chemin relatif ne se résout pas car il n'y a pas de contexte d'URL de base. Utilisez l'adresse complète : https://www.example.com/images/share.jpg.

Q5 : Quelles pages de votre site devraient avoir des surcharges de partage social personnalisées ?

A) Chaque page sans exception
B) Les pages que les gens sont susceptibles de partager : page d'accueil, articles de blog, pages produits, pages de destination
C) Uniquement la page d'accueil

Réponse

B) Les pages que les gens sont susceptibles de partager. Ce sont les pages qui apparaîtront dans les fils d'actualité sociaux. Une page de conditions d'utilisation ou de politique de confidentialité est rarement partagée, donc la valeur par défaut du site suffit pour celles-ci.

Éditer cette page sur GitLab

Partage social¶

Qu'est-ce qu'Open Graph¶

Où trouver les paramètres sociaux¶

Titre¶

Comment rédiger un bon titre social¶

Description¶

Comment rédiger une bonne description sociale¶

Image¶

Exigences pour l'image¶

Conseils pour une bonne image sociale¶

Définir les métadonnées de partage social¶

Valeurs par défaut du site¶

Surcharges par page¶

Tester vos cartes sociales¶

Partage social vs. SEO¶

Erreurs courantes¶

Ce qui est généré¶

Twitter Cards¶

Balises Open Graph supplémentaires¶

Spécifique à Pinterest¶

Quiz¶