FB OpenGraph og:image ne tire pas les images (peut-être https ?)

Question

D'abord, je ne pas Je pense qu'il s'agit d'un problème double. J'ai beaucoup cherché des problèmes identiques ou similaires sur SO, et en raison de la nature du dépannage avant de demander, je pense que ce problème est unique.

Facebook ne peut pas saisir mon 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'ont aucun avertissement ou erreur.
• Il trouve les images que nous avons liées dans le " og:image "mais elles n'apparaissent pas. En revanche, lorsque l'on clique sur l'image (ou les images), elle(s) existe(nt) et on y accède directement.
• Il affiche une image - une image hébergée sur un serveur non-https.
• Nous avons essayé des images carrées, des jpegs, des pngs, des tailles plus grandes et plus petites. Nous avons placé les images directement dans public_html. Aucune ne s'affiche.
• Ce n'est pas une erreur de mise en cache, car lorsque nous ajoutons une autre og:image à la méta, le linter de FB le trouve et le lit. Il affiche un aperçu. L'aperçu est vide. Le site uniquement L'exception que nous recevons concerne des images qui ne sont pas sur ce site.
• Nous avons pensé que peut-être il y avait un anti-blanchiment sur cpanel ou le .htaccess qui empêchait les images de s'afficher, alors on a vérifié. Il n'y en avait pas. Nous avons même fait un rapide < img src="[remote file]" > sur un serveur complètement différent et l'image s'affiche bien.
• On a pensé que c'était peut-être le og:type ou une autre bizarrerie avec une autre métabalise. Nous les avons toutes supprimées, une par une, et nous avons vérifié. Aucun changement. Juste des avertissements.
• Le même code sur un autre site web s'affiche sans aucun problème.
• Nous avons pensé peut-être il ne tirait pas les images parce que nous utilisons les mêmes pages de produits pour plusieurs produits (en les changeant en fonction de la valeur obtenue, par exemple, "details.php?id=xxx") mais il tire toujours une image (d'une url différente).
• En laissant tout og:image ou image_src off, FB ne trouve pas d'images.

Je suis au bout du rouleau. Si je vous disais combien de temps moi et d'autres avons passé sur ce sujet, vous seriez choqués. Le problème est qu'il s'agit d'une boutique en ligne. Nous ne pouvons absolument, positivement, PAS avoir d'images. Nous le devons. Nous avons une dizaine d'autres sites... C'est le seul avec og:image problèmes. C'est aussi le seul sur https Nous avons donc pensé que c'était peut-être le problème. Mais nous n'avons pas trouvé de précédent sur le web à ce sujet.

Ce sont les métabalises :

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

Au cas où vous le souhaiteriez, voici un lien vers l'une de nos pages produits sur laquelle nous avons travaillé. [Lien raccourci pour essayer d'éviter que cela n'apparaisse dans les résultats de recherche de notre site] : http://rockn.ro/114

EDIT ----

En utilisant l'outil de grattage "see what facebook sees", 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és pour une seule page. Tous étaient des images parfaitement valides.

EDIT 2 ----

Nous avons fait un test et ajouté un sous-domaine vers le site web NONSECURE (dont les images sont en fait visibles via facebook). Le sous-domaine était http://img. [nonsecuresite].com. Nous avons ensuite placé toutes les images dans le dossier du sous-domaine principal et les avons référencées. Ces images ne sont pas affichées dans FB. En revanche, toutes les images référencées dans le domaine principal non sécurisé étaient affichées.

A POSTÉ UNE SOLUTION DE CONTOURNEMENT ----

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 déposé toutes les images. Nous avons référencé la coordination http://img.otherdomain.com/[like-image.jpg] image dans og:image sur chaque page de produit. Nous devions ensuite passer par FB Linter et exécuter CHAQUE lien pour rafraîchir les données d'OG. Cette solution a fonctionné, mais il s'agit d'une solution de fortune, et si l'on ne peut pas la mettre en œuvre, il faudra la remplacer. https Si le problème est résolu et que nous utilisons à nouveau le domaine https naturel, FB aura mis en cache les images à partir d'un autre site Web, ce qui compliquera les choses. J'espère que ces informations permettront à quelqu'un d'autre d'éviter de perdre 32 heures de codage sur le site de FB. leur vie.

Answer 1

Certaines propriétés peuvent être associées à des métadonnées supplémentaires. Celles-ci sont spécifiées de la même manière que les autres métadonnées avec l'option property et content mais le property aura un supplément :

Le site og:image possède quelques propriétés structurées facultatives :

• og:image:url - Identique à og:image.
• og:image:secure_url - Une url de remplacement à utiliser si la page web nécessite le protocole HTTPS.
• og:image:type - A Type MIME pour cette image.
• og:image:width - Le nombre de pixels de largeur.
• og:image:height - Le nombre de pixels de hauteur.

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" />

Donc vous devez changer og:image pour vos URLs HTTPS à og:image:secure_url

Ex :

MÉTABALISE HTTPS POUR L'IMAGE :

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

MÉTA-TAG HTTP POUR L'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 aidera.

EDIT : N'oubliez pas d'envoyer un ping aux serveurs de Facebook après avoir mis à jour vos codes. URL Linter

Answer 2

J'ai rencontré le même problème et l'ai signalé comme un bogue sur le site des développeurs de Facebook. Il semble assez clair que og:image Les URI utilisant le protocole HTTP fonctionnent parfaitement et les URI utilisant le protocole HTTPS ne fonctionnent pas. Ils ont maintenant reconnu qu'ils "examinent la question".

Mise à jour : Depuis 2020, le bug n'est plus visible dans le système de tickets de Facebook. Ils n'ont jamais répondu et je ne crois pas que ce comportement ait changé. Cependant, en spécifiant l'URI HTTPS dans le champ og:image:secure semble fonctionner correctement.

Answer 3

Je suis arrivé ici par Google, mais ça ne m'a pas beaucoup aidé. 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.

Answer 4

J'ai eu des problèmes similaires. J'ai supprimé la propriété="og:image:secure_url" et maintenant il se frotte avec juste og:image. Parfois, le moins est le mieux

Answer 5

Je peux voir que le Le débogueur récupère 4 og:image tags 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 changez l'ordre pour afficher une image plus petite en premier.