web-dev-qa-db-fra.com

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

Premièrement - I do not croyez qu'il s'agit d'un problème en double. J'ai longuement recherché des problèmes identiques ou similaires sur SO et, en raison de la nature même du dépannage avant de poser la question, je pense 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 cela pourrait avoir quelque chose à voir avec https://...

  • J'ai vérifié http://developers.facebook.com/tools/debug et n'ai aucun avertissement ou erreur.
  • Il recherche les images auxquelles nous sommes liés dans le "og:image", mais elles sont vides. Lorsque nous cliquons sur les images, cependant, elles existent et cela leur prend directement.
  • Il montre une seule image - une image hébergée sur un serveur non-https.
  • Nous avons essayé des images carrées, jpegs, pngs, des tailles plus grandes et des tailles plus petites. Nous avons mis les images dans public_html. Zéro apparaissent.
  • Ce n'est pas une erreur de cache, car lorsque nous ajoutons un autre og:image à la méta, le linter du FB le trouve et le lit. Il montre un aperçu. L'aperçu est vide. L'exception only que nous obtenons concerne les images qui ne figurent pas sur ce site.
  • Nous pensions que peut-être il y avait un anti-lessivage sur cpanel ou le .htaccess qui empêchait l'affichage des images, alors nous avons vérifié. Il n'y avait pas. Nous avons même fait un < img src="[remote file]" > rapide sur un serveur entièrement différent et l'image s'affiche bien.
  • Nous pensions que c'était peut-être le og:type ou une autre bizarrerie avec une autre balise méta. Nous les avons tous retirés un à la fois et avons vérifié. Pas de changement. Juste des avertissements.
  • Le même code sur un site Web différent apparaît sans problème.
  • Nous pensions peut-êtreil ne tirait pas les images car nous utilisons les mêmes pages de produits pour plusieurs produits (en les modifiant en fonction de la valeur de get, c'est-à-dire "details.php? Id = xxx"), mais c'est toujours en tirant dans une image (à partir d'une URL différente).
  • Laissant n'importe quel og:image ou image_src désactivé, le FB ne trouve aucune image.

Je suis au bout du rouleau. Si je vous disais combien de temps, moi-même et les autres, avons consacré à cela, vous seriez choqué. Le problème est qu'il s'agit d'un magasin en ligne. Nous ne pouvons absolument PAS avoir d'images. Nous devons. Nous avons une dizaine d’autres sites ... C’est le seul qui pose des problèmes avec og:image. C'est aussi le seul sur https, alors nous avons pensé que c'était peut-être le problème. Mais nous ne pouvons trouver aucun précédent sur le Web pour cela.

Ce sont les méta-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">

Si vous le souhaitez, voici un lien vers l'une des pages de produits sur lesquelles nous travaillons. [Lien raccourci pour tenter de limiter les résultats de recherche de notre site]: http://rockn.ro/114

MODIFIER ----

En utilisant l'outil "voir ce que Facebook voit" racleur, 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 trouvés pour une seule page. Toutes étaient des images parfaitement valables.

EDIT 2 ----

Nous avons essayé un test et ajouté un sous-domaineau site Web NONSECURE (à partir duquel les images sont réellement visibles via Facebook). Le sous-domaine était http: // img. [Nonsecuresite] .com. Nous avons ensuite placé toutes les images dans le sous-domaine principal. dossier et référencé ceux-ci. Il ne tirerait pas ces images dans FB. Cependant, il tirerait toujours les images qui ont été référencées sur le domaine principal non sécurisé.

Contournement posté ----

Grâce à Keegan, nous savons maintenant qu'il s'agit d'un bug dans Facebook. Pour contourner le problème, nous avons placé un sous-domaine sur un autre site Web NON-HTTPS et avons vidé toutes les images qu'il contient. Nous avons référencé l’image http://img.otherdomain.com/[like-image.jpg] de coordination dans og:image sur chaque page de produit. Nous avons ensuite dû passer par FB Linter et exécuter EVERY link pour actualiser les données OG. Cela a fonctionné, mais la solution est une solution palliative, et si le problème https est résolu et que nous retournons à l'utilisation du domaine naturel https, FB aura mis en cache les images d'un autre site Web, ce qui complique les choses. Espérons que cette information aide à sauver quelqu'un d'autre de perdre 32 heures de codage de leurvie.

facebookfacebook-graph-apiopengraphfacebook-opengraphopen-graph-protocol
280
Cyprus106

J'ai rencontré le même problème et l'ai signalé comme un bug sur le site de développement de Facebook. Il semble assez clair que og: les URI d’image utilisant HTTP fonctionnent parfaitement et les URI utilisant HTTPS non. Ils ont maintenant reconnu qu'ils "étudient la question".

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

78
Keegan Quinn

Des métadonnées supplémentaires peuvent être associées à certaines propriétés. Celles-ci sont spécifiées de la même manière que les autres métadonnées avec property et content, mais la property aura extra:

La propriété og:image possède des propriétés structurées facultatives:

  • og:image:url - Identique à og: image. 
  • og:image:secure_url - Une URL alternative à utiliser si la page Web requiert HTTPS. 
  • og:image:type - Un type. MIME pour cette image. 
  • og:image:width - Le nombre de pixels de large.
  • og:image:height - Le nombre de pixels élevé.

Un exemple d'image complète:

<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 modifier la propriété og:image de vos URL HTTPS en og:image:secure_url

Ex:

HTTPS META TAG POUR IMAGE:

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

HTTP META TAG POUR 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'informations.

J'espère que cela vous aide.

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

121
Syed I.R

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

Mais changer og:image en og:image:url a fonctionné pour moi. J'espère que cela aidera tout le monde confronté à un problème similaire.

13
lalit

Je viens de Google mais cela ne m'a pas beaucoup aidé. Il s'est avéré qu'un format minimum de 3: 1 est requis pour le logo. Le mien était presque 4: 1. J'ai utilisé Gimp pour le réduire à exactement 3: 1 et le tour est joué - mon logo est maintenant affiché sur FB.

8
priiiiit

tl; dr - soyez patient

Je me suis retrouvé ici parce que je voyais des images vierges provenant d'un site https. Le problème était cependant différent:

Lorsque le contenu est partagé pour la première fois, le robot d'exploration Facebook efface et met en cache les métadonnées de l'URL partagée. Le robot d'exploration doit voir une image au moins une fois avant de pouvoir la restituer. Cela signifie que la première personne qui partage un contenu ne verra pas d'image rendue

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

Pendant les tests, il a fallu à facebook environ 10 minutes pour finalement afficher l'image rendue. Donc, pendant que je me gratifiais la tête et jetais des tags og aléatoires sur Facebook (et que je soupçonnais le problème https mentionné ici), tout ce que je devais faire était d’attendre.

Comme cela pourrait réellement empêcher les gens de partager vos liens pour la première fois, FB suggère deux manières de contourner ce problème: A) exécuter 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) en spécifiant og: image: largeur et og: image: hauteur. (Lire la suite dans le lien ci-dessus)

Vous vous demandez toujours ce qui leur prend si longtemps ...

6
panepeter

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

<html prefix="og: http://ogp.me/ns#">
4
VoVaVc

N'oubliez pas d'actualiser les serveurs via: 

Facebook Debugger

Et cliquez sur "Collect new info"

2
Scaraux

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

1
HappaGirl

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

1
instead

J'ai découvert un autre scénario qui peut causer ce problème. J'ai parcouru toutes les étapes décrites dans la question et les réponses, mais le problème est resté.

J'ai vérifié mes images et découvert que certaines de mes publications avaient des images miniatures beaucoup trop grandes dans og:image dans une plage de plusieurs milliers de pixels et de plusieurs mégaoctets. 

Cela est dû à la migration récente de WP vers Jekyll. J'ai optimisé mes images avec gulp, mais j'ai utilisé les images d'origine dans og: image par erreur. 

Facebook nous donne les recommandations suivantes à compter d’aujourd’hui : 

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 . Les images peuvent avoir une taille maximale de 8 Mo.

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

1
Mark

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, je me suis assuré que le domaine était le même pour og:url et og:image cela fonctionnait.

J'espère que cela t'aides.

1
Darren Hall

D'après ce que j'ai observé, je constate que lorsque votre site Web est public et même si l'URL de l'image est https, cela fonctionne parfaitement.

0
AK M

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
Dr.MTR

En outre, ce problème se produit également lorsque vous ajoutez une histoire générée par l'utilisateur (pour laquelle 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 pas avec https. Si vous utilisez https, vous obtiendrez une erreur disant: Attached image () n'a pas pu télécharger.

0
Aamir Quraishi

Je peux voir que le débogueur récupère 4 balises og:image à partir de votre URL.

La première image est la plus grande et prend donc le plus de temps à charger. Essayez de réduire la première image ou de changer l'ordre pour afficher une image plus petite en premier.

0
Lix

Dans mon cas, il semble que le robot ait juste un bogue. J'ai essayé:

  • Changer les liens en http seulement
  • Suppression de l'espace blanc final
  • Revenir à http complètement
  • Réinstallation du site web
  • Installer un tas de plugins OG (j'utilise WordPress)
  • Suspecter le serveur a une mauvaise configuration étrange qui bloque les bots (parce que tous les vérificateurs OG ne peuvent pas récupérer les balises et que les autres requêtes sur mes sites sont instables)

Aucune de ces œuvres. Cela m'a coûté une semaine. Et soudainement sorti de nulle part, il semble que cela fonctionne à nouveau.

Voici mes recherches, si quelqu'un rencontre à nouveau ce problème:

En outre, il y a plus de contrôleurs que le débogueur d'objets de Facebook à vérifier: OpenGraphCheck.com , testeur de graphes ouverts d'Abhinay Rathore , - Codes intégrés d'Iframely , Validateur de carte | Développeurs Twitter .

0
Ooker

Comme je l’ai découvert accidentellement, une image vierge transparente est fournie avec un en-tête de réponse indiquant la cause possible du problème.

  1. Accédez au débogueur à l’adresse https://developers.facebook.com/tools/debug/og/object/
  2. Mettez votre URL
  3. En bas, facebook montre votre "image" (1x1 GIF transparent)
    1. L'image est liée à votre image d'origine - inutile d'appuyer dessus
    2. Appuyez à droite et affichez l'image (vous obtiendrez quelque chose comme https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...)
  4. Activer l'onglet Net sur les outils firebug/developer, actualiser la page si nécessaire
  5. Vous aurez l'en-tête de réponse x-error-detail avec l'explication

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

Le vrai problème dans mon cas était lié à prerender.io .

Il se trouve que si une image est demandée via un prérender, elle est convertie en HTML. Quelque chose comme ça:

<!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>

Il s’agit soit d’un bogue dans Prerender lui-même, soit d’être censé être configuré dans votre proxy pour ne pas utiliser Prerender pour les demandes *.jpg (même si elles sont demandées par le bot Facebook).

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

0
Marius Balčytis

J'ai sorti http:// de mon og:image et l'ai remplacé par un tout simplement vieux www., puis tout a bien fonctionné.

Vous pouvez utiliser cet outil de Facebook pour réinitialiser votre cache d'effacement d'images et tester l'URL qu'il extrait pour l'image de démonstration.

0
Albert Renshaw

Eu un problème similaire aujourd'hui, que le Partage Debugger m'a aidé à résoudre. Il semble que Facebook ne puisse pas (actuellement) comprendre les images avec les métadonnées XMP incorporées. Lorsque j'ai remplacé les images de nos articles par des versions sans métadonnées XMP et que j'ai retravaillé la page (à l'aide du partage du débogueur), le problème a disparu. Un éditeur hexadécimal vous aidera à déterminer si votre image contient ou non des métadonnées XMP.

0
Brett Donald

Une fois que vous mettez à jour la balise meta, assurez-vous que le lien de contenu (image) est un chemin absolu et allez icihttps://developers.facebook.com/tools/debug/sharing entrez le lien de votre site et cliquez sur scrape again à la page suivante.

0
Thyagu

Des symptômes similaires (Facebook et al ne récupèrent pas correctement og: image et autres éléments via https) peuvent se produire lorsque le certificat https du site n'est pas totalement conforme. 

Le certificat https de votre site peut sembler valide (clé verte dans le navigateur, etc.), mais il ne s'effacera pas correctement s'il manque un certificat intermédiaire ou en chaîne. Cela peut entraîner de nombreuses heures perdues à vérifier et revérifier tous les caches et balises méta. 

Cela n’aurait peut-être pas été votre problème, mais il pourrait s’agir d’autres personnes présentant des symptômes similaires (comme le mien). Il existe de nombreuses façons de vérifier votre certificat - celui que j’ai utilisé: https://www.sslshopper.com/ssl-checker.html

0
Lance