it-swarm.com.de

Facebook Open Graph Kein Bild beim ersten Mal

Ich versuche, eine Share/Send-Schaltfläche mit einem Link zu konfigurieren. Ich habe die Tags für das Öffnen von Diagrammbildern auf einer Seite ordnungsgemäß konfiguriert, aber beim ersten Öffnen des Dialogfelds "Senden/Senden" wird das Bild nicht angezeigt. Wenn Sie die Seite nicht neu laden und das Dialogfeld zum Teilen/Senden zum zweiten Mal öffnen, wird das Bild angezeigt. Die URL der Seite und die Bilder befinden sich alle in HTTP (anstelle von HTTPS).

Ich kann das URL-Linting-Tool nicht einfach verwenden, da die Seite eine eindeutige URL hat. Bei der Website geht es darum, virtuelle Blumen an Menschen zu senden. Daher wird die Seite, die geteilt werden soll, frisch generiert.

Würde mich wirklich über etwas freuen :)

17
Freeman Latif

Das Problem gefunden Irgendwie tritt dieses Problem auf, wenn Sie Ihre offenen Diagrammtags nicht richtig setzen.

Falsch:

<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />

Richtig:

<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />
<meta property="og:image:secure_url" content="https://asdfg.com/<%= videoId %>/image" /> 
<meta property="og:image:width" content="640" /> 
<meta property="og:image:height" content="442" />
40
Freeman Latif

UPDATE

Diese Lösung mit iframe funktioniert nicht mehr ! Funktioniert seit gestern, 06. Februar 2017 . Facebook hat gerade X-Frame-Optionen alsDENYgesetzt, damit Sie die Sharer-URL nicht in einen iFrame laden können.


Ich fügte og: image: width und og: image: height hinzu, überprüfte alle meine Property-Tags und das Problem war immer noch da.

Ich habe eine Problemumgehung für diesen Facebook-Fehler gefunden, die funktioniert hat: Ich habe einen versteckten iFrame mit dem Sharer-Link im Seitenfuß hinzugefügt. Auf diese Weise überprüft der Facebook-Crawler, ob die Seite einmal geladen ist.

<iframe style="width: 0px; height: 0px; margin: 0px; padding: 0px;" src="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com"></iframe>
3
Dan

Das könnte jemandem helfen.

Ich fand, dass Facebook das von mir verwendete quadratische Bild (1000px x 1000px) nicht mochte.
Also habe ich es auf 660px x 315x zugeschnitten und Facebook hat es akzeptiert. 

Die Einstellung von og: width und height hat nicht geholfen und es ging buchstäblich um die Bildmaße.

2
Paulina Simkute

Sie sollten den Image-Link in der og:image-Eigenschaft korrekt angeben. Wenn Sie das Miniaturbild immer noch nicht erhalten, fügen Sie das Bild height und width wie folgt hinzu:

<meta property="og:image:width" content="450" />
<meta property="og:image:height" content="298" />
1
Mahesh

Eine weitere mögliche Antwort, die für mich funktioniert hat - stellen Sie sicher, dass Sie das Meta-Tag og: image vor allen anderen Tags festgelegt haben. Andernfalls funktioniert es nicht!

1

Wenn Sie immer noch Probleme haben, müssen Sie möglicherweise auch dieMIME type-Eigenschaft hinzufügen:

<meta property="og:image:type" content="image/jpeg">

HINWEIS: Das ist image/jpeg nicht image/jpg - (Sie müssen die e dort haben)

Der FB-Crawler akzeptiert image/gif, image/jpeg, image/png

0
Rowe Morehouse

Vielleicht hilft es jemandem ... keine Ahnung warum, aber nachdem ich das aus meinem 'Kopf' Block genommen habe

<link rel="image_src" href="{MY_IMAGE_URI_HERE}" />

Das Problem ist gelöst worden.


Hier sind meine Meta-Tags

...
<meta property="fb:app_id" content="{APP_ID}"/>
<meta property="og:image" content="https://{IMAGE_THUMB_URI}" /> 
<meta property="og:image:secure_url" content="https://{IMAGE_THUMB_URI}" /> 
<meta property="og:image:width" content="450" /> 
<meta property="og:image:height" content="236" />
<meta property="og:url" content="{PAGE_URI}"/>
<meta property="og:title" content="{PAGE_TITLE}"/>
<meta property="og:description" content="{PAGE_DESC.}"/>
...

Ich verwende 'https' in beiden Meta-Tags ( og: image & og: image: secure_url ), da die Website ssl verwendet.

0
Boris