Comprendre les balises Open Graph
Le protocole Open Graph a ete introduit par Facebook en 2010 pour permettre aux pages web de devenir des objets riches dans un graphe social. Lorsque quelqu'un partage une URL sur Facebook, LinkedIn, Pinterest ou d'autres plateformes sociales, la plateforme recupere la page et lit ses balises meta Open Graph pour determiner quel titre, description, image et autres metadonnees afficher dans l'apercu de partage. Sans ces balises, les plateformes font de leur mieux pour deviner a partir du contenu de la page, ce qui resulte souvent en des aperçus mediocres avec des images manquantes, des titres tronques ou des descriptions non pertinentes.
Le protocole definit quatre proprietes requises : og:title (le titre de la page), og:type (le type d'objet, comme "website" ou "article"), og:image (l'URL de l'image a afficher) et og:url (l'URL canonique). Les proprietes optionnelles supplementaires incluent og:description, og:site_name, og:locale et des balises specifiques aux medias pour le contenu video et audio. Ces balises sont placees dans la section <head> de votre HTML sous forme d'elements <meta property="og:..." content="...">.
Twitter Cards
Twitter utilise son propre systeme de balises meta appele Twitter Cards, mais il utilise les balises Open Graph en repli lorsque les balises specifiques a Twitter ne sont pas presentes. La balise twitter:card est la plus importante, controlant le format d'affichage. Le type de carte "summary" affiche une petite image carree a cote du titre et de la description, adapte au contenu general. Le type de carte "summary_large_image" affiche une grande image rectangulaire au-dessus du titre et de la description, ideal pour les articles de blog, les articles et le contenu visuel qui beneficie d'un apercu d'image prominent.
Les balises specifiques a Twitter comme twitter:title, twitter:description et twitter:image remplacent leurs equivalents Open Graph sur Twitter. Si celles-ci ne sont pas definies, Twitter utilise automatiquement og:title, og:description et og:image en repli. Cela signifie que vous n'avez besoin d'ajouter des balises specifiques a Twitter que lorsque vous souhaitez que l'apercu Twitter differe de l'apercu Facebook. La balise twitter:site peut egalement specifier votre identifiant Twitter a afficher avec la carte.
Bonnes pratiques pour les images
L'image d'apercu est l'element le plus impactant d'un partage social. Facebook recommande des images d'au moins 1200 x 630 pixels pour les ecrans haute resolution, avec un minimum de 600 x 315 pixels. Les cartes Twitter summary_large_image fonctionnent mieux avec 1200 x 628 pixels dans un ratio 2:1. Maintenez la taille des fichiers sous 5 Mo. Utilisez le JPEG pour les photographies et le PNG pour les graphiques avec du texte ou de la transparence. Evitez les images avec du texte excessif, car Facebook peut reduire la diffusion des publications avec des images contenant plus de 20 pour cent de superposition textuelle. Testez toujours vos images avec les outils de debogage des plateformes avant publication.
Debogage et validation
Les plateformes sociales mettent agressivement en cache les URL partagees, donc les modifications de vos balises OG peuvent ne pas apparaitre immediatement. Le Sharing Debugger de Facebook vous permet de re-scraper une URL pour rafraichir son cache et voir exactement comment vos balises sont analysees. Le Card Validator de Twitter affiche l'apercu de votre Twitter Card et valide le balisage. Le Post Inspector de LinkedIn effectue une validation similaire. Apres la mise a jour des balises OG, scrapez toujours l'URL dans ces outils pour effacer l'apercu en cache. Les problemes courants incluent les URL d'images relatives (utilisez toujours des URL absolues), les balises requises manquantes, les images trop petites et les erreurs de certificat SSL empechant le robot de la plateforme de recuperer l'image.
Foire aux questions
Que sont les balises Open Graph ?
Des balises meta HTML qui controlent l'apparence des URL lors du partage sur les reseaux sociaux. Elles specifient le titre, la description, l'image et l'URL pour les aperçus de partage sur Facebook, LinkedIn et d'autres plateformes.
Pourquoi les balises Open Graph sont-elles importantes ?
Sans elles, les plateformes sociales devinent quoi afficher, resultant souvent en des aperçus mediocres. Des balises OG correctes augmentent les taux de clics et assurent la coherence de marque lors du partage social.
Qu'est-ce que la balise meta twitter:card ?
Elle controle l'affichage du contenu sur Twitter. "summary" affiche une petite image, "summary_large_image" affiche une grande image en banniere. Twitter utilise les balises OG en repli pour le titre, la description et l'image si les balises specifiques a Twitter sont absentes.
Quelle taille d'image utiliser ?
Facebook recommande un minimum de 1200 x 630 pixels. Le format Twitter summary_large_image fonctionne mieux a 1200 x 628 pixels (ratio 2:1). Maintenez les fichiers sous 5 Mo. Utilisez des URL absolues et le format JPEG ou PNG.
Comment deboguer les balises Open Graph ?
Utilisez le Sharing Debugger de Facebook, le Card Validator de Twitter ou le Post Inspector de LinkedIn. Ces outils montrent comment les plateformes analysent vos balises et vous permettent de rafraichir les aperçus en cache.
Save your results & get weekly tips
Get calculator tips, formula guides, and financial insights delivered weekly. Join 10,000+ readers.
No spam. Unsubscribe anytime.