Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Facebook Teilen: Warum werden die Vorschaubilder nicht angezeigt?

30.04.2018 (👁3991)


 

Wenn man bei einer Webseite eine Link zu Facebook teilen möchte, dann erscheint sehr oft kein Vorschaubild.

Woran liegt das?

Beim sogenannten Facebook-Sharer werden die Titel und Texte aus den unsichtbaren HTML-Metatags im Webseiten-Head Bereich ermittelt.

Dort findet man auch die Metatag og:image angabe.

<meta property="og:image" content="https://Readdy.net/User_Files/Notes/Images/Image_127_0.jpg" />

 

Allerdings wird das Bild mit dem Facebook.com/sharer/sharer.php erst zur Laufzeit asynchron gerendert. Das heißt, wenn man einen Link aufmacht, dann weiß Facebook erst später, wie groß und breit ein Bild sein wird.

Deshalb sollte man auch bei Facebook Links zusätzlich zu der Image-Angabe auch die Breite und Höhe des Bildes angeben.

 

Auswertung des Facebook Debuggers

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Freaddy.net%2FNotes%2FDetails%2F127%3Fr%3D1

Warnhinweise, die behoben werden sollten

·        Abgeleitete Eigenschaft

Die angegebenen 'og:image'-Eigenschaften sind noch nicht verfügbar, weil neue Bilder asynchron verarbeitet werden. Um sicherzustellen, dass neue geteilte URLs Bilder enthalten, solltest du die Dimensionen mithilfe von 'og:image:width'- und 'og:image:height'-Tags definieren.

 

Zur Bildgröße:

Die minimale Bildgröße beträgt 200 x 200 Pixel. 

Wenn dein Bild eine Größe unter 600 x 315 Pixel aufweist, wird es dennoch im Linkseitenbeitrag angezeigt, wenn auch viel kleiner.

Verwende Bilder mit mindestens 1200 x 630 Pixel für die beste Anzeige auf hochauflösenden Geräten. Du solltest zumindest Bilder mit 600 x 315 Pixel verwenden

 

Unter der Facebook Seite

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

2. Verwende die Open Graph-Tags og:image:width und og:image:height

Durch Verwendung dieser Tags werden die Bilddimensionen dem Crawler angegeben, damit dieser das Bild rendern kann, anstatt es asynchron herunterladen und verarbeiten zu müssen.