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

https://stackoverflow.com/questions/8855361

28-10-2019
|

Question

Tout d'abord - I ne pas crois que c'est un problème en double. J'ai cherché des problèmes identiques ou similaires sur de façon extensive, et en raison de la nature de 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 qu'il pourrait avoir quelque chose à voir avec https://...

J'ai vérifié http://developers.facebook.com/tools/debug et ont zéro avertissements ou erreurs.
Il est de trouver les images que nous Linked dans le « og:image », mais ils montrent en blanc. Lorsque nous cliquez sur l'image (s), mais ils existent et il suffit directement à eux.
il montre une image -. Une image hébergée sur un serveur non https
Nous avons essayé des images carrées, format jpeg, png, des tailles plus grandes et plus petites tailles. Nous avons mis les images en plein public_html. Zéro font leur apparition.
Ce n'est pas une erreur de mise en cache, parce que lorsque l'on ajoute une autre og:image à la méta, le linter de FB ne trouve et lire. Il montre un aperçu. L'aperçu est vide. uniquement exception que nous obtenons est des images qui ne sont pas sur ce site.
Nous avons pensé que peut-être il y avait un certain anti-Leach sur cpanel ou .htaccess qui empêchait les images d'apparaître, alors nous avons. Il n'y avait pas. Nous avons même fait un < img src="[remote file]" > rapide sur un serveur tout à fait différent et l'image apparaît bien.
Nous avons pensé que peut-être il était le og:type ou d'une autre bizarrerie avec une autre balise meta. Nous avons retiré tous, un à la fois et vérifié. Pas de changement. Juste des avertissements.
Le même code sur un site de spectacles différents sans aucun problème.
Nous avons pensé peut-être il ne faisait pas des images parce que nous utilisons la même page produit (s) pour plusieurs produits (changer basé sur la valeur get, à savoir « details.php? Id = xxx ") mais il est toujours en tirant dans une image (d'une URL différente).
Laisser une og:image ou image_src off, FB ne trouve pas d'images.

Je suis à la fin de ma corde. Si je disais combien de temps moi-même et d'autres ont passé à ce sujet, vous seriez surpris. Le problème est que c'est une boutique en ligne. Nous absolument, positivement peut ne pas avoir des images. Nous devons. Nous avons des sites une dizaine d'autres ... Ceci est le seul à avoir des problèmes de og:image. Il est aussi le seul sur https, donc nous avons pensé que peut-être était le problème. Mais nous ne pouvons trouver aucun précédent partout 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 voulez, voici un lien vers une de nos pages de produits que nous avons travaillé. [Lien raccourci pour tenter de freiner cette entrer dans les résultats de recherche pour notre site]: http://rockn.ro/114

EDIT ----

Utilisation de la « voir ce que facebook voit » grattoir, 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é une seule page. Tous étaient parfaitement les images valides.

EDIT 2 ----

Nous avons essayé un test et a ajouté une sous-domaine sur le site non sécurisé (dont les images sont effectivement visibles à travers facebook). Subdomain était http: //. Img [nonsecuresite] .com. Nous avons ensuite mis toutes les images dans le dossier principal du sous-domaine et ceux référencés. Il ne serait pas tirer ces images dans FB. Cependant, il serait encore tirer toutes les images qui ont été référencés sur le domaine principal non sécurisé.

PARUTION ---- Contournement

Merci à Keegan, nous savons maintenant que ce bogue dans Facebook. Pour contourner ce problème, nous avons placé un sous-domaine dans un autre site non HTTPS et largués toutes les images en elle. Nous référencent image http://img.otherdomain.com/[like-image.jpg] de coordination dans og:image sur chaque page produit. Nous avons dû passer par FB Linter et exécuter chaque lien pour actualiser les données OG. This travaillé, mais la solution est une solution sparadrap, et si la question de https est fixe et nous allons revenir à l'utilisation du domaine https naturel, FB aura mis en cache les images à partir 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 leur la vie.

La solution

je suis tombé sur le même problème et il a rapporté un bug sur le site développeur Facebook. Il semble clair Gracieuse og: URIs d'image en utilisant le travail HTTP très bien et URIs en utilisant le protocole HTTPS ne le font pas. Ils ont maintenant reconnu qu'ils sont « à la recherche dans tout cela. »

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

Autres conseils

Certaines propriétés peuvent avoir des métadonnées supplémentaires qui leur sont rattachés. Ceux-ci sont spécifiées de la même manière que d'autres métadonnées avec property et content, mais le property aura supplémentaire:

La propriété og:image a des propriétés structurées en option:

og:image:url - Identique à og: image.
og:image:secure_url - Un URL alternative à utiliser si la page Web nécessite HTTPS.
og:image:type - A le type MIME pour cette image.
og:image:width -. Le nombre de pixels de large
og:image:height -. Le nombre de pixels de haut

Un exemple de l'image:

<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 changer la propriété de og:image pour votre URL HTTPS à og:image:secure_url

Ex:

HTTPS TAG META IMAGE POUR:

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

HTTP TAG META IMAGE POUR:

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

Espérons que cela vous aide.

EDIT: Ne pas oublier de serveurs ping facebook après la mise à jour vos codes - URL Linter

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

Mais le changement og:image à og:image:url a fonctionné pour moi. Espérons que cela aide tout le monde face à d'autre question similaire.

Vous avez ici de Google, mais cela n'a pas beaucoup d'aide pour moi. Il est avéré qu'il ya un rapport d'aspect minimum de 3: 1 nécessaire pour le logo. Le mien était presque 4: 1. Je Gimp pour recadrer exactement 3:. 1 et le tour est joué - mon logo est maintenant affiché sur FB

tl; dr - être patient

J'ai fini ici parce que je voyais des images en blanc servi d'un site https. Le problème était tout à fait différent si:

Lorsque le contenu est partagé pour la première fois, le robot Facebook va gratter et mettre en cache les métadonnées de l'URL partagée. Le robot d'exploration doit voir une image au moins une fois avant qu'il 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 / meilleures pratiques / # precaching]

Lors du test, il a fallu facebook 10 minutes pour afficher enfin l'image rendue. Donc, pendant que je grattais la tête et jeter les balises og aléatoires sur Facebook (et soupçonnant le problème https mentionné ici), tout ce que je devais faire était d'attendre.

car 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) l'exécution du Débogueur OG sur tous vos liens: l'image sera mis en mémoire cache et prêt pour le partage après ~ 10 minutes ou b) spécifiant og: image: largeur et og: image: hauteur. (En savoir plus sur le lien ci-dessus)

Vous vous demandez toujours si ce qui les prend tellement de temps ...

J'ai eu la même erreur et rien de précédent ont aidé, j'ai donc essayé de suivre la documentation originale de Open Graph Protocol et j'ajouté attribut de préfixe à mon balise html et tout est devenu impressionnant.

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

J'ai eu des problèmes similaires. J'ai enlevé la propriété = « og: image: SECURE_URL » et maintenant il frottera avec juste og: image. Parfois, moins est plus

Je découvre un autre scénario qui peut provoquer ce problème. Je suis passé par toutes les étapes décrites dans la question et les réponses, toujours le problème est resté.

J'ai vérifié mes images et a constaté que certains de mes messages avaient trop grandes images miniatures dans og:image dans la gamme de plusieurs milliers de pixels et plusieurs méga-octets.

Ceci est arrivé en raison de la migration récente de WP à Jekyll, je mes images avec optimisé gulp, mais utilisé les images originales en 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 dispositifs à haute résolution. Au minimum, vous devez utiliser des images sont de 600 x 315 pixels à afficher les messages de page de lien avec des images plus grandes. Les images peuvent être jusqu'à 8MB.

Donc, il y a une limite supérieure de 8MB.

Comme je l'ai trouvé par hasard, image en blanc transparent est livré avec en-tête de réponse indiquant les causes possibles du problème.

Aller au débogueur https://developers.facebook.com/tools/ debug / og / objet /
Mettez votre URL
En bas, facebook montre votre "image" (GIF transparent 1x1)
1. L'image est lié à votre image originale - aucun point pressant
2. droite Appuyez sur l'image de la vue (vous obtiendrez quelque chose comme https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...)
Activer l'onglet net sur les outils Firebug / développeur, rafraîchir la page si nécessaire
Vous obtiendrez en-tête de réponse x-error-detail avec des explications

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

La vraie question dans mon cas était lié à prerender.io .

Il se trouve que, si l'image est demandée par 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>

Il est soit bogue dans prerender lui-même, ou il est censé être configuré dans votre proxy de ne pas utiliser prerender pour les demandes de *.jpg (même si elles sont demandées par bot Facebook).

Il est vraiment difficile de le remarquer, comme prerender est utilisé sur certains en-têtes agent utilisateur.

je suis tombé sur la même question et je remarque que j'avais un autre domaine pour la og:url

Une fois que je me suis assuré que le domaine était le même pour og:url et og:image il a travaillé.

Hope this helps.

Ne pas oublier de rafraîchir les serveurs par:

Facebook Debugger

et cliquez sur "de nouvelles informations Collect"

Dans mon cas, le problème a été en ne fournit pas CA certificat racine . Je me suis dit qu'il après avoir utilisé: https://www.ssllabs.com/ssltest/analyze.html pour analyser la configuration SSL.

Des symptômes similaires (Facebook et al pas correctement fetching og: image et d'autres actifs sur https) peuvent se produire lorsque le certificat de https le site est pas entièrement conforme.

Votre site de https cert peut sembler valide (touche verte dans le navigateur et tout), mais il ne sera pas gratter correctement s'il manque un certificat intermédiaire ou d'une chaîne. Cela peut conduire à de nombreuses heures gaspillées vérifier et revérifier toutes les différentes caches et les balises meta.

peut-être pas été votre problème, mais pourrait être d'autres avec des symptômes similaires de (comme le mien). Il y a plusieurs façons de vérifier votre cert - celui que j'arrivé à utiliser: https: //www.sslshopper .com / ssl-checker.html

En outre, ce problème se produit également lorsque vous ajoutez une histoire généré 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

La volonté ci-dessus ne fonctionnent qu'avec http et non par https. Si vous utilisez https, vous obtiendrez une erreur qui dit: image ci-jointe () a échoué à télécharger

Had a aujourd'hui le même problème que le Partage Debugger m'a aidé à résoudre. Il semble que Facebook ne peut pas (actuellement) comprendre des images avec des métadonnées XMP intégré. Lorsque je l'ai remplacé les images sur nos articles avec les versions sans métadonnées XMP, et re-gratté la page (en utilisant le partage Debugger), le problème a disparu. Un éditeur hexadécimal vous aidera à voir si oui ou non votre image contient des métadonnées XMP.

Je pris http:// de mon og:image et l'a remplacé avec le vieux www. tout simplement il a commencé à travailler très bien.

Vous pouvez utiliser cet outil, par Facebook pour réinitialiser le cache de votre éraflure d'image et Testez l'URL, il tire pour l'image de démonstration.

Dans mon cas, il semble que le robot est juste d'avoir un bug. J'ai essayé:

Modification des liens vers http uniquement
Suppression d'espace blanc fin
Le retour à http complètement
Réinstaller le site
Installation d'un tas de plugins OG (j'utiliser WordPress)
Soupçonnant le serveur a une mauvaise configuration bizarre qui bloque les bots (parce que tous les contrôleurs de OG sont incapables de chercher des balises, et d'autres demandes à mes sites sont instables)

Aucune de ces œuvres. Cela m'a coûté une semaine. Et tout à coup sorti de nulle part, il semble fonctionner à nouveau.

Voici mes recherches, si quelqu'un répond à nouveau ce problème:

En outre, il y a plus de dames autres que le Facebook objet Debugger pour vous de vérifier: OpenGraphCheck.com , open graph Tester de Abhinay Rathore , Iframely de codes Intégrer , Carte Validator | Twitter Développeurs .

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

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

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

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

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

Après plusieurs heures de tests et d'essayer des choses ...

Je résolu ce problème aussi simple que possible. Je remarque que « ils utilisent des pages de test » dans Facebook Développeurs page contenant uniquement les balises « og » et un texte dans la balise du corps qui Affluents cette balises og.

Alors qu'ai-je fait?

Je créé une seconde vue dans mon application, contenant ce même choses qu'ils utilisent.

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

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow