Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1417 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2288257
Dawa
www.shootmeagain.com
Posté le 20-09-2016 à 11:38:39  profilanswer
 

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
mood
Publicité
Posté le 20-09-2016 à 11:38:39  profilanswer
 

n°2288298
Dawa
www.shootmeagain.com
Posté le 20-09-2016 à 21:01:07  profilanswer
 

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 !

n°2288338
LeRiton
Posté le 21-09-2016 à 12:13:38  profilanswer
 

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 ?

n°2288344
Dawa
www.shootmeagain.com
Posté le 21-09-2016 à 13:47:05  profilanswer
 

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
n°2321755
babysnoopy
Posté le 04-10-2018 à 23:33:05  profilanswer
 

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


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Petite idée site HTMLIntégrer une partie d'une autre page web dans une page html/php
Macro word : trouver format et ajouter balises htmlFonction JS pour récupérer le tag image "Alt" sur un diaporama
aide css dans html[RESOLU] [wordpress] protéger des fichier HTML
Soucis vignette Facebook pour mes liensCOMMENT CENTRER Background-image dans FF
Vba word en-tête image + texte 
Plus de sujets relatifs à : [HTML] Open Graph : Facebook ne voit pas mon og:image


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR