FB OpenGraph og: image ne tirant pas les images (éventuellement https?)

d'Abord, je ne pas croient que c'est un double problème. J'ai cherché les mêmes problèmes ou des problèmes similaires sur si largement, et en raison de la nature du dépannage avant de demander, je crois que ce problème est unique.

Facebook ne peut pas saisir mes fichiers og:image et j'ai essayé toutes les solutions habituelles. Je commence à penser que ça pourrait avoir quelque chose à voir avec https://...

  • j'ai vérifié http://developers.facebook.com/tools/debug et ne comportent aucun avertissement ou erreur.
  • il trouve les images que nous avons liées dans le og:image ", mais elles apparaissent Vierges. Lorsque nous cliquons sur l'image(s), cependant, ils existent et il faut est droit à eux.
  • il affiche une image -- une image hébergée sur un serveur non-https.
  • nous avons essayé des images carrées, jpegs, pngs, plus grandes et plus petites taille. Nous avons mis les images dans public_html. Zéro sont en train d'apparaître.
  • ce n'est pas une erreur de mise en cache, parce que lorsque nous ajoutons un autre og:image au meta, le linter de FB le trouve et le lit. Il FAIT afficher un aperçu. L'aperçu est vide. L'exception seulement que nous obtenons est pour les images qui ne sont pas sur ce site.
  • nous avons pensé qu'il y avait peut-être un anti-lixiviat sur cpanel ou le .htaccess qui empêchait les images de l'exposition, donc nous avons vérifié. Il n'y était pas. Nous avons même fait un < img src="[remote file]" > rapide sur un serveur entièrement différent et l'image apparaît bien.
  • nous avons pensé que c'était peut-être le og:type ou une autre bizarrerie avec une autre étiquette meta. Nous avons retiré tous d'entre eux, un à la fois et vérifié. Pas de changement. Juste des avertissements.
  • le même code sur un site Web différent apparaît sans aucun problème.
  • nous avons pensé peut-être il ne s'agissait pas de tirer des images parce que nous utilisons la même page produit(s) pour plusieurs produits (changer en fonction de la valeur get, c'est-à-dire," détails.le php?id=xxx") mais il tire toujours une image (à partir d'une url différente).
  • laissant og:image ou image_src désactivé, FB ne trouve aucune image.

je suis au bout de ma corde. Si je disais combien de temps moi-même et d'autres avons passé sur ce, vous seriez choqué. Le problème est que c'est une boutique en ligne. Nous ne pouvons absolument pas ne pas avoir d'images. Nous le devons. Nous avons une dizaine d'autres sites... C'est le seul avec des problèmes og:image . C'est aussi le seul sur https , donc nous avons pensé que c'était peut-être le problème. Mais nous ne pouvons pas trouver de précédent n'importe où sur le web pour cela.

ce sont les meta-tags: 

<meta property="og:title" content="[The product name]" /> 
<meta property="og:description" content="[the product description]" /> 
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-art-black.png" />
<meta property="og:image" content="http://www.[ADIFFERENTwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/ARShopHeader.png" />
<meta property="og:image" content="http://www.[ourwebsite].com/overdriven-blues-music-tshirt-art-black.JPG" />
<meta property="og:type" content="product"/>
<meta property="og:url" content="https://www.[ourwebsite].com/apparel-details.php?i=10047" />
<meta property="og:site_name" content="[our site name]" />      
<meta property="fb:admins" content="[FB-USER-ID-NUMBER]"/>
<meta name="title" content="[The product name]" />
<meta name="description" content="[The product description]" />
<link rel="image_src" href="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta name="keywords" content="[four typical keywords]">
<meta name="robots" content="noarchive">

dans le cas où vous le souhaitez, voici un lien vers l'une de nos pages de produits que nous avons été travail sur. [Lien raccourci pour essayer de freiner cette entrer dans les résultats de recherche pour notre site]: http://rockn.ro/114

EDIT - - - -

en utilisant l'outil grattoir "voir ce que facebook voit", nous avons pu voir ce qui suit: 

"image": [          
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-details-safari.png"
      },
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-art-safari.png"
      },
      {
         "url": "http://www.[theotherNONSECUREwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png"
      }
   ],

nous avons testé tous les liens qu'il a trouvé pour une seule page. Toutes étaient des images parfaitement valables.

MODIFIER 2 ----

nous avons essayé un test et a ajouté un sous-domaine sur le site non sécurisé (à partir duquel les images sont effectivement visibles via facebook). Sous-domaine http://img.[Non securesite].com. Nous avons ensuite placé toutes les images dans le dossier principal du sous-domaine et les avons référencées. Il ne tirerait pas ces images dans FB. Cependant, il pourrait toujours tirer toutes les images qui ont été référencées sur le domaine principal non sécurisé.

CONTOURNEMENT AFFICHÉ - - - -

grâce à Keegan, nous savons maintenant que c'est un bug de Facebook. Pour contourner le problème, nous avons placé un sous-domaine dans un autre site web NON-HTTPS et y avons jeté toutes les images. Nous avons référencé l'image de coordination http://img.otherdomain.com/[like-image.jpg] dans og:image sur chaque page de produit. Nous avons ensuite dû passer par FB Linter et exécuter chaque lien pour rafraîchir les données OG. Cela a fonctionné, mais la solution est une solution de contournement, et si la question https est corrigée et que nous revenons à l'utilisation du domaine naturel https, FB aura mis en cache les images à partir d'un site Web différent, ce qui complique les choses. Espérons que cette information aide à sauver quelqu'un d'autre de perdre 32 heures de codage de leur vie.

267
demandé sur sakibmoon 2012-01-13 22:26:14

18 réponses

j'ai rencontré le même problème et je l'ai signalé comme un bug sur le site du développeur Facebook. Il semble assez clair que l'URIs og:image utilisant le travail HTTP fonctionne très bien et que L'URIs utilisant HTTPS ne fonctionne pas. Ils ont maintenant reconnu qu'ils " examinaient la question."

le bug peut être vu ici: https://developers.facebook.com/bugs/260628274003812

75
répondu Keegan Quinn 2012-01-18 13:25:16

certaines propriétés peuvent être assorties de métadonnées supplémentaires. Ils sont spécifiés de la même manière que les autres métadonnées avec property et content , mais le property aura un extra:

la propriété og:image a quelques propriétés structurées optionnelles:

  • og:image:url - identique à og: image.
  • og:image:secure_url - An url alternative à utiliser si la page Web nécessite HTTPS.
  • og:image:type - A Type MIME pour cette image.
  • og:image:width - le nombre de pixels large.
  • og:image:height - le nombre de pixels haut.

Une image complète exemple: 

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> 
<meta property="og:image:type" content="image/jpeg" /> 
<meta property="og:image:width" content="400" /> 
<meta property="og:image:height" content="300" />

vous devez donc changer la propriété og:image de vos URL HTTPS en og:image:secure_url

Ex:

META TAG POUR L'IMAGE: 

<meta property="og:image:secure_url" content="https://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

META TAG FOR IMAGE: 

<meta property="og:image" content="http://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

Source: http://ogp.me/#structured < -- vous pouvez visiter ce site pour plus d'information.

J'espère que cela vous aidera.

EDIT: N'oubliez pas de ping facebook serveurs après la mise à jour de vos codes - URL Linter

116
répondu Syed I.R 2013-06-27 10:21:19

Je ne sais pas, si c'est seulement avec moi mais pour moi og:image ne fonctionne pas et il choisit le logo de mon site, même si débogueur facebook montre l'image correcte.

mais changer og:image en og:image:url a fonctionné pour moi. Espérons que cela aidera quelqu'un d'autre faisant face à la même question.

12
répondu lalit 2014-12-11 20:37:44

est arrivé de Google mais cela n'a pas été beaucoup d'aide pour moi. Il s'est avéré qu'il y a un rapport d'aspect minimum de 3:1 requis pour le logo. Le mien était presque 4: 1. J'ai utilisé Gimp pour le recadrer à exactement 3:1 et voilà - mon logo est maintenant affiché sur FB.

8
répondu priiiiit 2012-06-20 10:38:40

tl;dr être patient

j'ai fini ici parce que je voyais des images Vierges servies à partir d'un site https. Le problème était tout à fait différent cependant:

lorsque le contenu est partagé pour la première fois, le crawler Facebook rackette et cache les métadonnées de l'URL partagée. Le crawler doit voir une image au moins une fois avant qu'elle ne puisse être rendue. Cela signifie que la première personne qui partage un morceau de contenu ne verra pas une image rendue

[ https://developers.facebook.com/docs/sharing/best-practices/#precaching]

lors des tests, il a fallu facebook environ 10 minutes pour enfin montrer l'image rendue. Donc, pendant que je me grattais la tête et jetais des étiquettes og au hasard sur facebook (et suspectant le problème https mentionné ici), tout ce que j'avais à faire était d'attendre.

Comme cela pourrait vraiment empêcher les gens de partager vos liens pour la première fois, FB suggère deux façons de contourner ce comportement: a) lancer le débogueur OG sur tous vos liens: l'image sera mise en cache et prête à être partagée après ~10 minutes ou B) spécifier og:image:width et og:image:height. (Lire plus dans le lien ci-dessus)

se demandent toujours ce qui leur prend tant de temps ...

6
répondu panepeter 2017-07-02 17:35:42

j'ai eu la même erreur et rien de précédent n'a aidé, donc j'ai essayé de suivre la documentation originale de Open Graph Protocol et j'ai ajouté l'attribut de préfixe à ma balise html et tout est devenu génial. 

<html prefix="og: http://ogp.me/ns#">
4
répondu VoVaVc 2015-11-07 22:46:09

j'ai eu des problèmes similaires. J'ai supprimé la propriété="og:image:secure_url" et maintenant elle va frotter avec juste og:image. Parfois, moins c'est plus

1
répondu HappaGirl 2013-04-22 22:00:09

j'ai découvert un autre scénario qui peut causer ce problème. J'ai passé en revue toutes les étapes décrites dans la question et les réponses, mais le problème demeurait.

j'ai vérifié mes images et j'ai trouvé que certains de mes billets avaient des miniatures bien trop grandes dans og:image dans la gamme de plusieurs milliers de pixels et de plusieurs mégaoctets.

cela s'est produit en raison de la migration récente de WP à Jekyll, j'ai optimisé mon images avec gulfp, mais utilisé les images originales dans og: image par erreur.

Facebook nous donne les recommandations suivantes À partir d'aujourd'hui :

utiliser des images qui sont au moins 1200 x 630 pixels pour le meilleur affichage sur haute résolution des appareils. Au minimum, vous devez utiliser des images qui sont de 600 x 315 pixels pour afficher les messages de page de lien avec des images plus grandes. Les Images peuvent atteindre 8 Mo.

il y a donc une limite supérieure de 8 Mo.

1
répondu Mark 2016-03-31 10:56:17

j'ai rencontré le même problème et puis j'ai remarqué que j'avais un domaine différent pour le og:url

une fois j'ai fait en sorte que le domaine était le même pour og:url et og:image il a fonctionné.

Espérons que cette aide.

1
répondu Darren Hall 2016-08-02 21:04:19

n'oubliez pas de rafraîchir les serveurs par:

Débogueur Facebook

Et cliquez sur "Collecter de nouvelles informations"

1
répondu FrenchFalcon 2017-07-24 18:48:48

dans mon cas, le problème était de ne pas fournir certificat racine CA . J'ai compris après avoir utilisé: https://www.ssllabs.com/ssltest/analyze.html pour analyser la configuration SSL.

1
répondu instead 2017-11-10 00:57:09

je peux voir que le débogueur récupère 4 og:image tags de votre URL.

la première image est la plus grande et prend donc plus de temps à charger. Essayez de rétrécir cette première image vers le bas ou de changer l'ordre pour montrer une image plus petite d'abord.

0
répondu Lix 2012-01-13 23:44:44

en outre, ce problème se produit également lorsque vous ajoutez une histoire générée par l'utilisateur (où vous n'utilisez pas og:image). Par exemple: 

POST /me/cookbook:eat?
  recipe=http://www.example.com/recipes/pizza/&
  image[0][url]=http://www.example.com/recipes/pizza/pizza.jpg&
  image[0][user_generated]=true&
  access_token=VALID_ACCESS_TOKEN

ce qui précède ne fonctionnera qu'avec http et non avec https. Si vous utilisez https, vous obtiendrez une erreur qui dit: Image ci-jointe () pas de téléchargement

0
répondu Aamir Quraishi 2013-09-13 22:48:51

comme j'ai accidentellement trouvé, image blanche transparente vient avec l'en-tête de réponse indiquant la cause possible du problème.

  1. aller au débogueur à https://developers.facebook.com/tools/debug/og/object/
  2. mettez votre URL
  3. en bas, facebook affiche votre " image "(transparent 1x1 GIF)
    1. L'Image est liée à votre image originale - aucun point l'appuyant
    2. appuyez sur la droite et visualisez l'image (vous obtiendrez quelque chose comme https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=... )
  4. activez l'onglet Net sur les outils firebug/ developer, rafraîchissez la page si nécessaire
  5. , Vous obtiendrez x-error-detail en-tête de réponse avec explication

Par exemple, dans mon cas c'était Invalid image extension for URL: https://[mydomain]/[myfilename].jpg

la véritable question en litige dans mon cas était liée à prerender.io .

comme il s'avère, si l'image est demandée via prerender, il est converti en HTML. Quelque chose comme ceci: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body style="margin: 0px;"><img style="-webkit-user-select: none; cursor: -webkit-zoom-in; " src="https://[yourdomain].com/[yourfilename].jpg" width="1078" height="718"></body>
</html>

c'est soit un bug dans prerender lui-même, soit il est supposé être configuré dans votre proxy pour ne pas utiliser prerender pour les requêtes *.jpg (même si elles sont demandées par le bot Facebook).

il est vraiment difficile de le remarquer, car prerender n'est utilisé que sur certains en-têtes d'agent utilisateur.

0
répondu Marius Balčytis 2016-03-31 19:07:55

de ce que j'ai observé, je vois que lorsque votre site web est public et même si l'url de l'image est https, il fonctionne très bien.

0
répondu AK M 2016-09-07 10:42:48

pour moi cela a fonctionné: 

<meta property="og:url" content="http://yoursiteurl" />
    <meta property="og:image" content="link_to_first_image_if_you_want" />
    <meta property="og:image" content="link_to_second_image_if_you_want" />
    <meta property="og:image:type" content="image/jpeg" /> 
    <meta property="og:image:width" content="400" /> 
    <meta property="og:image:height" content="300" />
    <meta property="og:title" content="your title" />
    <meta property="og:description"  content="your text about homepage"/>
0
répondu Dr.MTR 2018-01-29 11:48:14

symptômes similaires (Facebook et autres ne récupèrent pas correctement og: image et autres actifs sur https) peuvent se produire lorsque le certificat https du site n'est pas entièrement conforme.

le certificat https de votre site peut sembler valide (touche verte dans le navigateur et tout), mais il ne sera pas raclé correctement s'il manque un certificat intermédiaire ou chaîne. Cela peut mener à de nombreuses heures perdues à vérifier et à revérifier toutes les caches et les méta-étiquettes.

pourrait ce n'était pas votre problème, mais il pourrait y en avoir d'autres avec des symptômes similaires (comme le mien). Il y a plusieurs façons de vérifier votre certificat - celui que j'ai utilisé par hasard: https://www.sslshopper.com/ssl-checker.html

0
répondu Lance 2018-05-01 02:38:03

après plusieurs heures de tests et d'essais...

j'ai résolu ce problème aussi simple que possible. Je remarque qu'ils utilisent des " pages de test "dans la Page des développeurs Facebook qui ne contient que les balises" og " et du texte dans la balise body qui renvoie à ces balises og.

alors qu'est-ce que j'ai fait?

j'ai créé une seconde vue dans mon application, contenant les mêmes choses qu'ils utilisent.

et comment je sais est Facebook qui accède à ma page pour que je puisse changer la vue? Ils ont un Agent utilisateur unique: "facebookexternalhit / 1.1"

-3
répondu Bonieky Lacerda 2013-04-01 19:01:22