FB OpenGraph og:image pas en tirant des images (éventuellement https?)
D'abord, je ne pas crois que c'est un double problème. J'ai cherché même ou des problèmes similaires sur la 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 mon og:image
fichiers et j'ai essayé de chaque solution habituelle. 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 des avertissements ou des erreurs.
- C'est de trouver les images que nous avons lié à la "
og:image
", mais ils montrent vide. Quand on clique sur l'image(s), mais ils existent et il faut est directement à eux. - Il N'afficher qu'une image, une image hébergée sur un serveur non https.
- Nous avons essayé des images carrées, jpeg, png, tailles plus grandes et plus petites tailles. Nous avons mis les images dans public_html. Zéro sont en train d'apparaître.
- Ce n'est pas une mise en cache d'erreur, parce que quand nous ajoutons un autre
og:image
pour le meta, FB est linter ne trouver et de le lire. Il FAIT afficher un aperçu. L'aperçu est vide. Le seulement exception, nous obtenons est pour les images qui ne sont pas sur ce site. - Nous avons pensé que peut-être il y avait certains anti-leach sur
cpanel
ou la.htaccess
qui empêche les images de s'afficher, donc, nous avons vérifié. Il n'y était pas. Nous avons même fait un rapide< img src="[remote file]" >
sur un autre serveur et l'image s'affiche bien. - Nous avons pensé que c'était peut-être le
og:type
ou autre bizarrerie avec une autre balise 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 autre site s'affiche sans problème.
- Nous avons pensé peut-être il n'était pas en tirant des images, parce que nous utilisons la même page produit(s) pour plusieurs produits (changement basé sur le obtenir la valeur, c'est à dire, "les détails.le php?id=xxx") mais c'est toujours en tirant dans une image (à partir d'une url différente).
- Laissant tout
og:image
ou image_src off, FB ne trouve pas les images.
Je suis à la fin de ma corde. Si je l'ai dit combien de fois moi-même et d'autres ont passé sur le présent, vous seriez choqué. Le problème est que c'est une boutique en ligne. Nous avons absolument, positivement ne peut PAS avoir des 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 peut-être que c'était le problème. Mais nous ne pouvons pas trouver aucun précédent n'importe où sur le web pour que.
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 voulez, voici un lien vers une de nos pages de produits que nous avons travaillé. [Lien raccourci pour tenter de juguler cette monter dans les résultats de la recherche pour notre site]: http://rockn.ro/114
EDIT ----
À l'aide de la "voir ce que facebook voit" grattoir outil, nous avons été en mesure de voir les suivants:
"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 trouve pour une seule page. Tous étaient parfaitement valables images.
MODIFIER 2 ----
Nous avons essayé un test et a ajouté une sous-domaine pour le NON sécurisée du site web (à partir de laquelle les images sont vraiment visibles par le biais de facebook). Sous-domaine a été http://img.[nonsecuresite].com. Nous avons ensuite mis toutes les images dans le dossier et sous-domaine référencé ceux. Il ne serait pas tirer ces images dans FB. Toutefois, il serait encore tirer toutes les images qui ont été référencées sur le non sécurisée de domaine principal.
POSTÉ 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 à un autre NON-site HTTPS et sous-évaluées 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 avons ensuite dû passer par FB Linter et exécuter CHAQUE lien pour actualiser la OG de données. Cela a fonctionné, mais la solution est un band-aid solution de contournement, et si le https
problème est résolu et nous revenons à l'aide de l'naturelles https domaine, FB sera mis en cache les images d'un site web différent, ce qui complique les choses. J'espère que cette information aide à sauver quelqu'un d'autre de perdre 32 codage heures de leur vie.
- Bien documenté question. Upvoted pour vous!
- Pour le dépannage, essayez de changer de
og:type: og_products:product
à type de site et de voir si les images peuvent être ramassés. - Cela se produit si vous servez les images référencées dans
og:image
de HTTP et non HTTPS? - Juteuse, nous avons un og:image référencées à partir d'un site externe qui est en http et non https et cela se voit.
- Salut, merci, grand poste. Juste une petite remarque à vous soucier d'avoir à mettre à jour le cache si vous revenez à https-url, une fois ceux-ci de commencer à travailler: je ne serais pas s'inquiéter à ce sujet que le fb de cache est libéré après un certain temps, il suffit donc de garder des données en double pour un jour ou deux et le cache sera libéré automatiquement à l'aide de la nouvelle url.
- Hey juste pour le dossier, nous avons eu les vieilles images de rester dans le cache pendant des MOIS et des mois avant, donc je prendrais le FB du cache normes avec un grain de sel.
- Très utile. C'est pourquoi mon https hébergé l'image ne fonctionne pas.hah
Vous devez vous connecter pour publier un commentaire.
J'ai rencontré le même problème et l'a signalé un bug sur le Facebook site des développeurs. Il semble assez clair que l'og:image Uri à l'aide de HTTP fonctionnent très bien et les Uri à l'aide de HTTPS ne le font pas. Ils ont maintenant reconnu qu'ils sont "à la recherche dans ce."
Le bug peut être vu ici:
https://developers.facebook.com/bugs/260628274003812
:secure_url
àog:image
et il ne fonctionne pas du tout, j'ai juste eu une erreur qu'ils ne peux même pas trouver lesog:image
tag... Donc si vous êtes forçant HTTPS pour les utilisateurs, ajouter votre FB image exclus url et d'autoriser http pour elle.Certaines propriétés supplémentaires peuvent les métadonnées attachées à eux. Ils sont spécifiés dans la même manière que d'autres métadonnées avec
property
etcontent
, mais leproperty
aura supplémentaire :La
og:image
propriété a une option structurée propriétés:og:image:url
- Identique à la og:image.og:image:secure_url
- Unurl de remplacement à utiliser si la page web nécessite HTTPS.
og:image:type
- UnLe type MIME pour cette image.
og:image:width
- Le nombre de pixels de large.og:image:height
- Le nombre de pixels de haut.Une image complète exemple:
Si vous avez besoin de changer
og:image
propriété pour votre Url HTTPS pourog:image:secure_url
Ex:
HTTPS BALISE META POUR LES IMAGES:
HTTP BALISE META POUR LES IMAGES:
Source: http://ogp.me/#structured <-- Vous pouvez visiter ce site pour plus d'informations.
Espère que cela vous aide.
EDIT: N'oubliez pas de ping facebook serveurs après la mise à jour de vos codes - URL Linter
See exactly what our scraper sees for your URL
cliquez sur elle et voir si elle montre votre lien complet de la source ou de décapage quoi que ce soit. Si malcharset
est le jeu, puis le racleur ne sera pas en mesure de gratter pour une raison quelconque (j'avais répondu à une question similaire il y a quelques temps avec ce problème). Donc, assurez-vous que toutes ces choses sont correctes.og:image:secure_url
, nous avons obtenu une erreur de FB quiproperty 'og:image:url' of type 'url' was not provided
. Je comprends cela se produit parce quesecure_url
est une alternative, mais sommes-nous vraiment censé liste de la même image deux fois, une fois avecog:image
et une fois avecog:image:secure_url
? Et ne leog:image
tag être http, ou peut-elle également être https?og:image
balise peut être HTTPS (qui est ce que StackExchange, YouTube, WordPress.com, Amazon, etc. n'). Ça vous fait vous demander ce queog:image:secure_url
est vraiment pour?Je ne sais pas, si c'est seulement avec moi, mais pour moi
og:image
ne fonctionne pas et il prend mon logo du site, même si facebook débogueur montre l'image correcte.Mais en changeant de
og:image
àog:image:url
a fonctionné pour moi. Espérons que cela aide quelqu'un d'autre face à semblable question.og:image:url
est identique àog:image
".Arrivé ici de Google, mais ce n'était pas d'une grande aide pour moi. Il s'est avéré qu'il y est un minimum de ratio d'aspect de 3:1 pour le logo. La mienne a été de près de 4:1. J'ai utilisé Gimp pour recadrer à exactement 3:1 et voila, mon logo est maintenant indiqué sur FB.
tl;dr – être patient
J'ai atterri ici parce que j'ai été voir les images vides servi à partir d'un site en https. Le problème a été tout à fait différente si:
[https://developers.facebook.com/docs/sharing/best-practices/#precaching%5D
Lors du test, il a fallu facebook environ 10 minutes pour enfin montrer le rendu de l'image. Ainsi, alors que j'étais de me gratter la tête et en jetant aléatoire og balises à facebook (et de se douter de l'https problème mentionné ici), tout ce que j'avais à faire était d'attendre.
Que cela peut vraiment empêcher le partage de vos liens pour la première fois, FB propose deux façons de contourner ce problème:
a) l'exécution de l'OG Débogueur sur tous vos liens: l'image sera mis en cache et prêt pour le partage après ~10 minutes ou b) préciser og:image:largeur et og:image:hauteur. (Lire la suite dans le lien ci-dessus)
Encore à se demander si ce qui leur prend si longtemps ...
og:image:width
etog:image:height
données que j'ai pas compris, puis Facebook à traiter de l'image après la démolition pour l'adapter à leurs dimensions. L'image va être recadrée, qui peuvent être indésirables. Pour plus de détails, voir: developers.facebook.com/docs/sharing/best-practices/#imagesJ'ai eu le même message d'erreur et rien de précédentes ont aidé, j'ai donc essayé de suivre la documentation d'origine de Open Graph Protocol et j'ai ajouté l'attribut préfixe à ma balise html et tout est devenu génial.
N'oubliez pas d'actualiser les serveurs par le biais de :
Facebook Débogueur
Et cliquez sur "Collecter de nouvelles informations"
J'ai eu des problèmes similaires. J'ai enlevé le property="og:image:secure_url" et maintenant, il va frotter avec juste og:image. Parfois, moins c'est plus
J'ai découvert 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 demeure.
J'ai vérifié mes images, et constaté que certains de mes postes étaient trop grandes vignettes dans
og:image
dans la gamme de plusieurs milliers de pixels et de plusieurs méga-octets.Ce qui s'est passé en raison de la récente migration de WP à Jekyll, j'ai optimisé mes images avec gulp, mais il a utilisé les images d'origine en og:image par erreur.
Facebook nous donne les recommandations suivantes à compter d'aujourd'hui:
Il y a donc une limite supérieure de 8 mo.
Comme je l'ai accidentellement trouvé, transparent image vide est livré avec en-tête de réponse indiquant la cause possible du problème.
https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...
)x-error-detail
en-tête de réponse avec explicationPar exemple, dans mon cas, c'était
Invalid image extension for URL: https://[mydomain]/[myfilename].jpg
Le vrai problème dans mon cas était lié à pré-rendu.io.
Comme il s'avère, si l'image est demandé via pré-rendu, il est converti au format HTML. Quelque chose comme ceci:
C'est soit un bug dans le pré-rendu lui-même, ou il est censé être configuré dans votre proxy de ne pas utiliser de pré-rendu pour
*.jpg
demandes (même si elles sont demandées par Facebook bot).Il est vraiment difficile de s'en aperçoivent, comme pré-rendu est utilisé uniquement sur certaines user-agent en-têtes.
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 que j'ai fait en sorte que le domaine a été de même pour
og:url
etog:image
il a travaillé.Espère que cette aide.
Dans mon cas, le problème a été en ne fournissant pas de CA Certificat Racine. J'ai compris après l'utilisation: https://www.ssllabs.com/ssltest/analyze.html pour analyser la configuration SSL.
Des symptômes similaires (Facebook et al pas correctement à aller chercher de l'og:image et d'autres actifs sur https) peut se produire lorsque le site du certificat https n'est pas entièrement conforme.
De votre site https cert peut sembler valide (clé verte dans le navigateur et tout et tout), mais il ne sera pas gratter correctement si il manque un intermédiaire ou une chaîne de certificats. Cela peut conduire à beaucoup de gaspillage des heures à vérifier et revérifier tous les différents caches et les balises meta.
Pourrait pas résoudre votre problème, mais peut-être d'autres avec des symptômes similaires (comme le mien). Il y a plusieurs façons de vérifier votre cert - celui que j'ai passé à utiliser: https://www.sslshopper.com/ssl-checker.html
Je peux voir que la Le débogueur est en train de récupérer 4
og:image
tags à partir de votre URL.La première image est le plus grand et prend donc plus de temps à charger.
Essayez rétrécir cette première image vers le bas ou de modifier l'ordonnance de montrer une image plus petite en premier.
En outre, ce problème se produit également lorsque vous ajoutez un utilisateur généré histoire (où vous n'utilisez pas de l'og:image). Par exemple:
Le ci-dessus ne fonctionne qu'avec http et non https. Si vous utilisez le protocole https, vous obtiendrez un message d'erreur qui dit:
Image jointe () impossible de télécharger des
De ce que j'ai observé, je vois que lorsque votre site est public, et même si l'url de l'image est en https, ça marche très bien.
Pour moi cela a fonctionné:
A eu un problème similaire aujourd'hui, qui le Le Partage Du Débogueur m'a aidé à résoudre. Il semble que Facebook peut pas (pour l'instant) comprendre des images avec des métadonnées XMP intégré. Quand j'ai remplacé les images sur nos articles avec les versions sans les métadonnées XMP, et re-gratté la page (en utilisant le Partage de Débogueur), le problème a disparu. Un éditeur hexadécimal vous aidera à voir si oui ou non votre image contient des métadonnées XMP.
J'ai pris
http://
de monog:image
et l'a remplacé avec juste un bon vieuxwww.
puis il a commencé à bien fonctionner.Vous pouvez utiliser cet outil, par Facebook pour réinitialiser votre image gratter cache et de tester ce que les URL c'est en tirant pour l'image de démo.
Une fois que vous mettez à jour la balise meta assurez-vous que le contenu(image) le lien est le chemin d'accès absolu et
aller ici
https://developers.facebook.com/tools/debug/sharing
entrez votre lien de site et cliquez surscrape again
en page suivanteAprès plusieurs heures de test et d'essayer des choses...
J'ai résolu ce problème aussi simple que possible.
Je remarque qu'ils utilisent "des pages de test" à l'intérieur de Facebook Développeurs Page qui contient uniquement les "og" balises et le texte dans la balise body qui filleuls ce og balises.
Donc, qu'ai-je fait?
J'ai créé un second point de vue, dans mon application, contenant cette même choses qu'ils utilisent.
Et comment je sais, c'est Facebook qui accède à ma page afin que je puisse changer la vue? Ils ont un unique Utilisateur de l'Agent: "facebookexternalhit/1.1"