wake-up-neo.net

FB OpenGraph og: Bild zieht keine Bilder (evtl. https?)

Erstens - ich glaube nicht , dass dies eine doppelte Ausgabe ist. Ich habe in SO intensiv nach gleichen oder ähnlichen Problemen gesucht. Aufgrund der Art der Fehlerbehebung bin ich der Meinung, dass dieses Problem einzigartig ist.

Facebook kann meine og:image Dateien nicht erfassen und ich habe jede übliche Lösung ausprobiert. Ich fange an zu denken, dass es etwas mit https://... zu tun haben könnte

  • 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" verlinkt haben, aber sie werden leer angezeigt. Wenn wir jedoch auf die Bilder klicken, gibt es sie und es geht direkt zu ihnen.
  • Es wird nur ein Bild angezeigt - ein Bild, das auf einem Nicht-https-Server gehostet wird.
  • Wir haben quadratische Bilder, JPEGs, PNGs, größere und kleinere Formate ausprobiert. Wir haben die Bilder richtig in public_html gestellt. Null tauchen auf.
  • Es ist kein Caching-Fehler, denn wenn wir der Meta einen weiteren og:image hinzufügen, findet und liest der Linter des FB das. Es zeigt eine Vorschau. Die Vorschau ist leer. Die Ausnahme only gilt für Bilder, die nicht auf dieser Website enthalten sind.
  • Wir dachten, dass cpanel oder der .htaccess möglicherweise nicht ausgelaugt wurden, sodass die Bilder nicht angezeigt werden konnten, und überprüften dies. Es gab nicht. Wir haben sogar einen schnellen < img src="[remote file]" > auf einem ganz anderen Server erstellt und das Bild wird gut angezeigt.
  • Wir dachten, es wäre vielleicht der og:type oder eine andere Kuriosität mit einem anderen Meta-Tag. Wir haben alle nacheinander entfernt und überprüft. Keine Änderung. Nur Warnungen.
  • Der gleiche Code auf einer anderen Website wird ohne Probleme angezeigt.
  • Wir dachten vielleicht hat es keine Bilder gezogen, weil wir die gleiche Produktseite (n) für mehrere Produkte verwenden (die Änderung basiert auf dem get-Wert, dh "details.php? Id = xxx"), aber es ist zieht immer noch ein Bild ein (von einer anderen URL).
  • Wenn Sie og:image oder image_src auslassen, 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 definitiv KEINE Bilder haben. Wir müssen. Wir haben ungefähr zehn andere Websites ... Dies ist die einzige mit og:image Problemen. Es ist auch das einzige in https, also dachten wir, vielleicht war das das Problem. Aber wir können nirgendwo im Web 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, finden Sie hier einen Link zu einer unserer Produktseiten, an denen wir gearbeitet haben. [Der Link wurde gekürzt, um zu versuchen, das Eindringen in die Suchergebnisse unserer Website einzudämmen.]: http://rockn.ro/114

EDIT ----

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 -Unterdomäne hinzugefügt (von der aus Bilder über Facebook sichtbar sind). Die Subdomain lautete http: // img. [Nonsecuresite] .com. Wir haben dann alle Bilder in den Haupt-Subdomain-Ordner 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.

VERÖFFENTLICHTE ABHILFE ----

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

facebookfacebook-graph-apiopengraphfacebook-opengraphopen-graph-protocol
274
Cyprus106

Ich bin auf das gleiche Problem gestoßen und habe es als Fehler auf der Facebook-Entwicklerseite gemeldet. Es scheint ziemlich klar zu sein, dass og: image URIs mit HTTP gut funktionieren und URIs mit HTTPS nicht. Sie haben jetzt eingeräumt, dass sie "dies untersuchen".

Der Fehler ist hier zu sehen: https://developers.facebook.com/bugs/260628274003812

78
Keegan Quinn

Einige Eigenschaften können mit zusätzlichen Metadaten versehen sein. Diese werden auf dieselbe Weise wie andere Metadaten mit property und content angegeben, aber property enthält zusätzliche:

Die og:image-Eigenschaft verfügt über einige optionale strukturierte Eigenschaften:

  • og:image:url - Identisch mit og: image. 
  • og:image:secure_url - Eine alternative URL für die Verwendung, 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.
  • og:image:height - Die Anzahl der Pixel ist hoch.

Ein vollständiges Bildbeispiel:

<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:image-Eigenschaft für Ihre HTTPS-URLs in og:image:secure_url ändern.

Ex:

HTTPS META TAG FOR IMAGE:

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

HTTP META TAG FOR IMAGE:

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

Hoffe das hilft dir.

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

121
Syed I.R

Ich weiß nicht, ob es nur bei mir ist, aber für mich og:image funktioniert nicht und es wählt mein Site-Logo, obwohl facebook debugger das richtige Bild zeigt.

Aber og:image in og:image:url zu ändern, hat für mich funktioniert. Ich hoffe, das hilft allen anderen, die mit ähnlichen Problemen konfrontiert sind.

13
lalit

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

8
priiiiit

tl; dr - sei geduldig

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

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

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

Während des Tests hat facebook ca. 10 Minuten das gerenderte Bild angezeigt. Also, während ich mir den Kopf kratzte und zufällige og Tags auf Facebook warf (und das hier erwähnte https-Problem vermutete), musste ich nur warten.

Da dies die Menschen daran hindern könnte, Ihre Links zum ersten Mal freizugeben, schlägt FB zwei Möglichkeiten vor, dieses Verhalten zu umgehen: A) Ausführen des OG-Debuggers für alle Ihre Links: Das Image wird zwischen ~ 10 gespeichert und kann freigegeben werden Minuten oder b) Angabe von og: Bild: Breite und og: Bild: Höhe. (Lesen Sie mehr im obigen Link)

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

6
panepeter

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 fügte meinem HTML-Tag das Präfixattribut hinzu.

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

Vergessen Sie nicht, die Server über Folgendes zu aktualisieren: 

Facebook Debugger

Und klicken Sie auf "Neue Informationen sammeln"

2
Scaraux

Ich hatte ähnliche Probleme. Ich habe das property = "og: image: secure_url" entfernt und jetzt wird es mit og: image scrubben. Manchmal ist weniger mehr

1
HappaGirl

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

1
instead

Ich habe ein anderes Szenario entdeckt, das dieses Problem verursachen kann. Ich durchlief alle in der Frage beschriebenen Schritte und die Antworten, das Problem blieb jedoch bestehen.

Ich überprüfte meine Bilder und stellte fest, dass einige meiner Beiträge viel zu große Miniaturbilder in og:image im Bereich von mehreren tausend Pixeln und mehreren Megabytes aufwiesen. 

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

Facebook gibt uns ab heute folgende Empfehlungen : 

Verwenden Sie Bilder mit mindestens 1200 x 630 Pixeln, um eine optimale Anzeige auf .__ zu erhalten. hochauflösende Geräte. Zumindest sollten Sie Bilder verwenden, die sind 600 x 315 Pixel für die Anzeige von Linkseiten mit größeren Bildern . Bilder können bis zu 8 MB groß sein.

Es gibt also eine Obergrenze von 8 MB.

1
Mark

Ich bin auf dieselbe Ausgabe gestoßen und habe dann festgestellt, dass ich eine andere Domain für den og:url hatte.

Sobald ich sicher war, dass die Domain für og:url und og:image identisch war, funktionierte es.

Hoffe das hilft.

1
Darren Hall

Aus dem, was ich beobachtet habe, sehe ich, dass Ihre Website öffentlich ist und obwohl die URL des Bildes https ist, funktioniert es einfach.

0
AK M

Für mich hat das funktioniert:

<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"/>
0
Dr.MTR

Dieses Problem tritt außerdem auf, wenn Sie eine vom Benutzer generierte Story hinzufügen (wenn 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 oben genannte funktioniert nur mit http und nicht mit https. Wenn Sie https verwenden, wird folgende Fehlermeldung angezeigt: Das angehängte Bild () konnte nicht hochgeladen werden

0
Aamir Quraishi

Ich kann sehen, dass der Debugger 4 og:image-Tags von Ihrer URL abruft.

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

0
Lix

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

  • Ändern von Links nur zu http
  • Leerraum am Ende entfernen
  • Vollständiges Zurückschalten auf http
  • 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, ob jemand dieses Problem erneut trifft:

Es gibt auch andere Checker als Facebooks Object Debugger , die Sie prüfen können: OpenGraphCheck.com , Abhinay Rathores Open Graph Tester , - Iframelys Einbettungscodes , Kartenprüfer | Twitter-Entwickler .

0
Ooker

Wie ich aus Versehen herausfand, enthält das transparente leere Bild einen Antwortheader, der auf eine mögliche Ursache des Problems hinweist.

  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 ist kein Punkt, wenn Sie es drücken
    2. Drücken Sie rechts und sehen Sie sich 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 "Net" für Firebug-/Entwicklertools. Aktualisieren Sie ggf. die Seite
  5. Sie erhalten den x-error-detail-Antwortheader mit Erläuterung

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

Das eigentliche Problem in meinem Fall bezog sich auf prerender.io .

Wenn ein Bild über einen Prerender angefordert wird, wird es 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 kein Prerender für *.jpg-Anforderungen verwendet wird (selbst wenn sie vom Facebook-Bot angefordert werden).

Das ist wirklich schwer zu bemerken, da Prerender nur für bestimmte User-Agent-Header verwendet wird.

0
Marius Balčytis

Ich habe http:// aus meinem og:image genommen und ihn durch einen einfachen alten www. ersetzt, dann hat er funktioniert.

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.

0
Albert Renshaw

Hatte heute ein ähnliches Problem, das mir der Sharing Debugger bei der Lösung geholfen hat. 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 erneut überarbeitete (mit dem Debugger für gemeinsame Nutzung), verschwand das Problem. Mit einem Hex-Editor können Sie feststellen, ob Ihr Bild XMP-Metadaten enthält.

0
Brett Donald

Wenn Sie das Meta-Tag aktualisiert haben, vergewissern Sie sich, dass der Link zum Inhalt (Bild) der absolute Pfad ist, und gehen Sie zu hierhttps://developers.facebook.com/tools/debug/sharing, geben Sie Ihren Site-Link ein und klicken Sie auf scrape again auf der nächsten Seite

0
Thyagu

Ähnliche Symptome (Facebook und andere Benutzer können og: image und andere Assets nicht korrekt über https abrufen.) 

Das https-Zertifikat Ihrer Site erscheint möglicherweise gültig (grüner Schlüssel im Browser und alle), wird jedoch nicht ordnungsgemäß gelöscht, wenn ein Zwischen- oder Kettenzertifikat fehlt. Dies kann dazu führen, dass viele verschwendete Stunden überprüft und alle verschiedenen Caches und Meta-Tags überprüft werden. 

Könnte nicht dein Problem gewesen sein, aber es könnten andere sein, die ähnliche Symptome haben (wie meine). Es gibt viele Möglichkeiten, Ihr Zertifikat zu überprüfen - die, die ich verwendet habe: https://www.sslshopper.com/ssl-checker.html

0
Lance