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

Einige Eigenschaften können mit zusätzlichen Metadaten versehen werden. Diese werden auf die gleiche Weise wie andere Metadaten mit property y content aber die property haben extra :

En og:image hat einige optionale strukturierte Eigenschaften:

• og:image:url - Identisch mit og:image.
• og:image:secure_url - Ein eine alternative URL, die zu verwenden ist, wenn die Webseite HTTPS erfordert.
• og:image:type - A MIME-Typ für dieses Bild.
• og:image:width - Die Anzahl der Pixel in der Breite.
• og:image:height - Die Anzahl der Pixel hoch.

Ein Beispiel für ein Vollbild:

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

Sie müssen also Folgendes ändern og:image Eigenschaft für Ihre HTTPS-URLs auf og:image:secure_url

Ex:

HTTPS-META-TAG FÜR BILDER:

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

HTTP-META-TAG FÜR BILDER:

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

Quelle: http://ogp.me/#structured <-- Weitere Informationen erhalten Sie auf dieser Website.

Ich hoffe, das hilft Ihnen.

EDIT: Vergessen Sie nicht, die Facebook-Server nach der Aktualisierung Ihrer Codes anzupingen - URL-Linter

Answer 2

Ich bin auf das gleiche Problem gestoßen und habe es als Fehler auf der Facebook-Entwicklerseite gemeldet. Es scheint ziemlich klar, dass og:image URIs, die HTTP verwenden, funktionieren einwandfrei, URIs, die HTTPS verwenden, nicht. Sie haben jetzt zugegeben, dass sie "das Problem untersuchen".

Update: Ab 2020 ist der Fehler im Ticketsystem von Facebook nicht mehr sichtbar. Sie haben nie geantwortet und ich glaube nicht, dass sich dieses Verhalten geändert hat. Die Angabe von HTTPS URI in og:image:secure scheint gut zu funktionieren.

Answer 3

Ich weiß nicht, ob es nur mit mir ist, aber für mich og:image funktioniert nicht und wählt das Logo meiner Website aus, auch wenn Facebook-Debugger zeigt das richtige Bild.

Aber die Veränderung og:image a og:image:url hat für mich funktioniert. Ich hoffe, das hilft allen, die ein ähnliches Problem haben.

Answer 4

Tl;dr - geduldig sein

Ich bin hier gelandet, weil ich leere Bilder sah, die von einer https-Website geliefert wurden. Das Problem war jedoch ein ganz anderes:

Wenn Inhalte zum ersten Mal geteilt werden, wird der Facebook-Crawler die Metadaten der geteilten URL auslesen und zwischenspeichern. Der Crawler muss ein Bild mindestens einmal sehen, bevor es gerendert werden kann. Das bedeutet, dass die erste Person, die einen Inhalt teilt, kein gerendertes Bild zu sehen bekommt.

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

Während des Tests nahm Facebook etwa 10 Minuten um schließlich das gerenderte Bild anzuzeigen. Während ich mir also den Kopf zerbrach und wahllos og-Tags bei Facebook einfügte (und das hier erwähnte https-Problem vermutete), musste ich nur noch warten.

Da dies die Leute davon abhalten könnte, Ihre Links zum ersten Mal zu teilen, schlägt FB zwei Möglichkeiten vor, dieses Verhalten zu umgehen: a) Ausführen des OG Debugger für alle Links: das Bild wird zwischengespeichert und ist nach ca. 10 Minuten zum Teilen bereit oder b) Angabe von og:image:width und og:image:height. (Lesen Sie mehr unter dem obigen Link)

Ich frage mich allerdings immer noch, warum sie so lange brauchen ...

Answer 5

Ich bin über Google hierher gekommen, aber das war keine große Hilfe für mich. Es stellte sich heraus, dass für das Logo ein Mindestseitenverhältnis von 3:1 erforderlich ist. Meines war fast 4:1. Ich habe es mit Gimp auf genau 3:1 zugeschnitten und voila - mein Logo wird jetzt auf FB angezeigt.