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

Erstens - ich glaube nicht, dass dies ein doppeltes Problem ist. Ich habe ausgiebig nach gleichen oder ähnlichen Problemen in SO gesucht, und aufgrund der Art der Fehlerbehebung, bevor ich gefragt habe, glaube ich, dass dieses Problem einzigartig ist.

Facebook kann meine og:imageDateien nicht erfassen und ich habe jede übliche Lösung ausprobiert. Ich fange an zu denken, dass es etwas damit zu tun haben könntehttps://...

• Ich habe http://developers.facebook.com/tools/debug überprüft und habe keine Warnungen oder Fehler.
• Es werden die Bilder gefunden, mit denen wir im " og:image" verknüpft sind , aber sie werden leer angezeigt. Wenn wir auf die Bilder klicken, existieren sie jedoch und es dauert direkt zu ihnen.
• Es wird ein Bild angezeigt - ein Bild, das auf einem Nicht-https-Server gehostet wird.
• Wir haben quadratische Bilder, JPEGs, PNGs, größere und kleinere Größen ausprobiert. Wir haben die Bilder richtig in public_html platziert. Null werden angezeigt.
• Es ist kein Caching-Fehler, denn wenn wir og:imagedem Meta einen weiteren hinzufügen , findet und liest der FB-Linter das. Es zeigt eine Vorschau. Die Vorschau ist leer. Die einzige Ausnahme, die wir bekommen, sind Bilder, die nicht auf dieser Website sind.
• Wir dachten, dass möglicherweise etwas Anti-Leach vorhanden ist cpaneloder .htaccessdass die Bilder nicht angezeigt werden, also haben wir nachgesehen. Es gab nicht. Wir haben sogar schnell < img src="[remote file]" >auf einem ganz anderen Server gearbeitet und das Bild wird gut angezeigt.
• Wir dachten, vielleicht war es die eine og:typeoder andere Kuriosität mit einem anderen Meta-Tag. Wir haben alle einzeln entfernt und überprüft. Keine Änderung. Nur Warnungen.
• Der gleiche Code auf einer anderen Website wird ohne Probleme angezeigt.
• Wir dachten, es würden möglicherweise keine Bilder abgerufen, weil wir dieselbe Produktseite (n) für mehrere Produkte verwenden (sie basierend auf dem Abrufwert ändern, dh "details.php? Id = xxx"), aber es wird immer noch eine abgerufen Bild (von einer anderen URL).
• Wenn Sie any og:imageoder image_src deaktivieren, findet FB keine Bilder.

Ich bin am Ende meines Seils. Wenn ich sagen würde, wie viel Zeit ich und andere dafür aufgewendet haben, wären Sie schockiert. Das Problem ist, dass dies ein Online-Shop ist. Wir können absolut KEINE Bilder haben. Wir müssen. Wir haben ungefähr zehn andere Websites ... Dies ist die einzige mit og:imageProblemen. Es ist auch das einzige https, also dachten wir, dass das vielleicht das Problem war. Aber dafür können wir im Internet keinen Präzedenzfall 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 möchten, finden Sie hier einen Link zu einer unserer Produktseiten, an denen wir gearbeitet haben. [Der Link wurde gekürzt, um zu verhindern, dass Suchergebnisse für unsere Website angezeigt werden ]: http://rockn.ro/114

BEARBEITEN ----

Mit dem Scraper-Tool "Sehen, was Facebook sieht" konnten wir Folgendes sehen:

"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 vollkommen gültige Bilder.

EDIT 2 ----

Wir haben einen Test versucht und der NONSECURE-Website eine Subdomain hinzugefügt (von der aus Bilder tatsächlich über Facebook sichtbar sind). Die Subdomain war http: // img. [Nonsecuresite] .com. Wir haben dann alle Bilder in den Hauptordner der Subdomain gelegt und auf diese verwiesen. Es würde diese Bilder nicht in FB ziehen. Es werden jedoch weiterhin alle Bilder abgerufen, auf die in der nicht sicheren Hauptdomäne verwiesen wird.

POSTED WORKAROUND ----

Dank Keegan wissen wir jetzt, dass dies ein Fehler in Facebook ist. Um dies zu umgehen, haben wir eine Subdomain in einer anderen NON-HTTPS-Website platziert und alle Bilder darin gespeichert. Wir haben auf jeder Produktseite auf das koordinierende http://img.otherdomain.com/[like-image.jpg]Bild verwiesen og:image. Wir mussten dann FB Linter durchgehen und JEDEN Link ausführen, um die OG-Daten zu aktualisieren. Dies hat funktioniert, aber die Lösung ist eine Problemumgehung für Pflaster. Wenn das httpsProblem behoben ist und wir wieder die natürliche https-Domain verwenden, hat FB die Bilder von einer anderen Website zwischengespeichert, was die Sache komplizierter macht. Hoffentlich helfen diese Informationen dabei, andere vor dem Verlust von 32 Codierungsstunden ihres Lebens zu bewahren.

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

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

An einige Eigenschaften können zusätzliche Metadaten angehängt werden. Diese werden auf die gleiche Weise wie andere Metadaten mit propertyund angegeben content, aber die propertyhaben zusätzliche:

Die og:imageEigenschaft verfügt über einige optionale strukturierte Eigenschaften:

• og:image:url - Identisch mit og: image.
• og:image:secure_url - Eine alternative URL, die verwendet werden soll, wenn für die Webseite HTTPS erforderlich ist.
• og:image:type - Ein MIME-Typ für dieses Bild.
• og:image:width - Die Anzahl der Pixel breit.
• og:image:height - Die Anzahl der Pixel hoch.

Ein Vollbildbeispiel:

<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 die og:imageEigenschaft für Ihre HTTPS-URLs in ändernog:image:secure_url

Ex:

HTTPS META TAG FÜR BILD:

<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 BILD:

<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 finden Sie auf dieser Website.

Hoffe das hilft dir.

BEARBEITEN: Vergessen Sie nicht, Facebook-Server nach dem Aktualisieren Ihrer Codes zu pingen - URL Linter

Ich weiß nicht, ob es nur bei mir ist, aber für mich og:imagenicht funktioniert und es mein Site-Logo auswählt , obwohl der Facebook-Debugger das richtige Bild zeigt.

Aber der Wechsel og:imagezu og:image:urlhat für mich funktioniert. Ich hoffe, dies hilft allen anderen, die mit ähnlichen Problemen konfrontiert sind.

Ich bin von Google hierher gekommen, aber das hat mir nicht viel geholfen. Es stellte sich heraus, dass für das Logo ein Mindestaspektverhältnis von 3: 1 erforderlich ist. Meins war fast 4: 1. Ich habe Gimp verwendet, um es auf genau 3: 1 und voila zuzuschneiden - mein Logo wird jetzt auf FB angezeigt.

tl; dr - sei geduldig

Ich bin hier gelandet, weil ich leere Bilder von einer https-Site gesehen habe. Das Problem war jedoch ganz anders:

Wenn Inhalte zum ersten Mal freigegeben werden, kratzt der Facebook-Crawler die Metadaten von der freigegebenen URL und speichert sie zwischen. Der Crawler muss mindestens einmal ein Bild sehen, bevor es gerendert werden kann. Dies bedeutet, dass die erste Person, die einen Inhalt teilt, kein gerendertes Bild sieht

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

Während des Tests dauerte es ungefähr 10 Minuten, bis Facebook das gerenderte Bild endlich zeigte. Während ich mich am Kopf kratzte und zufällige og-Tags auf Facebook warf (und das hier erwähnte https-Problem vermutete), musste ich nur warten.

Da dies möglicherweise dazu führt, dass Benutzer Ihre Links nicht zum ersten Mal freigeben, schlägt FB zwei Möglichkeiten vor, um dieses Verhalten zu umgehen: a) Ausführen des OG-Debuggers für alle Ihre Links: Das Bild wird zwischengespeichert und kann nach ca. 10 Minuten oder b freigegeben werden ) Angabe von og: image: width und og: image: height. (Lesen Sie mehr im obigen Link)

Ich frage mich immer noch, was sie so lange brauchen ...

Ich hatte den gleichen Fehler und nichts von früher hat geholfen, also habe ich versucht, der Originaldokumentation von Open Graph Protocol zu folgen, und ich habe meinem HTML-Tag ein Präfixattribut hinzugefügt, und alles wurde großartig.

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

Ich hatte ähnliche Probleme. Ich habe die Eigenschaft = "og: image: secure_url" entfernt und jetzt wird sie nur mit og: image gesäubert. Manchmal ist weniger mehr

Ich habe ein anderes Szenario entdeckt, das dieses Problem verursachen kann. Ich habe alle in der Frage und den Antworten beschriebenen Schritte durchlaufen, trotzdem blieb das Problem bestehen.

Ich überprüfte meine Bilder und stellte fest, dass einige meiner Beiträge viel zu große Miniaturbilder og:imageim Bereich von mehreren tausend Pixeln und mehreren Megabyte enthielten.

Dies geschah aufgrund der kürzlichen Migration von WP nach Jekyll. Ich habe meine Bilder mit gulp optimiert, aber versehentlich die Originalbilder in og: image verwendet.

Facebook gibt uns ab heute folgende Empfehlungen :

Verwenden Sie Bilder mit einer Größe von mindestens 1200 x 630 Pixel, um die beste Anzeige auf hochauflösenden Geräten zu erzielen. Sie sollten mindestens Bilder mit einer Größe von 600 x 315 Pixel verwenden, um Linkseitenbeiträge mit größeren Bildern anzuzeigen. Bilder können bis zu 8 MB groß sein.

Es gibt also eine Obergrenze von 8 MB.

Wie ich versehentlich festgestellt habe, wird ein transparentes leeres Bild mit einem Antwortheader geliefert, der die mögliche Ursache des Problems angibt.

1. Gehen Sie zum Debugger unter https://developers.facebook.com/tools/debug/og/object/
2. Geben Sie Ihre URL ein
3. Im unteren Bereich zeigt Facebook Ihr "Bild" (transparentes 1x1 GIF)
   1. Das Bild ist mit Ihrem Originalbild verknüpft - es macht keinen Sinn, darauf zu drücken
   2. Drücken Sie rechts und zeigen Sie das Bild an (Sie erhalten so etwas wie https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...)
4. Aktivieren Sie die Registerkarte "Netz" in den Firebug- / Entwicklertools und aktualisieren Sie die Seite bei Bedarf
5. Sie erhalten einen x-error-detailAntwortheader mit Erläuterung

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

Das eigentliche Problem in meinem Fall war prerender.io .

Wie sich herausstellt, wird ein Bild, das über einen Prerender angefordert wird, in HTML konvertiert. Etwas wie das:

<!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 im Prerender selbst oder es sollte in Ihrem Proxy so konfiguriert sein, dass der Prerender nicht für verwendet wird *.jpg Anfragen verwendet wird (selbst wenn diese vom Facebook-Bot angefordert werden).

Dies ist sehr schwer zu bemerken, da der Prerender nur für bestimmte User-Agent-Header verwendet wird.

Ich bin auf dasselbe Problem gestoßen und habe dann festgestellt, dass ich eine andere Domain für die hatte og:url

Einmal habe ich sichergestellt, dass die Domain dieselbe ist og:urlund og:imagees funktioniert.

Hoffe das hilft.

In meinem Fall bestand das Problem darin, dass kein CA-Stammzertifikat bereitgestellt wurde . Ich habe es herausgefunden, nachdem ich https://www.ssllabs.com/ssltest/analyze.html verwendet hatte , um die SSL-Konfiguration zu analysieren.

Ähnliche Symptome (Facebook et al. Ruft og: image und andere Assets nicht korrekt über https ab) können auftreten, wenn das https-Zertifikat der Site nicht vollständig kompatibel ist.

Das https-Zertifikat Ihrer Site scheint gültig zu sein (grüner Schlüssel im Browser und alle), aber es wird nicht korrekt gekratzt, wenn ein Zwischen- oder Kettenzertifikat fehlt. Dies kann dazu führen, dass viele Stunden damit verschwendet werden, alle verschiedenen Caches und Meta-Tags zu überprüfen und erneut zu überprüfen.

Könnte nicht Ihr Problem gewesen sein, könnte aber andere mit ähnlichen Symptomen sein (wie meine). Es gibt viele Möglichkeiten, Ihr Zertifikat zu überprüfen - das, das ich zufällig verwendet habe: https://www.sslshopper.com/ssl-checker.html

Ich nahm http://meine heraus og:imageund ersetzte sie durch einfach nur altwww. dann fing es an, gut zu funktionieren.

Sie können dieses Tool von Facebook verwenden , um Ihren Bild-Scrape-Cache zurückzusetzen und zu testen, welche URL für das Demo-Bild abgerufen wird.

Ich kann sehen, dass der Debugger 4 og:imageTags abruft von Ihrer URL abruft.

Das erste Bild ist das größte und dauert daher am längsten. Versuchen Sie, das erste Bild zu verkleinern, oder ändern Sie die Reihenfolge, um zuerst ein kleineres Bild anzuzeigen.

Darüber hinaus tritt dieses Problem auch auf, wenn Sie eine benutzergenerierte Story hinzufügen (bei der Sie og: image nicht verwenden). Zum Beispiel:

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

Das Obige funktioniert nur mit http und nicht mit https. Wenn Sie https verwenden, wird eine Fehlermeldung angezeigt, die besagt, dass das angehängte Bild () nicht hochgeladen werden konnte

Vergessen Sie nicht, die Server zu aktualisieren über:

Facebook Debugger

Und klicken Sie auf "Neue Informationen sammeln"

Hatte heute ein ähnliches Problem, das mir der Sharing Debugger bei der Lösung half. Es scheint, dass Facebook Bilder mit eingebetteten XMP-Metadaten (derzeit) nicht verstehen kann. Als ich die Bilder in unseren Artikeln durch Versionen ohne XMP-Metadaten ersetzte und die Seite (mit dem Sharing Debugger) neu kratzte, verschwand das Problem. Mithilfe eines Hex-Editors können Sie feststellen, ob Ihr Bild XMP-Metadaten enthält.

In meinem Fall scheint der Crawler nur einen Fehler zu haben. Ich habe es versucht:

• Nur Links zu http ändern
• Ende Leerraum entfernen
• Zurück zu http vollständig wechseln
• Neuinstallation der Website
• Installieren einer Reihe von OG-Plugins (ich benutze WordPress)
• Der Verdacht, dass der Server eine seltsame Fehlkonfiguration aufweist, die die Bots blockiert (da alle OG-Prüfer keine Tags abrufen können und andere Anforderungen an meine Websites instabil sind).

Keines dieser Werke. Das hat mich eine Woche gekostet. Und plötzlich scheint es aus dem Nichts wieder zu funktionieren.

Hier sind meine Nachforschungen, wenn jemand dieses Problem erneut hat:

• Wodurch können Open Graph-Prüfer Open Graph-Daten nicht erkennen?
• Woher wissen Sie, welche Bots einer Website, wenn ich keinen Root-Zugriff auf das Hosting habe, gelesen werden? t
• 👍 Wodurch können Open Graph-Prüfer Open Graph-Daten nicht erkennen? - Verschlüsseln wir den Community-Support
• 👍 Crawler kann keine Bilder abrufen , aber durch Hinzufügen einer brandneuen, eindeutigen Abfragezeichenfolge kann dies zum ersten Mal funktionieren - Facebook für Entwickler

Auch gibt es mehr Kontrolleure anderen als der Object Debuggers Facebook für Sie zu überprüfen: OpenGraphCheck.com , Abhinay Rathore Open Graph Tester , Iframely des Embed - Codes , Karten Validator | Twitter-Entwickler .

OK ... Mir ist klar, dass dieser Thread alt und überfüllt ist, aber falls jemand hereinkommt, wie ich es getan habe, um sein og: image-Tag in Facebook zum Laufen zu bringen, ist hier der Trick, der für mich funktioniert hat:

Verwenden Sie diesen Link NICHT:

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.google.com

um Ihr Problem zu lösen. Wenn Sie dies tun, scrollen Sie sofort nach unten und klicken Sie auf Scrape VIA API.

https://developers.facebook.com/tools/explorer/?method=POST&path=%3Fscrape%3Dtrue%26id%3Dhttps%3A%2F%2Fwww.google.com&version=v5.0

Im Explorer-Tool werden Fehler angezeigt, die im "Debug" -Tool NICHT angezeigt werden. Wahnsinn !!! (In meinem Fall hat ein Leerzeichen im Bilddateinamen mein Bild im Debug-Tool stillschweigend ausgeschaltet, aber es hat den Fehler im Explorer-Tool angezeigt.)

Ich bin auf einen anderen Grund gestoßen, warum og-Bilder nicht auf FB-Karten angezeigt werden. Wenn ich das FB-Scraper-Tool zum Debuggen der og-Meta-Tags verwende , kann ich außerdem alle erforderlichen Tags bestätigen, die auf meiner WordPress-Seite vorhanden sind, und dennoch wird der folgende Fehler beim Herunterladen von Dateien angezeigt:

Vorausgesetzt, og: image, <https-link-to-jpg-image> konnte nicht heruntergeladen werden. Dies kann verschiedene Gründe haben, z. B. wenn Ihr Server die nicht unterstützte Inhaltscodierung verwendet. Der Crawler akzeptiert Deflate- und GZIP-Inhaltscodierungen.

Ich hatte das vage Gefühl, dass das Bildformat ein Problem hatte, der Link zum Bild funktionierte, aber die Nachricht scheint darauf hinzudeuten, dass etwas mit der Inhaltscodierung nicht stimmt.

Nach langem Suchen habe ich mir die PHP- Erweiterungen angesehen, die für einen WordPress-Server erforderlich sind , und festgestellt, dass das Pho-Exif-Modul nicht installiert war. Das Exif-Modul schreibt Exif-Metadaten in alle hochgeladenen Bilder. Infolgedessen waren den im FB og-Bild-Tag verwendeten Bildern keine Exif-Metadaten zugeordnet.

Sobald das Exif-Modul aktiviert ist, können mit WordPress Exif-Metadaten für ein Bild zurückgesetzt werden (Medienbibliothek-> Auswählen und Bild-> Weitere Details bearbeiten-> Exif-Metadaten zuordnen). Das Bild wird nun wie erwartet auf der FB-Karte angezeigt.

Nach meinen Beobachtungen sehe ich, dass Ihre Website, wenn sie öffentlich ist und die Bild-URL https lautet, einwandfrei funktioniert.

Bei mir hat das geklappt:

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

Nach mehreren Stunden des Testens und Ausprobierens ...

Ich habe dieses Problem so einfach wie möglich gelöst. Ich stelle fest, dass sie "Testseiten" auf der Facebook-Entwicklerseite verwenden, die nur die "og" -Tags und einen Text im body-Tag enthalten, der auf diese og-Tags verweist.

Also, was habe ich getan?

Ich habe in meiner Anwendung eine zweite Ansicht erstellt, die dieselben Dinge enthält, die sie verwenden.

Und woher weiß ich, dass Facebook auf meine Seite zugreift, damit ich die Ansicht ändern kann? Sie haben einen einzigartigen User Agent: "facebookexternalhit / 1.1"

Wenn Sie das Meta-Tag aktualisiert haben, stellen Sie sicher, dass der Link zum Inhalt (Bild) der absolute Pfad ist. https://developers.facebook.com/tools/debug/sharing Geben Sie hier Ihren Site-Link ein und klicken Sie auf der scrape againnächsten Seite auf