Quelle est la largeur et la hauteur minimales des images Facebook Open Graph?
J'avais lu que les images associées à une URL donnée dans le graphe ouvert Facebook devaient être supérieures à 50 x 50
Cependant, lorsque nous avons exécuté le débogueur d'objets Facebook, nous avons reçu l'avertissement suivant:
"Tiny og: image: toutes les images référencées par og: image doivent faire au moins 200 px dans les deux dimensions. Vérifiez toutes les images avec tag og: image dans l'URL indiquée et assurez-vous qu'elle respecte les spécifications minimales."
Notre URL est http://www.famousbirthdays.com/people/charlie-chaplin.html et l'image apparaît sous les propriétés de l'objet
Avons-nous besoin de convertir nos images pour qu'elles soient supérieures à 200 x 200? Ou pouvons-nous le laisser tel quel? C'est actuellement une image de 65 x 75.
merci de votre aide!
Aujourd'hui, j'ai eu une réponse beaucoup plus claire à cette question (du outil de débogage Open Graph ):
Small og: image: Toutes les images référencées par og: image doit être à 200px au moins dans les deux dimensions, avec 1500x1500 de préférence. (La taille maximale de Est de 5 Mo.) Veuillez cocher toutes les images avec le tag og: image in l'URL donnée et assurez-vous qu'elle respecte les spécifications recommandées.
og: l'image devrait être plus grande: Fourni og: l'image n'est pas assez grande. S'il vous plaît utilisez une image d’au moins 200x200 et de préférence 1500x1500 . (La taille maximale de l'image est de 5 Mo.) L'image ... sera utilisée à la place.
Donc, OUI, vous devez convertir vos images de graphe ouvertes à au moins 200x200 pixels et il semble que plus la taille est grande, mieux c'est.
Si votre image est inférieure à 200x200, Facebook essaiera d'utiliser une image plus grande (si) disponible sur la page.
Les mêmes informations renvoyées par le débogueur se trouvent dans la documentation de graphe ouverte, sur rubrique "Optimisation de la distribution du contenu multimédia", élément 3: balises
Edit: Facebook a corrigé sa documentation:
De Réponse de Luciano :
og: l’image doit avoir au moins 200 pixels dans les deux dimensions, l’option 1500x1500 étant préférable. (La taille maximale de l'image est de 5 Mo.)
C'est assez clair. Ils ne peuvent pas dépasser 130 x 110 pixels et doivent avoir au moins 200 pixels par côté. Cela est tout à fait possible si vous stockez votre image sur un TARDIS.
Sérieusement, je me suis heurté à ce problème moi-même, ce qui m'a un peu dérouté puisque les pages ont été parfaitement retenues, il n'y a pas si longtemps. J'imagine qu'il s'agit d'un changement conçu pour la présentation de la timeline qui n'a tout simplement pas été mis à jour dans la documentation. Ce que je ne peux pas trouver, c’est que si og: les images doivent maintenant être «au moins» 200px par côté, quel est le maximum et quelle est la taille actuelle recommandée. WTF en effet.
Scott
J'avais le même problème qui me tenait à coeur. J'utilise le site wordpress, j'ai donc dû abandonner le www. Vérifiez votre wordpress admin > settings >general pour l'adresse de votre site/adresse wordpress, etc. Cela supprime les autres erreurs d'URL.
En ce qui concerne le problème d’image, tout ce que je peux dire, c’est que le placer dans mon fichier d’en-tête a fonctionné pour moi .
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:image" content="http://yourwebsite.com/images/yourimage.jpg"/>
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />
<meta property="og:title" content="your website page title"/>
<meta property="og:url" content="http://yourwebsite.com"/>
<meta property="og:site_name" content="site name and content etc"/>
<meta property="og:description"content="description of site" />
<meta property="og:type" content="Website"/>
Dans wordpress, j'ai laissé le <title><?php wp_title( '|', true, 'right' ); ?></title> dedans.
Aussi, comme suggéré dans d'autres messages de mon exemple, ce code: <link rel="image_src" href="http://URL-TO-YOUR-IMAGE" / > l'a rendu NON FONCTIONNANT. En le retirant, cela a été résolu instantanément.
J'ai utilisé une image 500 x 500. Bonne chance… j'espère sauver la douleur de quelqu'un d'autre.
Il suffit de suivre ces règles:
- "Utilisez des images d’au moins 1200 x 630 pixels pour un affichage optimal sur des appareils haute résolution."
- "Essayez de garder vos images aussi proches que possible du format de l'image de 1.91: 1 pour afficher la totalité de l'image dans Fil d'actualité sans aucun recadrage."
- La largeur préférée d'une image est 1500px
En adhérant aux principes ci-dessus, l’image préférée a une largeur de 1500 pixels et une hauteur de 786 pixels (ce qui préserve le format de l’appareil).
Semble être un bogue dans la spécification. Une solution de contournement consiste à créer des images 200px tout en découpant ce que vous ne voulez pas voir ou à les réduire si vous avez suffisamment d'originaux suffisamment volumineux. Par exemple, si votre image mesure 25 x 25 pixels, vous pouvez ajouter 175 pixels pour les deux dimensions, puis imbriquer cette image dans un div comportant une propriété overflow: hidden css et une largeur/hauteur de 25 x 25. Pas le plus propre, mais ça marcherait.
J'ai ouvert un ticket de bogue avec Facebook pour résoudre le problème de la mauvaise documentation et savoir s'il s'agit d'une spécification ou d'un bogue. http://developers.facebook.com/bugs/210269722417284
On dirait qu'ils ont mis à jour leur documentation:
La photo doit mesurer au moins 50 pixels sur 50 pixels (200 pixels minimum par .__ 200 pixels est préférable) et avoir un rapport hauteur/largeur maximum de 3: 1.
Depuis la page des développeurs Facebook:
Utilisez des images d’au moins 1200 x 630 pixels pour un affichage optimal appareils à haute résolution. Au minimum, vous devriez utiliser des images qui 600 x 315 pixels pour afficher les articles de page de lien avec des images plus grandes.
Vous pouvez trouver plus de détails à ce sujet ici . S'il vous plaît vérifier le point numéro 4
Utilisez des images d’au moins 1200 x 630 pixels pour un affichage optimal sur des appareils haute résolution. Au minimum, vous devez utiliser des images de 600 x 315 pixels pour afficher les publications de pages de liens contenant des images plus grandes.
Référence: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#images
De https://developers.facebook.com/docs/plugins/checklist/#opengraphtags
- Utilisez les balises Open Graph appropriées pour piloter la distribution
Des balises Open Graph peuvent être incluses dans le code HTML de votre page pour permettre à Facebook Crawler de générer de meilleurs aperçus lorsque votre contenu est partagé sur Facebook.
Les balises Open Graph de base que vous devez implémenter sont:
Description de la balise
- og: titre Le titre de votre article, à l'exclusion de toute marque.
- og: nom_site Le nom de votre site Web. par exemple. IMDb pas imdb.com.
- og: url L'URL qui est l'identifiant unique de votre publication. Il devrait correspondre à votre URL canonique utilisée pour le référencement et ne devrait inclure aucune variable de session, aucun paramètre d’identification de l’utilisateur ou aucun compteur Si vous l'utilisez de manière incorrecte, les «j'aime» et les partages ne seront pas agrégés Pour cette URL et seront répartis sur toutes les variations de l'URL.
- og: description Description détaillée du contenu du fichier , généralement entre 2 et 4 phrases.
- og: image L'URL de l'image que vous souhaitez voir apparaître lorsque vous partagez un lien. Nous vous suggérons d’utiliser une image d’au moins 1200x630 pixels.
Depuis votre message, il semble que vous souhaitiez partager le message en utilisant le concept OG sur Facebook.Pour cela, la taille de l'image minimum doit être de 200px (x) 200p x. Il s’agit d’une dimension standard par FB. Si aucune image de taille spécifique n’est disponible, la prochaine image de la page aura la même dimension.
Taille d'image minimale La taille d'image minimale est de 200 x 200 pixels. Si vous essayez d'utiliser une image plus petite, vous verrez une erreur dans l'URL Debugger.Veuillez vérifier avec ce lien >>
Les documents ont été mis à jour à nouveau!
og: l'image peut maintenant être aussi grande que vous le souhaitez - whoop
Ils ont recommandé ce qui suit:
- au moins 600x315 pixels
- Idéalement, ratio de 1,91: 1
- pas plus grand que 5mb en taille de fichier
- mais aussi gros que vous aimez!
N'oubliez pas également que vous pouvez ajouter plusieurs images og: et laisser l'utilisateur choisir l'image qu'il souhaite utiliser.
J'ai rencontré le même problème. Je n'ai pas effectué de test exhaustif, donc je ne peux pas dire exactement quelles sont les conditions pour que les images apparaissent. Je peux dire que mes images sont passées à> 200x> 200 (plus précisément 350x350) et elles sont ensuite apparues.
Si vous informez même une image plus grande que 200x200 (comme nouvelle documentation), le Debuger accuse encore que l'image n'est pas assez grande, la solution consiste à ajouter la balise META ci-dessous avec les dimensions de l'image:
Exemple:
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />