FB OpenGraph og:image zieht keine Bilder (möglicherweise https?)

Question

Facebook kann meine Gedanken nicht fassen og:image Dateien, und ich habe alle üblichen Lösungen ausprobiert. Ich fange an zu glauben, dass es etwas mit folgenden Dingen zu tun haben könnte https://...

• Ich habe geprüft http://developers.facebook.com/tools/debug und haben keine Warnungen oder Fehler.
• Es findet die Bilder, die wir in der " og:image ", aber sie werden leer angezeigt. Wenn wir auf das Bild/die Bilder klicken, sind sie jedoch vorhanden und wir werden direkt zu ihnen geführt.
• Es wird ein Bild angezeigt - ein Bild, das auf einem Nicht-https-Server gehostet wird.
• Wir haben es mit quadratischen Bildern, jpegs, pngs, größeren und kleineren Formaten versucht. Wir haben die Bilder direkt in public_html eingefügt. Es werden keine angezeigt.
• Es handelt sich nicht um einen Caching-Fehler, denn wenn wir eine weitere og:image zu den Metadaten, der Linter von FB findet und liest das. Es wird eine Vorschau angezeigt. Die Vorschau ist leer. Die sólo Die Ausnahme, die wir erhalten, betrifft Bilder, die sich nicht auf dieser Website befinden.
• Wir dachten, es gäbe vielleicht etwas gegen Laugen. cpanel oder die .htaccess die verhindert hat, dass die Bilder angezeigt werden, also haben wir es überprüft. Da war nichts. Wir haben sogar eine schnelle < img src="[remote file]" > auf einem völlig anderen Server und das Bild wird problemlos angezeigt.
• Wir dachten, es sei vielleicht die og:type oder eine andere Merkwürdigkeit mit einem anderen Meta-Tag. Wir haben sie alle entfernt, einen nach dem anderen, und es überprüft. Keine Veränderung. Nur Warnungen.
• Derselbe Code wird auf einer anderen Website ohne Probleme angezeigt.
• Wir dachten vielleicht es war nicht ziehen Bilder, weil wir die gleiche Produktseite (n) für mehrere Produkte (ändern Sie es auf der Grundlage der get-Wert, dh, "details.php?id=xxx"), aber es ist immer noch in ein Bild (von einem anderen url) ziehen.
• Das Verlassen einer og:image oder image_src aus, findet FB keine Bilder.

Ich bin mit meinen Kräften am Ende. Wenn ich sagen würde, wie viel Zeit ich und andere damit verbracht haben, wären Sie schockiert. Das Problem ist, dass dies ein Online-Geschäft ist. Wir können auf keinen Fall KEINE Bilder haben. Wir müssen es. Wir haben etwa zehn andere Seiten... Dies ist die einzige mit og:image Probleme. Es ist auch das einzige auf https Deshalb dachten wir, das könnte das Problem sein. Aber wir können nirgendwo im Internet einen Präzedenzfall dafür finden.

Dies sind die 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">

Falls Sie es wünschen, hier ist ein Link zu einer unserer Produktseiten, an der wir gearbeitet haben. [Link gekürzt, um zu verhindern, dass er in den Suchergebnissen für unsere Website erscheint]: http://rockn.ro/114

EDIT ----

Mit Hilfe des Scraper-Tools "see what facebook sees" konnten wir Folgendes feststellen:

"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"
      }
   ],

Wir haben alle gefundenen Links für eine einzelne Seite getestet. Alle waren absolut gültige Bilder.

EDIT 2 ----

Wir haben einen Test durchgeführt und eine Subdomain zur NONSECURE-Website (von der aus die Bilder tatsächlich über Facebook sichtbar sind). Die Unterdomäne war http://img.\[nonsecuresite\].com. Wir haben dann alle Bilder in den Hauptordner der Subdomain gelegt und auf diese verwiesen. Diese Bilder wurden nicht in FB übernommen. Allerdings wurden alle Bilder, die auf der unsicheren Hauptdomain referenziert wurden, weiterhin abgerufen.

GEPOSTETE ABHILFE ----

Dank Keegan wissen wir jetzt, dass dies ein Fehler in Facebook ist. Um das Problem zu umgehen, haben wir eine Subdomain auf einer anderen NICHT-HTTPS-Website eingerichtet und alle Bilder dorthin verschoben. Wir referenzierten die koordinierenden http://img.otherdomain.com/[like-image.jpg] Bild in og:image auf jeder Produktseite. Wir mussten dann durch FB Linter gehen und JEDEN Link ausführen, um die OG-Daten zu aktualisieren. Dies funktionierte, aber die Lösung ist ein Notbehelf, und wenn die https Problem behoben ist und wir wieder die natürliche https-Domäne verwenden, hat FB die Bilder von einer anderen Website in den Cache gestellt, was die Sache verkompliziert. Hoffentlich helfen diese Informationen, jemandem 32 Stunden Programmierarbeit zu ersparen. ihre Leben.

Answer 1

Ich hatte ähnliche Probleme. Ich habe das Property="og:image:secure_url" entfernt und jetzt funktioniert es nur noch mit og:image. Manchmal ist weniger mehr

Answer 2

Ich habe eine Wordpress-Website, die Folgendes verwendet og:image mit einer https-URL zum Bild und die Bilder werden problemlos in den Facebook-Vorschaulinks angezeigt.

Ich habe eine andere Website, an der ich gearbeitet habe, die Folgendes verwendet og:image mit einer https-URL und manchmal erscheinen die Bilder, manchmal nicht. Ich habe die Vorschläge auf dieser Seite ausprobiert, indem ich og:image:url y og:image:secure_url und beides machte keinen Unterschied, das Bild wurde nicht für die Vorschau verwendet.

Beide Websites verfügen über gültige https-Zertifikate, es handelte sich also nicht um ein Zertifikatsproblem.

Nach weiteren Recherchen habe ich herausgefunden, dass Facebook eine MINDESTGRÖSSE für Bilder. Wenn die og:image kleiner als 200x200px ist, wird es von Facebook nicht verwendet. Die empfohlene Größe ist 600x600px für Geschichten und 1200x630px für alles andere.

Ich habe die Bilder auf meiner zweiten Website vergrößert, und sie erschienen auf Facebook. Das Rätsel ist gelöst.

Ich hoffe, Sie finden dies nützlich.

Answer 3

Ich hatte denselben Fehler und nichts von dem, was ich bisher gesehen habe, hat geholfen, also habe ich versucht, die Originaldokumentation von Open Graph Protokoll und ich fügte das Präfix-Attribut zu meinem Html-Tag hinzu, und alles wurde fantastisch.

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

Answer 4

Wie ich zufällig herausgefunden habe, wird ein transparentes, leeres Bild mit einem Antwort-Header geliefert, der die mögliche Ursache des Problems angibt.

1. Rufen Sie den Debugger unter https://developers.facebook.com/tools/debug/og/object/
2. Setzen Sie Ihre URL
3. Unten zeigt Facebook Ihr "Bild" (transparentes 1x1 GIF)
   1. Das Bild ist mit Ihrem Originalbild verlinkt - es hat keinen Sinn, es zu drücken.
   2. Drücken Sie die rechte Maustaste und sehen Sie sich das Bild an (Sie erhalten dann etwas wie https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=... )
4. Aktivieren Sie die Registerkarte Netz in Firebug/Entwicklertools und aktualisieren Sie die Seite bei Bedarf.
5. Sie erhalten x-error-detail Antwort-Header mit Erklärung

In meinem Fall war es zum Beispiel Invalid image extension for URL: https://[mydomain]/[myfilename].jpg

Das eigentliche Problem in meinem Fall betraf Folgendes prerender.io .

Wie sich herausstellt, wird das Bild, wenn es über Prerender angefordert wird, in HTML umgewandelt. Etwa so:

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

Es ist entweder ein Fehler in Prerender selbst, oder es sollte in Ihrem Proxy so konfiguriert werden, dass Prerender nicht verwendet wird für *.jpg Anfragen (auch wenn sie von einem Facebook-Bot gestellt werden).

Es ist wirklich schwer, dies zu bemerken, da Prerender nur bei bestimmten User-Agent-Headern verwendet wird.

Answer 5

Ich habe http:// aus meinem og:image und ersetzte es durch ein einfaches altes www. dann funktionierte es wieder einwandfrei.

Sie können verwenden dieses Tool von Facebook um den Cache für das Scrapen von Bildern zurückzusetzen und zu testen, welche URL für das Demobild herangezogen wird.