[HTML] Open Graph : Facebook ne voit pas mon og:image

Open Graph : Facebook ne voit pas mon og:image [HTML] - HTML/CSS - Programmation

Marsh Posté le 20-09-2016 à 11:38:39    

Hello à tous,
 
Je me bats depuis environ 2 heures là-dessus sans trouver de solution.  
 
Depuis trèèèèès longtemps quand je partage un lien de mon site sur Facebook l'image n'apparaît pas. Je dois alors le debugger sur https://developers.facebook.com/tools/debug avant de pouvoir recommencer.  
 
J'ai donc cherché des infos, et il semble que les balises opengraph soient en cause. En effet, malgré les nombreuses modifications que je viens de faire après les différentes pistes trouvées, j'ai un Warning récurrent :  
 

Code :
  1. The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.


 
Pourtant dans mon code source il apparaît bien :  
 

Code :
  1. <meta property="og:image" content="http://www.shootmeagain.com/photo/Y2013/3769/saintvitus-oslo_30-03-2013_17.jpg" />


 
Je copie tout l'entête de ma page histoire d'être complet :  
 
 

Code :
  1. <!DOCTYPE html><html xmlns:og="http://ogp.me/ns#"><head><title>PHOTOS : Saint Vitus à Oslo (Rockefeller) le 30-03-2013 | Shoot Me Again Webzine.</title>
  2. <meta charset="UTF-8">
  3. <link rel=canonical href='http://www.shootmeagain.com/photos/3769_saintvitus_oslo_30-03-2013'>
  4. <meta property="og:description" content="PHOTOS : Saint Vitus à Oslo (Rockefeller) le 30-03-2013 | Shoot Me Again Webzine." />
  5. <meta property="og:title" content="PHOTOS : Saint Vitus à Oslo (Rockefeller) le 30-03-2013 | Shoot Me Again Webzine." />
  6. <meta property="og:url" content="http://www.shootmeagain.com/photos/3769_saintvitus_oslo_30-03-2013" />
  7. <meta property="og:type" content="website" />
  8. <meta property="og:image" content="http://www.shootmeagain.com/photo/Y2013/3769/saintvitus-oslo_30-03-2013_17.jpg" />
  9. <meta property='fb:admins' content='erikshootmeagain' />
  10. <meta property='fb:app_id' content='146373435406736' />
  11. <link rel=stylesheet href='http://www.shootmeagain.com/layout.css' type='text/css'>
  12. <link rel=stylesheet href='http://www.shootmeagain.com/layout600.css' type='text/css'>
  13. <link rel=stylesheet href='http://www.shootmeagain.com/layout900.css' type='text/css'>
  14. <link rel=stylesheet href='http://www.shootmeagain.com/layout1200.css' type='text/css'>
  15. <link rel=stylesheet href='http://www.shootmeagain.com/layout1600.css' type='text/css'>
  16. <link rel=stylesheet href='http://www.shootmeagain.com/layout1900.css' type='text/css'>
  17. <link rel=stylesheet href='http://www.shootmeagain.com/layoutheight.css' type='text/css'>
  18. <link rel=stylesheet href='http://www.shootmeagain.com/js/jquery-ui-1.11.3.custom/jquery-ui.css' type='text/css'>
  19. <link rel=stylesheet href='http://www.shootmeagain.com/js/jquery-ui-1.11.3.custom/jquery-ui.theme.css' type='text/css'>
  20. <link rel="shortcut icon" href="http://www.shootmeagain.com/images/favicon.ico">
  21. <link rel="icon" type="image/gif" href="http://www.shootmeagain.com/images/animated_favicon1.gif">
  22. <meta name='keywords' content='webzine, chroniques, photos, interview, concours, mp3, video, hardcore, rock, emo, screamo, metal, punk, garage'>
  23. <meta name='author' content='ChamO'>
  24. <meta name='publisher' content='ChamO'>
  25. <meta name='viewport' content='width=device-width'>
  26. <meta http-equiv="content-language" content="fr">
  27. <link href='http://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
  28. <script language="javascript" type="text/javascript" src="http://www.shootmeagain.com/js/jquery-1.11.2.min.js"></script>
  29. <script language="javascript" type="text/javascript" src="http://www.shootmeagain.com/js/jquery-ui-1.11.3.custom/jquery-ui.min.js"></script>
  30. <script language="javascript" type="text/javascript" src="http://www.shootmeagain.com/js/editPost.js"></script>
  31. </head>


 
 
Quelqu'un aurait une idée d'où cela pourrait venir ?  
 
Voici une URL pour exemple : http://www.shootmeagain.com/photos [...] 30-03-2013  
 
Merci beaucoup !  
Bonne journée
 


---------------
SHOOT ME AGAIN WEBZINE
Reply

Marsh Posté le 20-09-2016 à 11:38:39   

Reply

Marsh Posté le 20-09-2016 à 21:01:07    

Dawa a écrit :

Hello à tous,
 
Je me bats depuis environ 2 heures là-dessus sans trouver de solution.  
 
Depuis trèèèèès longtemps quand je partage un lien de mon site sur Facebook l'image n'apparaît pas. Je dois alors le debugger sur https://developers.facebook.com/tools/debug avant de pouvoir recommencer.  
 
J'ai donc cherché des infos, et il semble que les balises opengraph soient en cause. En effet, malgré les nombreuses modifications que je viens de faire après les différentes pistes trouvées, j'ai un Warning récurrent :  
 

Code :
  1. The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.


 
Pourtant dans mon code source il apparaît bien :  
 

Code :
  1. <meta property="og:image" content="http://www.shootmeagain.com/photo/Y2013/3769/saintvitus-oslo_30-03-2013_17.jpg" />


 
Je copie tout l'entête de ma page histoire d'être complet :  
 
 

Code :
  1. <!DOCTYPE html><html xmlns:og="http://ogp.me/ns#"><head><title>PHOTOS : Saint Vitus à Oslo (Rockefeller) le 30-03-2013 | Shoot Me Again Webzine.</title>
  2. <meta charset="UTF-8">
  3. <link rel=canonical href='http://www.shootmeagain.com/photos/3769_saintvitus_oslo_30-03-2013'>
  4. <meta property="og:description" content="PHOTOS : Saint Vitus à Oslo (Rockefeller) le 30-03-2013 | Shoot Me Again Webzine." />
  5. <meta property="og:title" content="PHOTOS : Saint Vitus à Oslo (Rockefeller) le 30-03-2013 | Shoot Me Again Webzine." />
  6. <meta property="og:url" content="http://www.shootmeagain.com/photos/3769_saintvitus_oslo_30-03-2013" />
  7. <meta property="og:type" content="website" />
  8. <meta property="og:image" content="http://www.shootmeagain.com/photo/Y2013/3769/saintvitus-oslo_30-03-2013_17.jpg" />
  9. <meta property='fb:admins' content='erikshootmeagain' />
  10. <meta property='fb:app_id' content='146373435406736' />
  11. <link rel=stylesheet href='http://www.shootmeagain.com/layout.css' type='text/css'>
  12. <link rel=stylesheet href='http://www.shootmeagain.com/layout600.css' type='text/css'>
  13. <link rel=stylesheet href='http://www.shootmeagain.com/layout900.css' type='text/css'>
  14. <link rel=stylesheet href='http://www.shootmeagain.com/layout1200.css' type='text/css'>
  15. <link rel=stylesheet href='http://www.shootmeagain.com/layout1600.css' type='text/css'>
  16. <link rel=stylesheet href='http://www.shootmeagain.com/layout1900.css' type='text/css'>
  17. <link rel=stylesheet href='http://www.shootmeagain.com/layoutheight.css' type='text/css'>
  18. <link rel=stylesheet href='http://www.shootmeagain.com/js/jquery-ui-1.11.3.custom/jquery-ui.css' type='text/css'>
  19. <link rel=stylesheet href='http://www.shootmeagain.com/js/jquery-ui-1.11.3.custom/jquery-ui.theme.css' type='text/css'>
  20. <link rel="shortcut icon" href="http://www.shootmeagain.com/images/favicon.ico">
  21. <link rel="icon" type="image/gif" href="http://www.shootmeagain.com/images/animated_favicon1.gif">
  22. <meta name='keywords' content='webzine, chroniques, photos, interview, concours, mp3, video, hardcore, rock, emo, screamo, metal, punk, garage'>
  23. <meta name='author' content='ChamO'>
  24. <meta name='publisher' content='ChamO'>
  25. <meta name='viewport' content='width=device-width'>
  26. <meta http-equiv="content-language" content="fr">
  27. <link href='http://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
  28. <script language="javascript" type="text/javascript" src="http://www.shootmeagain.com/js/jquery-1.11.2.min.js"></script>
  29. <script language="javascript" type="text/javascript" src="http://www.shootmeagain.com/js/jquery-ui-1.11.3.custom/jquery-ui.min.js"></script>
  30. <script language="javascript" type="text/javascript" src="http://www.shootmeagain.com/js/editPost.js"></script>
  31. </head>


 
 
Quelqu'un aurait une idée d'où cela pourrait venir ?  
 
Voici une URL pour exemple : http://www.shootmeagain.com/photos [...] 30-03-2013  
 
Merci beaucoup !  
Bonne journée
 


 
 
Up !

Reply

Marsh Posté le 21-09-2016 à 12:13:38    

Vu que le markup à l'air OK, c'est certainement du à l'implémentation de FB.
Il n'y a pas une restriction sur la résolution, le poids de l'image ?

Reply

Marsh Posté le 21-09-2016 à 13:47:05    

D'après la doc :  
 
https://developers.facebook.com/doc [...] -practices
 

Citation :

4. Optimisez vos images pour générer des aperçus de qualité
 
Dimension des images
Utilisez des images d’au moins 1 200 x 630 pixels pour un affichage optimal sur les appareils à haute résolution. Au minimum, vous devez utiliser des images de 600 x 315 pixels pour que vos publications de page avec lien s’affichent avec des images plus grandes. La taille des images ne peut pas dépasser 8 Mo.
 
 
Images de petite taille
Si votre image est inférieure à 600 x 315 pixels, elle s’affichera quand même dans la publication de page avec lien, mais sa taille sera beaucoup plus petite.
 
 
Nous avons également repensé les publications de page avec lien afin que le format des images soit le même sur le fil d’actualité sur ordinateur et sur mobile. Essayez de garder un format le plus proche possible de 1,91:1 pour vos images afin d’afficher l’image complète dans le fil d’actualité sans qu’aucun recadrage ne soit nécessaire.
 
Dimension d’image minimale
Le format d’image minimum est 200 x 200 pixels. Si vous utilisez une image plus petite, vous verrez une erreur dans le Débogueur de partage.


 
 
 
Par contre j'ai également trouvé ceci donc je vais creuser un peu :  
 

Citation :

Mise en cache préalable des images
 
Lorsque le contenu est partagé pour la première fois, le robot d’indexation Facebook récupère et met en cache les métadonnées de l’URL partagée. Le robot d’indexation doit voir une image au moins une fois pour qu’elle puisse être affichée. Cela signifie que la première personne qui partage un contenu ne voit pas une image affichée :
 
 
Deux méthodes permettent d’éviter ce phénomène et de faire en sorte que les images s’affichent lors de la première action J’aime ou Partager :
 
1. Effectuez une mise en cache préalable de l’image à l’aide du Débogueur de partage
Exécutez l’URL Debugger sur l’adresse URL afin d’effectuer une récupération préalable des métadonnées de la page. Nous vous conseillons également cette opération si vous mettez à jour l’image d’un contenu.
 
2. Utilisez les balises Open Graph og:image:width et og:image:height
L’utilisation de ces balises indique les dimensions de l’image au robot d’indexation afin qu’il puisse l’afficher immédiatement sans avoir besoin de la télécharger et de la traiter de manière asynchrone.


---------------
SHOOT ME AGAIN WEBZINE
Reply

Marsh Posté le 04-10-2018 à 23:33:05    

Avez-vous trouvé une solution ?
 
(j'ai le même problème)


---------------
Gérez votre épargne avec Avenue Des Investisseurs - École des épargnants alpha
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed